我找不到答案,这是我的问题。使用带有点差运算符的钩子有什么更好的做法?
const [user, setUser] = useState({name: 'John', email: 'john@john.pl'})
setUser(prev => {...prev, name: 'New name'})
还是为每个属性创建状态?
const [name, setName] = useState('John')
setName('New name')
const [email, setEmail] = useState('john@john.pl')
setEmail('New email')
什么是更好的选择,为什么?
显然是第二个,因为您不需要在每个状态更新时传递整个用户状态,而只需要传递用户名或电子邮件。尽量保持简单。
请在 react 文档中阅读此信息。
https://reactjs.org/docs/hooks-faq.html#should-i-use-one-or-many-state-variables
这两种方法各有利弊。
文档中的一些重要亮点:
我们建议根据 哪些值往往会一起变化。
既将所有状态放在单个 useState 调用中,又具有 每个字段的使用状态调用都可以工作。组件往往是大多数 当您在这两个极端之间找到平衡时可读,并且分组 将相关状态分成几个独立的状态变量。如果状态 逻辑变得复杂,我们建议使用化简器或 自定义钩子。
通常,使用钩子时最好具有简单的状态,因为setState()
的工作方式与类组件中的this.setState()
略有不同 - 它不合并更改,而只是更新这些更改:
// in class component
this.setState({ name: 'Hello' }); // update only name field of state
// in functional component
setState({ name: 'Hello' }); // sets { name: 'Hello' } as new state
对于复杂状态,您可以使用useReducer()
钩子。
钩子状态比setState更容易使用。你可以像这样使用带有点差运算符的钩子
const [user, setUser] = useState({name: 'John', email: 'john@john.pl'});
setUser({...user, name: 'New name'});