1.珠峰React 第五节 （setState进阶和React Hooks、useState）
2.react的setState使用详解
3.React 的 setState 是同步还是异步？
4.理解 React 的 setState
5.React系列八 - 深入理解setState
6.面试官：“年轻人，我看你很懂setState原理，你来说说是同步还是异步的？”

珠峰React 第五节 （setState进阶和React Hooks、useState）

       探究React的状态管理与Hooks

       React 中，setState操作变为异步执行，关注公众号源码登录源码目标是批处理状态更新，减少更新次数，提升性能，清晰代码逻辑。此批处理机制与React合成事件、周期函数、定时器相关联。在React 前，仅在合成事件和周期函数期间进行批处理，不会对Promise、setTimeout、原生事件进行批处理。

       Vue 2.0中，视图更新也采用队列机制。数据变化时，Vue开启队列缓冲，避免重复计算和DOM操作。队列中的工作在下一个事件循环“tick”中执行，以确保DOM更新。

       希望视图更新两次时，需要借助setState函数的第一个参数为函数的方法。函数组件与类组件在状态管理上有不同，而React Hooks为函数组件提供了动态化状态管理的能力。

       Hooks是React .8新增特性，允许在不使用class的情况下引入状态等React特性。useState API提供状态初始化、读取和更新功能，帮助函数组件管理状态。

       在函数组件中使用useState时，每次修改状态值，会比较新值与旧值（基于Object.is），若相同则不执行更新，避免无意义的红线变短指标源码DOM操作。函数组件的每次渲染都会产生新上下文，导致代码重复执行。

       在实际开发中，大量赋值、判断和逻辑代码可能导致组件难以维护。React推崇函数化操作，通过自定义Hooks简化代码。useState的实现简化为初始化值、读取状态和更新状态的封装。

       为解决函数组件重复渲染的问题，可以将useState参数设置为函数，确保初始状态设置仅在首次渲染时执行。此优化避免了重复创建初始状态，并减少了不必要的计算。

       使用useState返回数组而非对象是为了便于自定义状态名称。数组通过下标访问，而对象需要键名匹配，增加了处理复杂度。优化后的useState实现了多次调用状态管理，提升函数组件的性能与可维护性。

react的setState使用详解

        react修改状态是不能直接修改的，需要使用setState来进行状态的修改，但是setState的使用会存在一些问题。觉得有必要在此做一下总结。。。。

        就像这样：

        类似于：

        解决这个问题的方式：

        setState的执行流程：

        在 React 的 setState 函数实现中，会根据一个变量 isBatchingUpdates 判断是直接更新 this.state 还是放到队列中回头再说，

        而 isBatchingUpdates 默认是 false，也就表示 setState 会同步更新 this.state，

        但是，有一个函数 batchedUpdates，这个函数会把 isBatchingUpdates 修改为 true，

        而当 React 在调用事件处理函数之前就会调用这个 batchedUpdates，造成的后果，就是由 React 控制的事件处理过程 setState 不会同步更新 this.state。

        React是根据isBatchingUpdates来合并更新的， 那么当调用setState的方法或者函数不是由React控制的话， setState自然就是同步更新了。

React 的 setState 是同步还是异步？

       setState 是同步还是异步？

       代码示例表明，setState 呈现异步特性。在 setTimeout 内修改两次 state 后打印，结果为两次 0，说明 state 立即修改，之后每次渲染，结果为 0、1、2，证实了 setState 的同步性。

       疑惑继续，代码进一步验证，setState 的行为不一致，打印结果为三次 0，仅触发一次渲染，说明 setState 确实为异步。

       类组件和函数组件的 setState 都遵循异步模式，修改 state 时，安装网页源码乱码渲染仅触发一次，说明状态更新与渲染之间存在延迟。

       深入源码探索，React 渲染流程揭示了关键。vdom 转换为 fiber 的过程是可打断的，而 fiber 更新 DOM 的 commit 阶段是同步的。这解释了 setState 的异步行为。

       setState 的执行依赖于执行环境的 context，批量更新会立即触发渲染，而非批量则延迟至下次更新。

       setTimeout 内的 setState 会触发即时渲染，这与批量更新的 context 无关。通过设置 batchUpdates API 可实现批量执行，但这需要额外操作。

       React 引入了 createRoot API，使得所有 setState 操作默认为异步批量执行，解决了这个问题。

       综上所述，setState 的同步异步特性取决于其执行环境和 React 版本。在 React 中，所有操作默认为异步批量执行，将消除同步异步的讨论。

理解 React 的 setState

       React组件中状态的管理和更新是核心机制，确保组件UI根据状态变化而动态更新。理解何时以及如何改变状态对于熟练掌握React至关重要。

       React组件状态的唯一更新方式是通过`setState()`方法。在搜索框组件中，初始化状态时将输入框值设为空字符串。当状态需要更新时，调用`setState()`并传递更新对象，React将此对象与当前状态合并，仅更新影响的UI部分，避免全页面重渲染。

       React内部实现称为协调器，负责管理状态更新，不改变DOM结构，只更新实际受影响的部分。直接修改状态会导致组件不重新渲染，合成神龙2源码违背React的设计理念。

       给`setState()`传递函数形式参数，可确保使用最新状态值执行操作，避免覆盖多次调用导致的单一更新。通过函数参数，可在更新状态后立即执行依赖新状态的逻辑。

       尽管`setState()`默认为异步执行，但在某些特定上下文，如计时器内部，其行为可变为同步。这取决于具体调用情境，理解状态更新的同步与异步特性对于编写高效React应用至关重要。

       最佳实践包括使用函数形式传递给`setState()`的参数，以确保正确利用状态更新。同时，合理利用`setState()`回调函数，在组件渲染完成后再执行依赖新状态的操作。更多关于React和前端面试的深入探讨，可参阅开源项目 tkiddo/front-end-interview。

React系列八 - 深入理解setState

       setState是React中使用频率最高的API，它的灵活多样的用法以及在面试题中的常见地位，让开发者对其有深入理解的需求。本文将对setState进行详尽解析，以帮助大家真正理解其工作原理。

       一. setState的使用

       1.1. 为什么使用setState

       在处理界面显示内容的改变时，我们需要通过setState来更新状态，而不是直接修改state，因为React的设计理念是避免直接操作state。案例中，改变文本显示的实现需要借助setState来完成。

       1.2. setState异步更新

       setState设计为异步更新，以优化性能。这有助于避免在事件处理中直接更新UI，以防止重绘和重排操作频繁发生。获取更新后的值可通过在生命周期函数中实现。

       1.3. setState一定是异步？

       疑惑是否setState总是异步更新？验证通过setTimeout和原生DOM事件，发现实际情况取决于enqueueSetState函数的实现。通常，破解别人软件源码setState是异步的。

       1.4. setState的合并

       1.4.1. 数据的合并

       当更新数据时，setState会将新值与原有值进行合并，避免不必要的重渲染。

       1.4.2. 多个setState合并

       在多个setState调用时，React会合并这些更新，确保最终状态的正确性。

       二. setState性能优化

       2.1. React更新机制

       了解React渲染和更新流程是关键，从JSX到虚拟DOM再到真实DOM，React通过检测变化来优化UI更新。

       2.2. Diffing算法

       2.2.1. 对比不同类型的元素

       对比不同类型元素时，React会拆卸旧树并建立新树，以高效更新。

       2.2.2. 对比同一类型的元素

       对于同类型元素，React仅比对和更新有变化的属性。

       2.2.3. 对子节点进行递归

       递归遍历子节点时，React比较两个列表，以高效检测差异。

       2.3. keys的优化

       使用key属性有助于React高效匹配元素，避免警告，确保性能。

       2.4. SCU的优化

       2.4.1. render函数被调用

       通过理解render函数的触发机制，可以优化性能。

       2.4.2. shouldComponentUpdate

       shouldComponentUpdate方法允许我们控制组件是否需要重新渲染，实现性能优化。

       2.4.3. PureComponent和memo

       PureComponent和memo等工具自动帮助实现性能优化，减少不必要的渲染。

       2.4.4. 不可变数据的力量

       通过不可变数据，我们可以合理使用PureComponent和memo，确保代码安全和高效。

       总结：深入理解setState和性能优化策略，将有助于开发者构建高效、稳定的React应用。

面试官：“年轻人，我看你很懂setState原理，你来说说是同步还是异步的？”

       在React编程中，了解setState的原理对开发者来说至关重要。本文将逐步深入剖析setState的运作机制，包括其默认行为、同步与异步的特性，以及如何实现强制批量更新，帮助你全方位掌握这一核心功能。

       setState默认行为

       在使用React时，setState是调整组件状态的常见方式。其实现逻辑相对直接：当调用setState方法时，React会将状态保存起来，并在适当的时候执行状态合并和DOM更新。对于对象形式的状态，后继的状态会覆盖前一个状态，类似于Object.assign()的合并操作。在函数形式的状态中，状态会按照先后顺序累积，最终执行一次性DOM更新。

       同步与异步

       面试官经常提出“setState是同步还是异步？”这一问题，这实际上是在考验开发者对React内部机制的理解。从API层面来看，setState是一个同步调用，但在更新DOM时，它可能以异步方式执行。这是因为React采用了批量更新机制，以优化性能并减少DOM渲染次数。这种机制在不同的上下文（如合成事件处理、生命周期方法中）表现有所不同。

       批量更新机制

       React通过在特定条件下开启批量更新模式来实现性能优化。当调用setState时，它会将状态更新任务放入队列中。在DOM更新时机到来时，React会一次性处理队列中的所有状态更新任务，进行合并，并执行一次DOM更新操作，以避免频繁的渲染导致的性能损耗。

       强制批量更新

       虽然React默认采用批量更新机制，但有时需要在特定上下文下强制执行批量更新。可以通过调用`react-dom`库中的`unstable_batchedUpdates`方法来实现。通过将包含状态更新逻辑的代码包裹在`unstable_batchedUpdates`的回调函数中，可以确保状态更新在队列中按顺序执行，并在最终执行一次DOM更新。

       总结

       理解并掌握setState的运作机制，对于提高React应用程序的性能和响应速度至关重要。通过了解默认行为、同步与异步的区别以及如何实现强制批量更新，开发者可以更好地优化代码，提升用户体验。掌握这些知识，将使你在React开发领域更加游刃有余。

面试官:react中的setState是同步的还是异步的

       在面试过程中，经常会遇到关于React中setState操作同步或异步的问题。下面通过几个例子来解答这个问题：

       例子1：点击按钮触发更新，在handle函数中调用两次setState。

       例子2：在setTimeout回调中执行例子1的两次setState操作。

       例子3：使用unstable_batchedUpdates在setTimeout回调中执行，unstable_batchedUpdates的回调函数中调用两次setState。

       例子4：两次setState在setTimeout回调中执行，但使用concurrent模式启动，即通过调用ReactDOM.unstable_createRoot启动应用。

       简单来说，在同一个上下文中触发多次更新，这些更新会被合并为一次更新，例如在之前的React版本中，如果脱离当前的上下文，则不会被合并。原因是，处于同一个上下文中的多次setState操作的executionContext都会包含BatchedContext，包含BatchedContext的setState操作会合并。当executionContext等于NoContext时，就会同步执行SyncCallbackQueue中的任务，因此setTimeout中的多次setState操作不会合并，且会同步执行。

       在Concurrent mode下，上面的例子也会合并为一次更新，原因在于简化源码中，多次setState操作会比较这些操作的优先级，如果优先级一致，则会先返回，不会进行后面的渲染阶段。

       总结：

       在legacy模式下：命中batchedUpdates时是异步，未命中batchedUpdates时是同步的。

       在concurrent模式下：都是异步的。

       如需高效学习，可观看视频讲解，了解往期React源码解析文章，涵盖React设计、源码架构、核心API、legacy与concurrent模式、Fiber架构、渲染阶段、diff算法、commit阶段、生命周期、状态更新流程、hooks源码、手写hooks、scheduler与Lane、concurrent模式、context、事件系统、手写迷你版React等详细内容。

setState是同步更新还是异步更新？

       在React.8之前的版本中，我们更新数据需要用到setState，那么你知道setState是同步还是异步的呢？它内部是如何实现的，你了解吗？今天我们就一起来学习一下关于setState的那些事吧！

setState

       自从React.8添加了Hook后，我们编写React组件基本都是函数组件，很少用到class组件了。我们都知道在函数组件中通过useState这个Hook来修改组件的状态，而在.8之前的版本中，我们都是通过setState来修改组件的状态，因此我们还是很有必要了解一下关于setState相关的知识点。

       在面试或者工作中，我们经常会遇到关于组件状态更新的问题，就拿setState来说，在组件更新的时候，setState是同步更新还是异步更新的？当我们更新一个组件的状态后，我们如何才能立即获取到刚才更新的状态？这些就是我们需要学习和了解的地方。要了解setState是同步还是异步，就先需要了解一下React中的合成事件了。

       如果了解过React事件相关方面的童鞋，那么就会知道React的事件都是合成事件，而不是js的原生事件。那什么是合成事件呢？简单来说就是React通过给document上挂载一个事件监听函数，通过事件冒泡的方式来完成事件的执行，当DOM元素触发后会冒泡到document，而React就会找到对应的组件生成一个合成事件出来，并按组件树模拟一遍事件冒泡，这就是React中的合成事件。

       当然，上述的方法在React之后的版本中进行了修改。React中将事件挂载在了DOM的容器中，也就是挂载在ReactDOM执行的节点上，这样修改的好处是哪怕一个项目中有多个版本的React存在，组件的事件也不会乱套。那么哪些事件会被捕获生成合成事件呢？在React源码的事件快照中所包含的事件才会被捕获到，例如：click、blur、focus等等。

       了解完合成事件，我们该继续学习setState是同步还是异步的。一般来说setState是异步的，例如下面这个例子：

clsssTestextendsComponent{ state={ count:0};componentDidMount(){ this.setState({ count:1},()=>{ console.log(this.state.count);//1});console.log(this.state.count);//0}render(){ return(...)}}

       当我们在componentDidMount生命周期中通过setState修改组件的状态后，我们只有在setState的第二个参数中才能立即获取到当前修改的值，而在外部获取到的值还是未改变之前的值，由此可以证明setState是异步的。我们是否会觉得React中的setState执行像是一个队列，因为React会根据队列逐一执行，并且合并setState的操作，当state数据完成后执行回调，然后根据结果来更新虚拟DOM触发渲染。那么为什么React官方团队要按这样的执行思路来实现呢？为什么不能用同步执行的思路来实现呢？

       在React出来后，官方给出的解释的是：为了保持内部的一致性，如果setState是同步的，但是props却不是，就会导致数据的错乱；第二点就是为了后续的升级启用并发更新。那么什么情况下setState是同步的呢？

       如果我们将setState放在setTimeout或者setInterval中，那么它们的执行就会跟上面将的完全不同了，大致的代码如下：

clsssTestextendsComponent{ state={ count:0};componentDidMount(){ this.setState({ count:this.state.count+1});console.log(this.state.count);//0setTimeout(()=>{ this.setState({ count:this.state.count+1});console.log('setTimeout',this.state.count);//1},0);}render(){ return(...)}}

       当setState执行时，会将状态存入padding队列中，然后React会判断当前是否处于batchupdate阶段，如果是，则会将组件存入dirtyComponents中；反之则会遍历所有的dirtyComponents，并调用updateComponent用于更新pending、state或者props。

       在React的生命周期事件和合成事件中可以获取到isBatchingUpdates的控制权，用于将状态放入队列中，并控制执行的节奏。而在setTimeout、addEventListener这些原生事件中，无法获取到isBatchingUpdates的控制权，就会导致isBatchingUpdates只会为false，且会一直执行，因此setState就会同步执行并修改组件的状态。

最后

       setState其实并不是真的异步，只是看起来像是异步执行的，它是通过isBatchingUpdates来判断当前执行是同步还是异步的，如果isBatchingUpdates为true，则按异步执行，反之就是同步执行。要改变isBatchingUpdates，只需要打破React的合成事件，在js的原生事件中执行setState即可，所以你知道setState是同步还是异步的吗？