React 入门到进阶全攻略

一、基础入门

1. 环境搭建

安装 Node.js : 访问 Node.js官网下载安装。
创建项目 : 使用 create-react-app 快速初始化项目：
bash 复制代码
```
npx create-react-app my-app
cd my-app
npm start
```

2. JSX 语法

基础语法 ：在 JavaScript 中写 HTML。

jsx 复制代码

const name = "Alice";
const element = <h1>Hello, {name}</h1>;

注意事项 ：
- 标签必须闭合（如 <img />）。
- 属性使用 className 替代 class。

3. 组件化开发

函数组件 （推荐）：

jsx 复制代码

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

类组件 （适用于复杂状态逻辑）：

jsx 复制代码

class Counter extends React.Component {
  state = { count: 0 };
  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

4. 组件通信

Props 传递数据 （父→子）：

jsx 复制代码

function Parent() {
  return <Child message="Hello from Parent" />;
}

function Child({ message }) {
  return <div>{message}</div>;
}

回调函数 （子→父）：

jsx 复制代码

function Parent() {
  const [text, setText] = useState("");
  return <Child onSend={setText} />;
}

function Child({ onSend }) {
  return <button onClick={() => onSend("Hello")}>Send</button>;
}

5. 状态管理

useState 钩子 （函数组件）：

jsx 复制代码

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

二、进阶核心

1. React Hooks

useEffect （处理副作用）：

jsx 复制代码

useEffect(() => {
  document.title = `You clicked ${count} times`;
  return () => console.log("Cleanup"); // 清理逻辑
}, [count]); // 依赖数组

useContext （全局状态共享）：

jsx 复制代码

const ThemeContext = createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
}

2. 路由管理（React Router v6）

基本路由 ：

jsx 复制代码

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Router>
  );
}

3. 性能优化

React.memo （防止不必要的渲染）：

jsx 复制代码

const MemoizedComponent = React.memo(function MyComponent({ prop }) {
  // 仅当 prop 变化时重新渲染
});

useMemo/useCallback （缓存计算结果和函数）：

jsx 复制代码

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

4. 状态管理进阶

Redux Toolkit （简化 Redux 开发）：

jsx 复制代码

// store.js
import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
  },
});

export const { increment } = counterSlice.actions;
export default counterSlice.reducer;

// App.js
import { Provider } from "react-redux";
import store from "./store";

function App() {
  return <Provider store={store}><Counter /></Provider>;
}

// Counter组件
function Counter() {
  const count = useSelector((state) => state.counter);
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch(increment())}>+1</button>
      <span>{count}</span>
    </div>
  );
}

三、实战项目

1. 待办事项应用（Todo List）

功能需求 ：
- 添加任务
- 标记完成/删除任务
- 持久化存储（localStorage）
技术栈 ：
- 组件拆分（Header、TodoList、TodoItem）
- 状态管理（useState）
- 数据持久化（useEffect + localStorage）

2. 电商后台管理系统

功能需求 ：
- 商品列表展示
- 分类筛选
- 购物车管理
技术栈 ：
- Ant Design Pro（UI组件库）
- Redux Toolkit（全局状态）
- Axios（API请求）
- 动态路由（React Router）

四、高级主题

1. 高阶组件（HOC）

用途：复用组件逻辑。

示例：

jsx 复制代码

function withLoading(WrappedComponent) {
  return function WithLoadingComponent({ isLoading, ...props }) {
    if (isLoading) return <div>Loading...</div>;
    return <WrappedComponent {...props} />;
  };
}

const EnhancedComponent = withLoading(MyComponent);

2. 错误边界（Error Boundaries）

用途：捕获子组件的错误，防止崩溃。

示例：

jsx 复制代码

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    console.error("Error caught:", error, info);
  }

  render() {
    return this.state.hasError ? <h1>Something went wrong.</h1> : this.props.children;
  }
}

// 使用
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

3. TypeScript 集成

类型定义 ：

tsx 复制代码

interface User {
  id: number;
  name: string;
}

function UserProfile({ user }: { user: User }) {
  return <div>{user.name}</div>;
}

五、学习资源推荐

官方文档 ：React 官网
社区资源 ：
- React Patterns
- Awesome React
工具链 ：
- IDE：VS Code + ESLint + Prettier
- 包管理：npm / yarn
实战案例 ：
- TodoMVC React 版
- Ant Design Pro