文章参考 React官网文档 知乎专栏
state和props
state（状态）和props（属性）是React组件渲染须要的数据，不同的是state是组件公有的，齐全由组件本身保护；props由父组件传递给以后组件。
能够在class组件的constructor中初始化state，这是惟一能给state赋值的中央。如果要扭转state，不能以this.state.xxx = xxx这种模式赋值，这样做React会认为state没有扭转，组件不会更新。须要调用React组件的setState办法更新state
class Counter extends React.Component{ constructor(props){ super(props) this.state = { count: 0 } } // render}setState是异步的吗？
React文档中有一句话“出于性能思考，React 可能会把多个 setState() 调用合并成一个调用。”也就是说，咱们在setState后想用最新的state去做一些计算时，可能不会拿到咱们想要的值。
但这并不代表setState肯定是异步的，这个办法的实现自身是一个同步的流程，但React出于性能思考，在某些场景下会使setState的值异步更新。能够了解为setState自身不是异步的过程，但React不保障setState肯定是同步的。
合成事件中的setState
React为了解决跨平台问题，兼容所有浏览器，本人封装了一套浏览器的原生事件的跨浏览器包装器，即合成事件。onClick、onFocus、onBlur这些都是合成事件。
如图所示，通过点击事件扭转count状态的值，setState后在控制台输入的还是原来的值，合成事件中的setState不是同步的。
生命周期中的setState
生命周期中调用setState办法，React同样没有立刻更新state，而是等componentDidUpdate执行完后再执行setState
原生事件中的setState
与合成事件不同，原生事件中setState后能够间接拿到更新后的state值
setTimeout中的setState
能够在原生事件、合成事件、生命周期中应用setTimeout，不论是哪种场景，因为JS event loop机制，setTimeout中setState后总能拿到最新的state