朝阳区建设工作办公室网站百度云电脑网页版入口

useReducer 作为 useState 的代替方案，在某些场景下使用更加适合，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。

使用 useReducer 还能给那些会触发深更新的组件做性能优化，因为父组件可以向自组件传递 dispatch 而不是回调函数

const [state, dispatch] = useReducer(reducer, initialArg, init);

使用：

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:throw new Error();}
}export default function Counter() {const [state, dispatch] = useReducer(reducer, initialState);return (<><p>Count: {state.count}</p><button onClick={() => dispatch({type: 'decrement'})}>-</button><button onClick={() => dispatch({type: 'increment'})}>+</button></>);
}

 初始化 state：

useReducer 初始化 sate 的方式有两种

// 方式1
const [state, dispatch] = useReducer(reducer,{count: initialCount}
);// 方式2
function init(initialClunt) {return {count: initialClunt};
}const [state, dispatch] = useReducer(reducer, initialCount, init);