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

Question

我正在学习React，并尝试围绕语法和概念。从React的教程中可以看出：

  

状态更新可能异常

     

React可以将多个setState（）调用批处理为单个更新   性能

     

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

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

Answer 1

React会在合理的情况下立即呈现更新状态的组件 - 例如，在事件处理程序中，您可以更改多个组件的状态，但是单独使用新状态呈现它们是不合理的 - 而是React将批量更新并在事件处理程序完成后呈现组件。

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

Answer 2

React使用状态来帮助用javascript管理每个组件。由于状态总是可以改变，因此它非常灵活。一个缺点是，由于它很灵活，当有多个对象时，很难管理状态。将组件保持在可管理的部分是理想的，这样您就可以找到状态不符合预期的状态。

为了防止数据意外变异，将ImmutableJs或Redux等工具/概念与React结合起来，使管理工具更加高效。

Redux通过单向流控制/组织状态变化的位置。 http://redux.js.org/docs/basics/UsageWithReact.html

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

Answer 3

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

例如：

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