请简述当调用setState时，React render 是如何工作的？

React面试题 5月前 0 93

当我们在React组件中调用setState方法时，以下是发生的事情：

更新state：React首先将传递给setState的对象（或从函数返回的对象）与当前的state进行合并。这个过程是异步的，意味着setState调用之后，state可能不会立即更新。
调用render：React然后调用组件的render方法，这个方法返回新的React元素（即组件的新“描述”）。这个步骤并不会直接修改DOM，只是计算出新的React元素。
比较新旧React元素：React比较新的和旧的React元素（这个过程被称为“diffing”）。如果新的React元素与旧的不同，React将计划更新DOM。
更新DOM：React在必要的时候更新DOM以匹配新的React元素。这个过程被称为“committing”。
调用生命周期方法：如果组件是类组件，React将调用componentDidUpdate生命周期方法。如果组件是函数组件，并且使用了useEffect Hook，那么对应的effect也会在这个时候运行。

这个过程被称为一个“更新周期”。需要注意的是，React可能会延迟setState的执行以提高性能，这意味着在setState调用之后和React元素的重新渲染之间可能有一段延迟。