useReducer

useReducer 跟 useState 一样的都是帮我们管理组件的状态的，但是呢与useState不同的是 useReducer 是集中式的管理状态的。

比如：

useState更新要一个一个更新
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [age, setAge] = useState(0);


一起更新
const initialState = { name: '', email: '', age: 0 };

function reducer(state, action) {
  return { ...state, [action.field]: action.value };
}

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

<input
  value={state.name}
  onChange={e => dispatch({ field: 'name', value: e.target.value })}
/>

 

 参数：

1.reducer 是一个处理函数，用于更新状态, reducer 里面包含了两个参数，第一个参数是 state，第二个参数是 action（接收dispathch的参数）。reducer 会返回一个新的 state。

2.initialArg 是 state 的初始值。

3.init 是一个可选的函数，用于初始化 state，如果编写了init函数，则默认值使用init函数的返回值，否则使用initialArg

返回值：

useReducer 返回一个由两个值组成的数组：

当前的 state。初次渲染时，它是 init(initialArg) 或 initialArg （如果没有 init 函数）。
dispatch 函数。用于更新 state 并触发组件的重新渲染。