使用带有对象或单个值的钩子?



我找不到答案,这是我的问题。使用带有点差运算符的钩子有什么更好的做法?

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'});

相关内容

  • 没有找到相关文章

最新更新