recherche
Maisoninterface Webjs tutorielCompré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 !

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

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]stateReact中的重要概念。我们知道,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,并调用 receiveComponentupdateComponent 方法进行组件更新。

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

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

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 调用栈,注意其中核心的状态判断。

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

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 Mise à jour asynchrone du code> 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 &#39;teact-dom&#39;

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 sera effectivement exécuté > et fusionnera les files d'attente de mise à jour partialState et _endingStateQueue, et l'opération finale enqueueSetState exécute le state 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 composantWillUpdate, provoquant ainsi un appel en boucle, provoquant le crash du navigateur une fois la mémoire pleine. 🎜🎜Compréhension approfondie du mécanisme de mise à jour de setState dans React🎜

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. 🎜🎜Compréhension approfondie du mécanisme de mise à jour de setState dans React🎜🎜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时,batchingStrategyisBatchingUpdates 已经被设为true,所以两次setState的结果并没有立即生效,而是被放到了dirtyComponents中。这也解释了两次打印 this.state.val 都是 0 的原因,因为新的 state 还没有被应用到组件中。

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

componentDidMountsetState的调用栈

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

setTimeoutsetState的调用栈

再反观 setTimeout 中的两次setState,因为没有前置的 batchedUpdate 调用,所以 batchingStrategyisBatchingUpates 标志位是false,也就导致了新的 state 马上生效,没有走到 dirtyComponents 分支。也就是说,setTimeout 中第一次执行 setState 时,this.state.val1, 而 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 &#39;teact-dom&#39;

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

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

总结

在使用ReactsetState的过程中,了解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!

Déclaration
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Dans les coulisses: quel langage alimente JavaScript?Dans les coulisses: quel langage alimente JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript s'exécute dans les navigateurs et les environnements Node.js et s'appuie sur le moteur JavaScript pour analyser et exécuter du code. 1) Générer une arborescence de syntaxe abstraite (AST) au stade d'analyse; 2) Convertir AST en bytecode ou code machine à l'étape de compilation; 3) Exécutez le code compilé à l'étape d'exécution.

L'avenir de Python et Javascript: tendances et prédictionsL'avenir de Python et Javascript: tendances et prédictionsApr 27, 2025 am 12:21 AM

Les tendances futures de Python et JavaScript incluent: 1. Python consolidera sa position dans les domaines de l'informatique scientifique et de l'IA, 2. JavaScript favorisera le développement de la technologie Web, 3. Le développement de plate-forme multiplié deviendra un sujet brûlant, et 4. L'optimisation des performances sera le focus. Les deux continueront d'étendre les scénarios d'application dans leurs champs respectifs et de faire plus de percées dans les performances.

Python vs JavaScript: environnements et outils de développementPython vs JavaScript: environnements et outils de développementApr 26, 2025 am 12:09 AM

Les choix de Python et JavaScript dans les environnements de développement sont importants. 1) L'environnement de développement de Python comprend Pycharm, Jupyternotebook et Anaconda, qui conviennent à la science des données et au prototypage rapide. 2) L'environnement de développement de JavaScript comprend Node.js, VScode et WebPack, qui conviennent au développement frontal et back-end. Le choix des bons outils en fonction des besoins du projet peut améliorer l'efficacité du développement et le taux de réussite du projet.

JavaScript est-il écrit en C? Examiner les preuvesJavaScript est-il écrit en C? Examiner les preuvesApr 25, 2025 am 12:15 AM

Oui, le noyau du moteur de JavaScript est écrit en C. 1) Le langage C fournit des performances efficaces et un contrôle sous-jacent, qui convient au développement du moteur JavaScript. 2) Prendre le moteur V8 comme exemple, son noyau est écrit en C, combinant l'efficacité et les caractéristiques orientées objet de C. 3) Le principe de travail du moteur JavaScript comprend l'analyse, la compilation et l'exécution, et le langage C joue un rôle clé dans ces processus.

Rôle de JavaScript: rendre le Web interactif et dynamiqueRôle de JavaScript: rendre le Web interactif et dynamiqueApr 24, 2025 am 12:12 AM

JavaScript est au cœur des sites Web modernes car il améliore l'interactivité et la dynamicité des pages Web. 1) Il permet de modifier le contenu sans rafraîchir la page, 2) manipuler les pages Web via Domapi, 3) prendre en charge les effets interactifs complexes tels que l'animation et le glisser-déposer, 4) Optimiser les performances et les meilleures pratiques pour améliorer l'expérience utilisateur.

C et JavaScript: la connexion expliquéeC et JavaScript: la connexion expliquéeApr 23, 2025 am 12:07 AM

C et JavaScript réalisent l'interopérabilité via WebAssembly. 1) Le code C est compilé dans le module WebAssembly et introduit dans un environnement JavaScript pour améliorer la puissance de calcul. 2) Dans le développement de jeux, C gère les moteurs de physique et le rendu graphique, et JavaScript est responsable de la logique du jeu et de l'interface utilisateur.

Des sites Web aux applications: les diverses applications de JavaScriptDes sites Web aux applications: les diverses applications de JavaScriptApr 22, 2025 am 12:02 AM

JavaScript est largement utilisé dans les sites Web, les applications mobiles, les applications de bureau et la programmation côté serveur. 1) Dans le développement de sites Web, JavaScript exploite DOM avec HTML et CSS pour réaliser des effets dynamiques et prend en charge des cadres tels que JQuery et React. 2) Grâce à la réactnative et ionique, JavaScript est utilisé pour développer des applications mobiles multiplateformes. 3) Le cadre électronique permet à JavaScript de créer des applications de bureau. 4) Node.js permet à JavaScript d'exécuter le côté du serveur et prend en charge les demandes simultanées élevées.

Python vs JavaScript: cas d'utilisation et applications comparéesPython vs JavaScript: cas d'utilisation et applications comparéesApr 21, 2025 am 12:01 AM

Python est plus adapté à la science et à l'automatisation des données, tandis que JavaScript est plus adapté au développement frontal et complet. 1. Python fonctionne bien dans la science des données et l'apprentissage automatique, en utilisant des bibliothèques telles que Numpy et Pandas pour le traitement et la modélisation des données. 2. Python est concis et efficace dans l'automatisation et les scripts. 3. JavaScript est indispensable dans le développement frontal et est utilisé pour créer des pages Web dynamiques et des applications à une seule page. 4. JavaScript joue un rôle dans le développement back-end via Node.js et prend en charge le développement complet de la pile.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Adaptateur de serveur SAP NetWeaver pour Eclipse

Adaptateur de serveur SAP NetWeaver pour Eclipse

Intégrez Eclipse au serveur d'applications SAP NetWeaver.

SublimeText3 version anglaise

SublimeText3 version anglaise

Recommandé : version Win, prend en charge les invites de code !

MantisBT

MantisBT

Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) est une application Web PHP/MySQL très vulnérable. Ses principaux objectifs sont d'aider les professionnels de la sécurité à tester leurs compétences et leurs outils dans un environnement juridique, d'aider les développeurs Web à mieux comprendre le processus de sécurisation des applications Web et d'aider les enseignants/étudiants à enseigner/apprendre dans un environnement de classe. Application Web sécurité. L'objectif de DVWA est de mettre en pratique certaines des vulnérabilités Web les plus courantes via une interface simple et directe, avec différents degrés de difficulté. Veuillez noter que ce logiciel

Listes Sec

Listes Sec

SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.