我有一个问题,是否可以在React Hooks中使用通用的“ useState”,就像我可以在React Components中这样做一样?
在React Components中,我可以这样做:
handleChange(event) { const {name, value} = event.target this.setState({ [name]: value }) }
在React Hooks中甚至有可能实现?
是的,使用挂钩可以通过三种方式管理复杂的状态(无需第三方库):
useReducer
1
useState
看看这个例子:
const [statesManager, setStatesManager] = useState(complexStateInitial); const [state, dispatch] = useReducer(reducer, complexStateInitial); const onChangeUseState = e => { const { name, value } = e.target; setStatesManager(prevState => ({ ...prevState, [name]: value })); }; const onChangeUseReducer = e => { const { name, value } = e.target; dispatch({ type: name, value }); };
笔记
为了简化起见,有一个代码重复。
与setState类组件中的方法不同,useState它不会自动合并更新对象。您可以通过将函数更新程序形式与对象传播语法结合使用来复制此行为:
setState
setState(prevState => { // Object.assign would also work return {...prevState, ...updatedValues}; });
参考React Docs