React中对象的状态如何更新准确地工作

我正在学习React，并试图围绕语法和概念进行思考。从教程阵营中提到：React中对象的状态如何更新准确地工作

状态更新可以是异步

阵营5批次多的setState（）调用成性能更新一次。

因为this.props和this.state可能会异步更新，所以不应该依赖它们的值来计算下一个状态。

我的问题是，如果this.state没有随时更新，我们可以依靠它来显示正确的信息吗？如果我的理解是正确的，React会出于性能原因分批更新这个状态，但它会影响应用程序的准确性吗？ React如何创建这些批次以及它们何时得到应用？

2017-01-23 poushy

只要合理，React会尽快呈现组件状态 - 例如，在事件处理程序中，您可以更改多个组件的状态，但是单独使用新状态呈现它们是不合理的 - 相反，React将会批处理在事件处理程序完成后更新和渲染组件。

在更新和渲染之间正确编写的应用程序延迟对于用户来说是不明显的。从开发人员的角度来看，异步更新可能会引入难以发现的错误（使用Redux，其中每个状态更新都基于以前的状态应该可以解决其中的大部分问题;当然，在纯React中也可以使用带回调的setState()）。

来源

2017-01-23 21:27:42 nobody

谢谢您的回复，我明白了，因此它会进行逻辑分组，并且如果您在它以某种方式不会导致问题。就像你在事件处理程序中提到的一样，所以你不能更新某个对象的状态，然后使用该状态来改变同一处理程序中的其他东西？您提到Redux，为此包含另一个库或使用回调来完成是否理想？ – poushy

请记住，你知道新的状态 - 你正在设置它（只是不要通过this.state来访问它）。还要记住，您可以将回调作为第二个参数传递给'setState（）'，它将在状态更新后调用。然而更好的选择是使用组件的componentDidUpdate方法。 Redux强制特定架构 - 检查它是否适合您的需求。就我个人而言，我认为这对于复杂的SPA很好，但对于简单的应用来说过于复杂。 – nobody

感谢您的意见，他们真的很有帮助。 – poushy

React使用状态来帮助用JavaScript管理每一个组件。由于国家可以随时改变，所以它非常灵活。一个缺点是，由于它具有灵活性，因此当存在多个对象时可能很难管理状态。将组件保存在易于管理的组件中是非常理想的，这样您就可以定位状态的行为不像预期的那样。

为防止数据意外变异，工具/概念（如ImmutableJs或Redux）已与React结合使用，使管理工具更有效率。

Redux控制/组织通过单向流动状态改变的地方。 http://redux.js.org/docs/basics/UsageWithReact.html

ImmutableJs使用持久性不可变数据结构来锁定状态以防止意外的更改。 https://facebook.github.io/immutable-js/

来源

2017-01-23 21:28:34 Gary

谢谢，我也会研究这些库。 – poushy

状态是异步的并不意味着你不能依赖它，但你应该小心如何以及何时使用你所在的信息。

例如：

this.setState({charCount: 5}); 
console.log(this.state.charCount) // may not be 5 as setState is asynchronous

在另一方面，你可以使用回调，以确保你有一个正确的值：

this.setState({charCount: 5},() => { console.log(this.state.charCount) });

一般的做法是，你应该尝试尽量少用只有在用户界面需要更改时才能使用它。如果您需要处理或操作数据而无需更改UI，请尽量避免使用状态并使用此示例：Lifting State Up

来源

2017-01-23 21:34:12 Shota

谢谢我会查看建议的文章。 – poushy

React中对象的状态如何更新准确地工作

回答

相关问题