Compréhension approfondie du mécanisme de mise à jour de setState dans React

setState, en tant que partie importante de React, met en file d'attente les modifications apportées à l'état du composant et informe React qu'il doit restituer ce composant et ses sous-composants avec l'état mis à jour. L'article suivant vous présentera le mécanisme setState dans React. J'espère qu'il vous sera utile !

state est un concept important dans React. Nous savons que React gère les composants via la gestion des états. Alors, comment React contrôle-t-il l'état des composants et comment utilise-t-il l'état pour gérer les composants ? [Recommandations associées : Tutoriel vidéo Redis]state是React中的重要概念。我们知道，React是通过状态管理来实现对组件的管理。那么，React是如何控制组件的状态的，又是如何利用状态来管理组件的呢？【相关推荐：Redis视频教程】

我们都知道，React通过this.state来访问state，通过this.setState()方法更新state。当this.setState()被调用的时候，React会重新调用render方法来重新渲染UI。

setState已经是我们非常熟悉的一个API，然而你真的了解它吗？下面我们将一起来解密setState的更新机制。

setState异步更新

大家刚开始写React的时候，通常会写出 this.state.value = 1 这样的代码，这是完全错误的写法。

注意：绝对不要直接修改 this.state,这不仅是一种低效的做法，而且很有可能会被之后的操作替换。

setState通过一个队列机制实现state更新。当执行setState时，会将需要更新的state合并后放入状态对列，而不会立刻更新this.state,队列机制可以高效地批量更新state。如果不通过setState而直接修改this.state的值，那么该state将不会被放入状态队列中，当下次调用setState 并对状态队列进行合并时，将会忽略之前直接被修改的 state，而造成无法预知的错误。

因此，应该使用 setState 方法来更新 state，同时 React 也正是利用状态队列机制实现了 setState的异步更新，避免频繁地重复更新 state。相关代码如下：

// 将新的state合并到状态更新队列中
var nextState = this._processPendingState(nextProps, nextContext);

// 根据更新队列和 shouldComponentUpdate 的状态来判断是否需要更新组件
var shouldUpdate = this._pendingForceUpdte || !inst.shouldCompoonentUpdate || inst.shouldComponentUpdate(nextProps, nextState, nextContext0;

setState循环调用风险

当调用setState时，实际上会执行 enqueueSetState 方法，并对 partialState 以及 _pendingStateQueue 更新队列进行合并操作，最终操作 enqueueSetState 执行 state 更新。

而 performUpdateIfNecessary 方法会获取 _pendingElement、_pendingStateQueue、_pendingForceUpdate，并调用 receiveComponent 和 updateComponent 方法进行组件更新。

如果在 shouldComponetUpdate 或 componentWillUpdate 方法中调用 setState， 此时 this._pendingStateQueue != null, 则 performUpateIfNecessary 方法就会调用 updateComponent 方法进行组件更新，但 updateComponent 方法又会调用 shouldComponentUpdate 和 componentWillUpdate 方法，因此造成循环调用，使得浏览器内存占满后崩溃。

setState调用栈

既然 setState 最终是通过 enqueueUpate 执行 state 更新，那么 enqueueUpdate 到底是如何更新 state 的呢？

首先，看看下面这个问题，你是否能够正确回答呢？

import React, { Component } from 'react'

class Example extends Component {
  constructor() {
    super()
    this.state = {
      val: 0
    }
  }
  
  componentDidMount() {
    this.setState({val: this.state.val + 1})
    console.log(this.state.val) 
    
    this.setState({val: this.state.val + 1})
    console.log(this.state.val) 
    
    setTimeout(() => {
      this.setState({val: this.state.val + 1})
      console.log(this.state.val) 
      this.setState({val: this.state.val + 1})
      console.log(this.state.val) 
    },0)
  }
  
  render() {
    return null
  }
}

上述代码中， 4 次 console.log 打印出来的 val 分别是：0、0、2、3。

假如结果与你心中的答案不完全相同，那么你是否想知道 enqueueUpdate 到底做了什么？ 下图是一个简化的 setState 调用栈，注意其中核心的状态判断。

setState简化调用栈

解密setState

到底是怎么导致 setState

Nous le savons tous, React accède à state via this.state et met à jour state via la méthode this.setState() . Lorsque this.setState() est appelé, React rappellera la méthode render pour restituer UI . 🎜🎜setState est déjà une API que nous connaissons très bien, mais la comprenez-vous vraiment ? Ci-dessous, nous décrypterons le mécanisme de mise à jour de setState. 🎜

mise à jour asynchrone setState

🎜Lorsque tout le monde commence à écrire React, ils écrivent généralement this.state.value = 1 </ code> Un tel code est complètement faux. 🎜<blockquote>🎜Remarque : ne modifiez jamais this.state directement. Non seulement c'est une approche inefficace, mais elle est également susceptible d'être remplacée par des opérations ultérieures. 🎜</blockquote>🎜<code>setState implémente les mises à jour state via un mécanisme de file d'attente. Lorsque setState est exécuté, le state qui doit être mis à jour sera fusionné et placé dans la file d'attente d'état, et this.state ne sera pas mis à jour immédiatement. La file d'attente Le mécanisme peut mettre à jour efficacement l'état par lots. Si la valeur de this.state est modifiée directement sans setState, alors le state ne sera pas mis dans la file d'attente d'état lors de son prochain appel. Lorsque setState est utilisé pour fusionner les files d'attente d'état, l' état précédemment directement modifié sera ignoré, provoquant des erreurs imprévisibles. 🎜🎜Par conséquent, la méthode setState doit être utilisée pour mettre à jour state. En même temps, React utilise également le mécanisme de file d'attente d'état pour implémenter <. code>setState pour éviter les mises à jour fréquentes et répétées de state. Le code pertinent est le suivant : 🎜

import ReactDOM, { unstable_batchedUpates } from 'teact-dom'

unstable_batchedUpates(() => {
  this.setState(val: this.state.val + 1)
  this.setState(val: this.state.val + 1)
})

Risque d'appel en boucle setState

🎜Lorsque setState est appelé, enqueueSetState</code > sera effectivement exécuté > et fusionnera les files d'attente de mise à jour <code>partialState et _endingStateQueue, et l'opération finale enqueueSetState exécute le state< /code> mise à jour. 🎜🎜La méthode <code>performUpdateIfNecessary obtiendra _endingElement, _endingStateQueue, _endingForceUpdate et appellera les méthodes receiveComponent et updateComponent pour mettre à jour composants . 🎜🎜Si setState est appelé dans la méthode shouldComponetUpdate ou componentWillUpdate , alors this._endingStateQueue != null, alors La méthode performUpateIfNecessary appellera la méthode updateComponent pour mettre à jour le composant, mais la méthode updateComponent appellera shouldComponentUpdate et < code> composantWillUpdate, provoquant ainsi un appel en boucle, provoquant le crash du navigateur une fois la mémoire pleine. 🎜🎜🎜

pile d'appels setState

🎜Puisque setState effectue finalement la mise à jour de state via enqueueUpate, alors comment enqueueUpdate met-il à jour state ? 🎜🎜Tout d’abord, jetez un œil à la question suivante. Pouvez-vous y répondre correctement ? 🎜rrreee🎜Dans le code ci-dessus, les val imprimés quatre fois par console.log sont : 0, 0, 2, 3. 🎜🎜Si le résultat n'est pas exactement le même que la réponse que vous avez en tête, alors voulez-vous savoir ce que fait réellement enqueueUpdate ? La figure ci-dessous est une pile d'appels setState simplifiée. Faites attention au jugement de statut principal. 🎜🎜🎜🎜< code>setStateSimplifier la pile d'appels🎜

Déchiffrer setState

🎜Comment cela conduit-il à différentes performances de setState ? 🎜

我们先要了解事务跟 setState 的不同表现有什么关系。首先，我们把4次 setState 简单归类，前两次属于一类，因为他们在同一次调用栈中执行，setTimeout 中的两次 setState 属于另一类，因为他们也是在同一次调用栈中执行。我们分析一下这两类 setState 的调用栈。

在 componentDidMount 中直接调用的两次 setState，其调用栈更加复杂；而setTimeout 中调用的两次 setState，其调用栈则简单很多。下面我们重点看看第一类 setState 的调用栈，我们发现了 batchedUpdates 方法，原来早在 setState 调用前，已经处于batchedUpdates执行的事务中了。

那batchedUpdates方法，又是谁调用的呢？我们再往前追溯一层，原来是 ReactMount.js 中的 _renderNewRootComponent方法。也就是说，整个将React组件渲染到DOM中的过程就处于一个大的事务中。

接下来的解释就顺理成章了，因为在componentDidMount中调用setState时，batchingStrategy 的 isBatchingUpdates 已经被设为true，所以两次setState的结果并没有立即生效，而是被放到了dirtyComponents中。这也解释了两次打印 this.state.val 都是 0 的原因，因为新的 state 还没有被应用到组件中。

componentDidMount中setState的调用栈

setTimeout中setState的调用栈

再反观 setTimeout 中的两次setState，因为没有前置的 batchedUpdate 调用，所以 batchingStrategy 的 isBatchingUpates 标志位是false，也就导致了新的 state 马上生效，没有走到 dirtyComponents 分支。也就是说，setTimeout 中第一次执行 setState 时，this.state.val 为 1， 而 setState 完成打印后打印时 this.state.val 变成了2。第二次的 setState 同理。

前面介绍事务时，也提到了其在 React 源码中的多处应用，像 initialize、perform、close、closeAll、motifyAll 等方法出现在调用栈中，都说明当前处于一个事务中。

既然事务这么有用，我们写应用代码时能使用它吗？很可惜，答案是不能。尽管React不建议我们直接使用事务，但在 React 15.0 之前的版本中还是为开发者提供了 batchedUpdates 方法，它可以解决针对一开始例子中setTimeout 里的两次 setState 导致两次 render 的情况:

import ReactDOM, { unstable_batchedUpates } from 'teact-dom'

unstable_batchedUpates(() => {
  this.setState(val: this.state.val + 1)
  this.setState(val: this.state.val + 1)
})

在 React 15.0 以及之后版本中，已经彻底将 batchUpdates 这个 API 移除了，因此不再建议开发者使用它。

总结

在使用React的setState的过程中，了解setState的实现原理，对setState异步更新、setState循环调用风险、setState调用栈等进行更加全面的了解，才能让我们在遇到相关问题的时候更加游刃有余。

更多编程相关知识，请访问：编程入门！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!