React 把用户界面当作简单状态机。把用户界面想像成拥有不同状态然后渲染这些状态，可以轻松让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。React 来决定如何最高效地更新 DOM。

常用的通知 React 数据变化的方法是调用 setState(data, callback)。这个方法会合并（merge） data 到 this.state，并重新渲染组件。渲染完成后，调用可选的 callback 回调。大部分情况下不需要提供 callback，因为 React 会负责把界面更新到最新状态。

哪些组件应该有 State？

  1. 大部分组件的工作应该是从 props 里取数据并渲染出来。但是，有时需要对**用户输入**、**服务器请求**或者**时间变化**等作出响应，这时才需要使用 State。<br />   ** 尝试把尽可能多的组件无状态化**。这样做能隔离 state，把它放到最合理的地方，也能减少冗余，同时易于解释程序运作过程。<br />    **常用的模式**是**创建多个只负责渲染数据的无状态（stateless）组件**，在它们的**上层创建一个有状态（stateful）组件**并把它的状态通过 props 传给子级。这个**有状态的组件封装了所有用户的交互逻辑**，而这些**无状态组件则负责声明式地渲染数据**。

哪些 应该 作为 State？

** State 应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据。 真实的应用中这种数据一般都很小且能被 JSON 序列化。当创建一个状态化的组件时，想象一下表示它的状态最少需要哪些数据，并只把这些数据存入 this.state。在 render() 里再根据 state 来计算你需要的其它数据。你会发现以这种方式思考和开发程序最终往往是正确的，因为如果在 state 里添加冗余数据或计算所得数据，需要你经常手动保持数据同步，不能让 React 来帮你处理。
哪些 不应该 作为 State？**
this.state 应该仅包括能表示用户界面状态所需的最少数据。因此，它不应该包括：

  • 计算所得数据： 不要担心根据 state 来预先计算数据 —— 把所有的计算都放到 **render()** 里更容易保证用户界面和数据的一致性。例如，在 state 里有一个数组（listItems），我们要把数组长度渲染成字符串， 直接在 render() 里使用 this.state.listItems.length + ‘ list items’ 比把它放到 state 里好的多。
  • React 组件： 在 render() 里使用当前 props 和 state 来创建它。
  • 基于 props 的重复数据： 尽可能使用 props 来作为惟一数据来源。把 props 保存到 state 的一个有效的场景是需要知道它以前值的时候，因为未来的 props 可能会变化。

注意

  1.  为了提升性能，不保证 setState() 调用的同步性。setState() 不会立刻改变 this.state，而是创建一个即将处理的 state 转变。在调用该方法之后获取 this.state 的值可能会得到现有的值，而不是最新设置的值。

setState() 将总是触发一次重绘，除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。如果使用可变的对象，但是又不能在 shouldComponentUpdate() 中实现这种逻辑，仅在新 state 和之前的 state 存在差异的时候调用 setState() 可以避免不必要的重新渲染。

React 中数据是沿着组件树从上到下单向流动的。
识别State的方法
哪一项需要state，可以提问三个问题：

  1. 是否是从父级通过 props 传入的？如果是，可能不是 state 。
  2. 是否会随着时间改变？ 如果不是，可能不是 state 。

  3. 能根据组件中其它 state 数据或者 props 计算出来吗？如果是，就不是 state 。

    1.    一般有**用户输入**、**服务器请求**或者时间变化等作出响应，这时才需要使用 State。<br />

确认state
哪个组件应该拥有哪些 state 数据模型？
对于应用中的每一个 state 数据：

  • 找出每一个基于那个 state 渲染界面的组件。
  • 找出共同的祖先组件（某个单个的组件，在组件树中位于需要这个 state 的所有组件的上面）。
  • 要么是共同的祖先组件，要么是另外一个在组件树中位于更高层级的组件应该拥有这个 state 。
  • 如果找不出拥有这个 state 数据模型的合适的组件，创建一个新的组件来维护这个 state ，然后添加到组件树中，层级位于所有共同拥有者组件的上面。