React 中级教程

1. useState 与 setState 深入理解

import React, { useState } from 'react';const Counter = () => {const [count, setCount] = useState(0);const increment = () => {setCount(count + 1); // setState 会异步更新};return (<div><p>Count: {count}</p><button onClick={increment}>Increment</button></div>);
};export default Counter;

概述: useState 是 React 中的一个核心 Hook，用于声明组件状态。使用 useState 时，状态的更新通常是异步的，可能在事件处理和渲染周期中产生一些延迟。在此示例中，count 作为一个状态变量，setCount 用来更新它。这个机制使得 React 能够更高效地管理和更新 UI。

---

2. useEffect 副作用和清理

import React, { useState, useEffect } from 'react';const Timer = () => {const [seconds, setSeconds] = useState(0);useEffect(() => {const interval = setInterval(() => {setSeconds(prev => prev + 1);}, 1000);return () => clearInterval(interval); // 清理定时器}, []); // 空数组表示只在组件挂载时执行一次return <div>Time: {seconds}s</div>;
};export default Timer;

概述: useEffect 用于处理副作用，例如定时器、网络请求和 DOM 操作。通过传递空数组作为依赖项，确保副作用只在组件挂载时执行一次。在清理阶段，useEffect 返回一个清理函数来避免内存泄漏和无效的副作用，如这里的定时器。

---

3. 自定义 Hook：使用 LocalStorage

import { useState, useEffect } from 'react';function useLocalStorage(key, initialValue) {const [value, setValue] = useState(() => {const storedValue = window.localStorage.getItem(key);return storedValue ? JSON.parse(storedValue) : initialValue;});useEffect(() => {window.localStorage.setItem(key, JSON.stringify(value));}, [key, value]);return [value, setValue];
}const App = () => {const [name, setName] = useLocalStorage('name', 'Guest');return (<div><input value={name} onChange={(e) => setName(e.target.value)} /><p>Welcome, {name}!</p></div>);
};export default App;

概述: 自定义 Hook 允许你将逻辑复用到多个组件中。此示例展示了如何创建一个处理 LocalStorage 的自定义 Hook，确保状态在页面刷新时保持。它利用 useState 初始化值，并通过 useEffect 更新 localStorage。

---

4. useReducer 替代 useState

import React, { useReducer } from 'react';const initialState = { count: 0 };function reducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:return state;}
}const Counter = () => {const [state, dispatch] = useReducer(reducer, initialState);return (<div><p>Count: {state.count}</p><button onClick={() => dispatch({ type: 'increment' })}>Increment</button><button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button></div>);
};export default Counter;