React 小白到高手的分水岭：学会reducer Context这套 useReduce，再也不怕状态传疯了！
React中的reducer和Context API是提升应用状态管理效率的关键工具，学会使用useReduce钩子，可以简化复杂的状态管理逻辑，避免状态传递混乱，通过结合reducer和Context API，可以创建可重用、可维护的状态管理逻辑，使应用更加清晰和易于维护，掌握这套技术，是React小白到高手的分水岭，让你在开发过程中更加游刃有余。
React 小白到高手的分水岭：学会 reducer 与 Context，这套 useReduce，再也不怕状态传疯了！
在React的世界里，管理复杂状态是一项核心技能，从新手到高手的蜕变，往往在于能否高效、优雅地处理这些状态，本文将带你深入了解React中的useReducer和React.Context，通过这两个强大的工具，你将能够轻松应对复杂的状态管理,再也不怕状态传疯了！
React 状态管理的演变
在React的早期版本中，管理状态通常使用useState和useEffect，但随着应用复杂度的提升，这种管理方式逐渐显得力不从心，社区涌现出多种状态管理库，如Redux、MobX等，这些库的学习成本较高,且在某些场景下显得过于沉重。
React团队为了简化状态管理，引入了useReducer，这个Hook提供了一种更简洁、更直观的方式来处理复杂状态，结合React.Context，我们可以实现跨组件的状态共享,而无需依赖外部库。
useReducer 基础
useReducer是一个React Hook，用于处理复杂的状态逻辑，它接受两个参数：一个reducer函数和一个初始状态，reducer函数与Redux中的reducer类似,用于根据当前状态和动作来更新状态。
const [state, dispatch] = useReducer(reducer, initialState);
reducer：一个函数，接收当前状态和动作,返回新的状态。initialState：应用的初始状态。
我们有一个简单的计数器应用：
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
}
Context 的力量
虽然useReducer可以很好地管理单个组件的状态，但在实际应用中，我们往往需要跨多个组件共享状态，这时，React.Context就派上了用场，Context提供了一种在组件树中传递数据的方法,而无需逐层传递props。
创建 Context
我们需要创建一个Context对象：
const Context = React.createContext(defaultValue);
defaultValue：当组件没有从最近的祖先组件接收到值时,将使用这个默认值。
使用 Context 提供值（Provider）
我们需要在组件树中较高的位置（通常是顶层组件）提供一个值：
function App() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<Context.Provider value={{ state, dispatch }}>
<Counter />
</Context.Provider>
);
}
消费 Context 值（Consumer）或 useContext Hook
在需要使用Context值的组件中，我们可以使用useContext来访问它：
function Counter() {
const { state, dispatch } = useContext(Context);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
}
``` 也可以使用传统的`<Context.Consumer>`组件来消费：
```jsx
function Counter() {
return (
<Context.Consumer>
{(value) => (
<div>
<p>Count: {value.state.count}</p>
<button onClick={() => value.dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => value.dispatch({ type: 'decrement' })}>Decrement</button>
</div>
)}
</Context.Consumer>
);
}
``` 这样一来，我们就实现了跨组件的状态共享和更新，这种方式的优点在于代码更加简洁、易于维护，它也避免了props的逐层传递，提高了代码的清晰度。 接下来我们将结合这两个工具来构建一个完整的示例。 #### 四、实战：构建 Todo List 应用 我们将使用`useReducer`和`React.Context`来构建一个简单的Todo List应用，这个应用将包含以下功能： * 添加新任务 * 删除任务 * 完成/未完成切换 ##### 1. 创建 Context 我们创建一个Context来管理Todo List的状态： ```jsx const TodoContext = React.createContext({ todos: [], dispatch: null }); ``` ##### 2. 创建 Reducer 我们定义一个reducer来处理Todo List的状态更新： ```jsx function todoReducer(state, action) { switch (action.type) { case 'ADD_TODO': return [...state, { id: action.id, text: action.text, completed: false }]; case 'REMOVE_TODO': return state.filter(todo => todo.id !== action.id); case 'TOGGLE_TODO': return state.map(todo => ({ ...todo, completed: todo.id === action.id ? !todo.completed : todo.completed })); default: throw new Error(); } } ``` ##### 3. 创建 Provider 在顶层组件中提供Todo Context的值： ```jsx function App() { const [state, dispatch] = useReducer(todoReducer, []); return ( <TodoContext.Provider value={{ state, dispatch }}> <TodoList /> </TodoContext.Provider> ); } ``` ##### 4. 创建 TodoList 组件 在这个组件中，我们将显示任务列表并提供操作按钮： ```jsx function TodoList() { const { state, dispatch } = useContext(TodoContext); return ( <div> <ul> {state.map(todo => ( <li key={todo.id}> <input type="checkbox" checked={todo.completed} onChange={() => dispatch({ type: 'TOGGLE_TODO', id: todo.id })} /> {todo.text} <button onClick={() => dispatch({ type: 'REMOVE_TODO', id: todo.id })}>Remove</button> </li> ))} </ul> <input placeholder="Add a new task" onKeyPress={e => e.key === 'Enter' && dispatch({ type: 'ADD_TODO', id: Date.now(), text: e.target.value })} /> </div> ); } ``` ##### 5. 完成应用 现在我们已经完成了所有必要的部分，可以运行这个应用了： ```jsx function App() { const [state, dispatch] = useReducer(todoReducer, []); return ( <TodoContext.Provider value={{ state, dispatch }}> <TodoList /> </TodoContext.Provider> ); } function TodoList() { const { state, dispatch } = useContext(TodoContext); return ( <div> <ul> {state.map(todo => ( <li key={todo.id}> <input type="checkbox" checked={todo.completed} onChange={() => dispatch({ type: 'TOGGLE_TODO', id: todo.id })} /> {todo.text} <button onClick={() => dispatch({ type: 'REMOVE_TODO', id: todo.id })}>Remove</button> </li> ))} </ul> <input placeholder="Add a new task" onKeyPress={e => e.key === 'Enter' && dispatch({ type: 'ADD_TODO', id: Date.now(), text: e.target.value })} /> </div> ); } ReactDOM.render(<App />, document.getElementById('root')); ``` 这个应用展示了如何使用`useReducer`和`React.Context`来管理复杂的状态，通过这两个工具的结合使用，我们可以轻松地实现跨组件的状态共享和更新，这不仅提高了代码的可维护性，还使得应用更加清晰易懂，对于React开发者来说，掌握这两个工具是从小白到高手的必经之路，希望本文对你有所帮助！