关于前端:关于React的setState

6次阅读

共计 993 个字符，预计需要花费 3 分钟才能阅读完成。

文章参考 React 官网文档知乎专栏

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
}

React 文档中有一句话 “出于性能思考，React 可能会把多个 setState() 调用合并成一个调用。” 也就是说，咱们在 setState 后想用最新的 state 去做一些计算时，可能不会拿到咱们想要的值。

但这并不代表 setState 肯定是异步的，这个办法的实现自身是一个同步的流程，但 React 出于性能思考，在某些场景下会使 setState 的值异步更新。能够了解为setState 自身不是异步的过程，但 React 不保障 setState 肯定是同步的。

React 为了解决跨平台问题，兼容所有浏览器，本人封装了一套 浏览器的原生事件的跨浏览器包装器 ，即 合成事件 。onClick、onFocus、onBlur 这些都是合成事件。

如图所示，通过点击事件扭转 count 状态的值，setState 后在控制台输入的还是原来的值，合成事件中的 setState 不是同步的。

生命周期中调用 setState 办法，React 同样没有立刻更新 state，而是等 componentDidUpdate 执行完后再执行 setState

与合成事件不同，原生事件中 setState 后能够间接拿到更新后的 state 值

能够在原生事件、合成事件、生命周期中应用 setTimeout，不论是哪种场景，因为 JS event loop 机制，setTimeout 中 setState 后总能拿到最新的 state

正文完