React setState执行流程

第二章 React setState执行流程

---

---

一、setState执行流程

文章介绍为函数式组件，类组件有所不同。

setState执行流程介绍

代码如下（示例）：

import React,{useState} from 'react'

const Test = () => {
	const [count , setCount] = useState(0);
	const clickHandler = ()=>{
      setCount(1);
    };
	return (
		<div>
			<button onClick={clickHandler}>点击</button>
		</div>
	);
}

当我们点击按钮时setCount() 会调用 dispatchSetDate()，这个函数会先判断，组件当前处于什么阶段。

• 如果是渲染阶段 --> 不会检查state值是否相同
• 如果不是渲染阶段 --> 会检查state的值是否相同
  • 如果值不相同，则对组件进行重新渲染
  • 如果值相同，则不对组件进行重新渲染
  • 如果值相同，React在一些情况下会继续执行当前组件的渲染，但是这个渲染不会触发其子组件的渲染，这次渲染不会产生实际的效果，这种情况通常发生在值第一次相同时