React 进阶深入理解核心概念与高阶实践

在上一节中，我们学习了 React 的基础知识，包括组件、状态管理和基本操作。接下来，我们将进一步探索 React 的高级功能和实战技巧，例如 组件间通信、高阶组件、Context API、React Router 等。这些内容将帮助你构建更复杂、功能更丰富的应用。

一、组件间通信

React 的组件树是单向数据流，但在实际开发中，组件之间需要相互通信，常见的方式包括：

1. 父子组件通信（通过 props）

父组件通过 props 将数据传递给子组件。

示例：父组件向子组件传递数据

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

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

2. 子组件向父组件通信（通过回调函数）

父组件可以将回调函数作为 props 传递给子组件，子组件调用回调函数以传递数据。

示例：子组件传递数据给父组件

function Child({ sendMessage }) {
  return (
    <button onClick={() => sendMessage("Hello from Child!")}>
      Send Message
    </button>
  );
}

function Parent() {
  const handleMessage = (msg) => {
    alert(msg);
  };

  return <Child sendMessage={handleMessage} />;
}

3. 兄弟组件通信（通过共享父组件状态）

兄弟组件可以通过父组件的状态进行间接通信。

二、Context API：实现全局状态管理

在复杂应用中，层层传递 props 会导致代码冗杂，Context API 提供了一种更简洁的状态共享方式。

1. 创建 Context

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext();

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

function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  const theme = useContext(ThemeContext); // 使用 Context
  return <button className={theme}>I am styled by theme</button>;
}

特点：

• 全局性：可以跨组件树共享数据。
• 灵活性：代替繁琐的 props 传递。

三、React Router：路由管理

React Router 用于管理多页面应用中的路由和导航。

1. 安装

npm install react-router-dom

2. 基本用法

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

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

function Home() {
  return <h1>Welcome to Home Page</h1>;
}

function About() {
  return <h1>About Us</h1>;
}

四、高阶组件（HOC）

高阶组件是一种增强组件功能的模式，它本质上是一个接受组件作为参数并返回新组件的函数。

示例：实现一个日志功能的高阶组件

function withLogger(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log("Props:", props);
    return <WrappedComponent {...props} />;
  };
}

// 使用 HOC
function Hello({ name }) {
  return <h1>Hello, {name}!</h1>;
}

const HelloWithLogger = withLogger(Hello);

五、自定义 Hook

Hooks 是 React 的强大特性，允许在函数组件中复用逻辑。自定义 Hook 使逻辑更加抽象和可复用。

示例：创建一个计时器 Hook

import { useState, useEffect } from 'react';

function useTimer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => setTime((t) => t + 1), 1000);
    return () => clearInterval(interval); // 清理计时器
  }, []);

  return time;
}

function TimerComponent() {
  const time = useTimer();
  return <h1>Time elapsed: {time} seconds</h1>;
}

六、性能优化

React 提供了多种优化性能的方法：

1. 使用 React.memo

防止不必要的组件重新渲染。

const Child = React.memo(function ({ count }) {
  console.log("Rendered");
  return <h1>{count}</h1>;
});

2. 使用 useCallback 和 useMemo

• useCallback：缓存函数引用，减少不必要的渲染。
• useMemo：缓存计算结果，避免重复计算。

示例：使用 useCallback 和 useMemo

import React, { useState, useCallback, useMemo } from 'react';

function App() {
  const [count, setCount] = useState(0);

  const expensiveCalculation = useMemo(() => {
    console.log("Calculating...");
    return count * 2;
  }, [count]);

  const handleClick = useCallback(() => setCount(count + 1), [count]);

  return (
    <div>
      <h1>{expensiveCalculation}</h1>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

七、实战案例：Todo 应用

1. 创建 Todo 组件

import React, { useState } from 'react';

function TodoApp() {
  const [tasks, setTasks] = useState([]);
  const [input, setInput] = useState("");

  const addTask = () => {
    if (input) {
      setTasks([...tasks, input]);
      setInput("");
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={addTask}>Add</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
}

八、学习方向建议

1. 深入了解 Hooks：包括 useReducer、useImperativeHandle 等。
2. 学习状态管理工具：如 Redux、MobX。
3. 熟悉服务端渲染：如 Next.js 框架。
4. 构建全栈项目：将 React 与后端（Node.js、Express、GraphQL）结合。

通过这些进阶学习，你将能够构建更复杂、更高效的 React 应用！