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); // 使用 Contextreturn <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>);
}