javascript - React Hooks 和 useState 的使用
问题描述
我有一个包含一些状态的组件。之间有什么不同
示例 1:
function CompA() {
[a, setA] = useState(0);
[b, setB] = useState("Test");
return (<div>{{ a }} and {{ b }}</div>);
}
和示例 2:
function CompA() {
[state, setState] = useState({a: 0, b: "Test"});
return (<div>{{ state.a }} and {{ state.b }}</div>);
}
示例 2 更详细。但是我在网上看到的所有钩子示例都更喜欢示例 2 的风格。是否有任何性能损失或最佳实践偏爱一种或另一种?
解决方案
这两种方法最终都将达到相同的最终目标,您将创建一个呈现以下元素的组件:<div>{{ state.a }} and {{ state.b }}</div>
但是,这里是Example 1的一个场景。如果您希望更新两个状态(a
和b
),您必须调用 2 个不同的方法来更新状态:
setA(1);
setB('bbbb');
另一方面,对于Example 2,您只需要调用 1 个方法来更新状态。
setState({
a: 1,
b: 'bbb',
});
但是,这种方法的缺点是,如果您只想更新其中一个属性,则必须传播整个状态对象(感谢 @DrewReese指出这一点)。例如,如果您只想更新b
,
setState({
...state,
b: 'bbb',
});
话虽如此,说示例 1 的“性能”较差是不准确的,因为如果在同一个事件处理程序中调用 React 将批量更新,并导致一次重新渲染。
推荐阅读
- mysql - 如何正确使用 select 进行更新?
- python - 在 numpy 结构化数组中查找“行”的匹配子集
- mysql - 不同的排序规则或字符集值会影响查询优化器对索引的使用吗?
- asp.net-core - Blazor 服务器应用设置文件
- typescript - 无法索引动态类型的嵌套属性
- javascript - 在 .on(change) 内使用 .on(click) 的问题
- c++ - 如何更改 begin() 迭代器指向的值?
- css - 使用内联 CSS 样式化组件 - Ionic5
- python - 使用 Python 实现多线程在 While 循环中执行 SQL 插入
- php - 服务器已消失 php mysql connexion 错误