React setState流程解析【前端每日一题-22】

谁践踏了优雅 2024-04-17 13:57 35阅读 0赞

## setState是异步的？setState更新流程是怎样的？ ##

接触react后，在项目开发过程当中，发现setState的是异步方法，需要在回调函数中才能获得真正的值。

this.setState({ num:this.state.num + 1 },()=>{ console.log(this.state.num); });复制代码

> react为什么会这样做呢？setState真的是异步的吗？

查阅相关文章后，才得知，并非如此。另外两种setState同步的做法。

//方法一：在this.setState之后去componentDidUpdate函数中调用，此时的this.state已经更新 componentDidUpdate(){ console.log(this.state.num) } //方法二：在setTimeout函数中，在this.setState之后this.state是立即更新的，所以也可以获取到更新后的数据。 setTimeout(()=>{ this.setState({ num:this.state.num + 1 }); console.log(this.state.num); })复制代码

> 看到这里，相信很多人都颠覆了之前对setState的异步理解，setState到底是如何进行组件state更新的呢？

### setState 更新组件的流程 ###

调用`setState`后，会把我们想要更新的`state`压进一个待更新队列(即内部实例的`_pendingStateQueue`)，然后执行入栈更新操作`enqueueUpdate`，判定是否处于批量更新状态。如果正在进行组件的批量更新，那么久先把实例推进`dirtyComponents`里面等待下一次批量更新；相反若没有批量更新在执行，则会调用一个批量更新的事务。

/** * setState源码 **/ ReactComponent.prototype.setState = function (partialState, callback) { this.updater.enqueueSetState(this, partialState); // 传入新state进队列 if (callback) { // 推入callback队列 this.updater.enqueueCallback(this, callback, 'setState') } } enqueueSetState: function(publicInstance, partialState) { // 获取内部实例 var internalInstance = getInternalInstanceReadyForUpdate(publicInstance, 'setState') if (!internalInstance) { return } // 更新队列合并操作 var queue = internalInstance._pendingStateQueue || (internalInstance._pendingStateQueue = []) queue.push(partialState) // 更新代码 enqueueUpdate(internalInstance) }复制代码

`setState`把我们希望更新的`partialState`推入待更新队列之后，就撒手交给`enqueueUpdate`去处理更新的时机了，我们看一下`enqueueUpdate`又为我们做了什么？

/** * enqueueUpdate源码 **/ function enqueueUpdate(component) { ensureInjected() // 如果不处于批量更新模式 if (!batchingStrategy.isBatchingUpdates) { batchingStrategy.batchedUpdates(enqueueUpdate, component) return } // 如果处于批量更新模式，则将该组件保存在 dirtyComponents 中 dirtyComponents.push(component) }复制代码

可以看到`enqueueUpdate`当中出现了一个重要的对象`batchingStrategy`，他有一个属性`isBatchingUpdates`用来告诉`enqueueUpdate`是应该更新，还是应该等待，把组件推入`dirtyComponents`里。可以想象这是一个`react`内部，用于控制批量更新的对象，让我们更近距离的了解它。

/** * batchingStrategy源码 **/ var ReactDefaultBatchingStrategy = { isBatchingUpdates: false, batchedUpdate: function(callback, a, b, c, d, e) { var alreadyBatchingStrategy = ReactDefaultBatchingStrategy. isBatchingUpdates ReactDefaultBatchingStrategy. isBatchingUpdates = true if (alreadyBatchingStrategy) { callback(a, b, c, d, e) } else { transaction.perform(callback, null, a, b, c, d, e) } } }复制代码

`dirtyComponents`当中提供的`batchedUpdates`其实就是我们一直寻找的，真实用来更新我们组件的方法。然而走到这一步，`react`却又向我们抛出了一个重大的概念——**事务**。`batchedUpdates`当中`transaction.perform`就是事务的调用。

### 事务与componentDidMount ###

了解了`setState`执行的全过程，我们也清楚了这个函数其实`并不一定是异步去执行的`，倘若没有在进行更新dom时，它还是会立即触发dom的更新。

componentDidMount () { this.setState({ val: this.state.val + 1 }) console.log(this.state.val) // 0 this.setState({ val: this.state.val + 1 }) console.log(this.state.val) // 0 }复制代码

按照刚才的想法，当`componentDidMount`执行的时候，按理说页面上已经有完整的dom渲染结束了，为什么此时我调用`setState`不能像`setTimeout`里一样，立即执行对`state`的更新呢？下面先抛出事务的简介。

简单来说，事务是一种`react`的处理机制，通过使用`wrapper`包裹你实际想要调用的方法，做一些**前置**（`initialize`）和**收尾**（`close`）的工作，所以在事务包裹的方法内，会优先触发前置钩子，以及执行完后会有收尾方法调用，这在`react`用作异常处理使用。

所以此时不难想到，其实`componentDidMount`是`react`挂载dom节点的事务的收尾工作，在这个环节操作`state`会被阻塞，直到事务完全执行完毕后，才会重新调用更新。

### setState与生命周期 ###

`setState`会触发组件的更新，同时在组件生命周期的钩子函数中我们往往会有对`state`的操作，操作不当很有可能发生`state change` =》 `update` =》 `change state` =》 `state change`……的死循环，那么哪些钩子函数内使用setState是安全的呢。

我们把生命周期钩子函数罗列出来

constructor -> componentWillMount -> render -> componentDidMount -> componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate复制代码

当中`constructor`中本身就有`state`的声明，在这里是最初的`state`创建，因此不需要使用`setState`

`componentWillMount`中，如果进行同步`setState`调用，此时的操作其实和`constructor`内定义`state`是一样的，并不会触发组件的额外渲染，当然这里可以做异步的`setState`操作，获取页面的初始数据。

`render`、`shouldComponentUpdate`、`componentWillUpdate`这三个函数中，组件还没有渲染结束就继续调用`setState`，会无限触发更新，陷入死循环，是要注意的。

因此我们可用`setState`的生命周期钩子函数有：`componentWillMount`、`componentDidMount`、`componentWillReceiveProps（react16 已废弃，直接使用getDerivedStateFromProps获取props并返回新的state）`、`componentDidUpdate`

至此setState的原理和使用就介绍完了，但是真正使用的契机却往往是前端开发者需要去琢磨的，对于非控制组件，这是react中必要掌握的技术基础了

## 参考： ##

[React setState流程解析][React setState]

转载于:https://juejin.im/post/5d492cd6f265da039f129f3a

[React setState]: https://link.juejin.im?target=https%3A%2F%2Fblog.csdn.net%2Fweixin_33766805%2Farticle%2Fdetails%2F88796385