React 入门到进阶全攻略

React 入门到进阶全攻略

---

一、基础入门

1. 环境搭建

• 安装 Node.js: 访问 Node.js官网 下载安装。
• 创建项目: 使用 create-react-app 快速初始化项目：

  npx create-react-app my-app
  cd my-app
  npm start
  

2. JSX 语法

• 基础语法：在 JavaScript 中写 HTML。

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

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

3. 组件化开发

• 函数组件（推荐）：

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

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

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

4. 组件通信

• Props 传递数据（父→子）：

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

• 回调函数（子→父）：

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

5. 状态管理

• useState 钩子（函数组件）：

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

---

二、进阶核心

1. React Hooks

• useEffect（处理副作用）：

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

• useContext（全局状态共享）：

  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）

• 基本路由：

  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（防止不必要的渲染）：

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

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

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

4. 状态管理进阶

• Redux Toolkit（简化 Redux 开发）：

  // 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）

• 用途：复用组件逻辑。
• 示例：

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

2. 错误边界（Error Boundaries）

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

  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 集成

• 类型定义：

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

---

五、学习资源推荐

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