state

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

state和props相似，但是它是私有的，完全由组件自身控制。state特性只在class中出现。state包含的是组件中会变化的数据，state是自定义的，它是一个普通的JS对象。指定this.state值的唯一地方是constructor中。

1. setState(nextState, callback)

setState可以在事件处理中触发UI更新，服务端请求回调。

第一个参数可以是一个对象（包含0或多个键值等待更新）或者是一个函数（接受state和prop）返回一个需要更新的键值对对象。下面是例子：

this.setState({mykey: 'my new value'});

也可以传递一个函数function(state, props) => newState。传入的函数的第一个参数是当前的state，第二个参数是更新前的props。假设我们要通过props.step在state中增加一个值。

this.setState((prevState, props) => {
  return {myInteger: prevState.myInteger + props.step};
});

第二个参数是一个可选的回调函数，该函数在 setState 执行完毕并且组件重新渲染完成之后调用。一般我们建议使用componentDidUpdate来代替。

setState不会立即使得this.state发生突变，而是创建一个state过渡状态。

setState会导致re-render，除非shouldComponentUpdate返回false。

2. state 更新可能是异步的

为了更好的性能，React可能会调用一个更新，批处理多个setState()。因为this.props和this.state可能异步更新，因此不能依靠他们的值来计算下一个状态值。比如下面这个例子，可能会使得counter更新失败：

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

解决这个问题可以使用第二种方法使用setState()，给setState()传入一个函数而不是一个对象。传入的函数的第一个参数是当前的state，第二个参数是更新前的props。因此上面的例子可以改写为：

// Correct
this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

注意：

绝对不要直接改变 this.state，因为在之后调用 setState() 可能会替换掉你做的更改。把 this.state 当做不可变的。

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

不保证 setState() 调用的同步性，为了提升性能，可能会批量执行 state 转变和 DOM 渲染。

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

3. Lifting State Up

There should be a single "source of truth" for any data that changes in a React application. Usually, the state is first added to the component that needs it for rendering. Then, if other components also need it, you can lift it up to their closest common ancestor. Instead of trying to sync the state between different components, you should rely on the top-down data flow.

通常情况下，state首先会添加到需要他的组件中。如果在后续代码中，其他组件也需要他，就可以考虑将其提出来放在最近的共同祖先中。

4. 哪些应该作为state

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