先看个问题，上面组件中如果点击3次组件Counter的“setCounter”按钮，控制台输入是什么？
function Counter() { const [counter, setCounter] = useState(1); console.log('Counter.render', counter); return ( <> <Display counter={counter}/> <button onClick={() => setCounter(2)}>setCounter</button> </> )}function Display({ counter }) { console.log('Display.render', counter); return <p>{counter}</p>}.
.
.
正确的答案是：
第一次点击“setCounter”按钮，
state的值变成2触发一次re-render；
即输入：Counter.render 2Display.render 2第二次点击“setCounter”按钮，尽管
state的值没有变，但也触发了一次组件Counterre-render，然而没有触发组件Displayre-render；
即输入：Counter.render 2- 第三次点击“setCounter”按钮，
state没有变，也没有触发re-render。
一、更新队列
1.1 什么是更新队列
其实每个state hook都关联一个更新队列。每次调用setState/dispatch函数时，React并不会立刻执行state的更新函数，而是把更新函数插入更新队列里，并通知React须要安顿一次re-render。
举个栗子：
function Counter() { const [counter, setCounter] = useState(0); console.log('Counter.render', counter); return ( <> <Display counter={counter}/> <button onClick={() => setCounter(counter + 1)}>Add</button> <button onClick={() => { console.log('Click event begin'); setCounter(() => { console.log('update 1'); return 1; }); setCounter(() => { console.log('update 2'); return 2; }); console.log('Click event end'); }}>setCounter</button> </> )}先点击下"Add"按钮（前面解释起因），再点击“setCounter”按钮看下输入：
Click event beginClick event endupdate 1update 2Counter.render 2Display.render 2通过例子能够看出在执行事件处理函数过程中并没有立刻执行state更新函数。这次要是为了性能优化，因为可能存在多处setState/dispatch函数调用。
1.2 多个更新队列
每个state都对应一个更新队列，一个组件里可能会波及多个更新队列。
- 各个更新队列是相互独立的；
- 各个更新队列的更新函数执行程序取决于工作队列创立先后（即调用
useState/useReducer的先后顺序）。 - 同一个更新队列里多个更新函数是顺次执行的，前一个更新函数的输入作为下一个更新函数的输出（相似管道）。
function Counter() { console.log('Counter.render begin'); const [counter, setCounter] = useState(1); const [counter2, setCounter2] = useState(1); return ( <> <p>counter1: {counter}</p> <p>counter2: {counter2}</p> <button onClick={() => { setCounter(() => { console.log('setCounter update1'); return 2; }) setCounter2(() => { console.log('setCounter2 update1'); return 2; }) setCounter(() => { console.log('setCounter update2'); return 2; }) setCounter2(() => { console.log('setCounter2 update2'); return 2; }) }}>setCounter2</button> </> )}点击"setCounter2"按钮看看输入后果。上例中setCounter对应的更新队列的更新函数永远要先于setCounter2对应的工作队列的更新函数执行。
二、懒计算
什么时候执行更新队列的更新函数呢？懒计算就是执行更新函数的策略之一。懒计算是指只有须要state时React才会去计算最新的state值，即得等到再次执行useState/useReducer时才会执行更新队列里的更新函数。
function Display({ counter }) { console.log('Display.render', counter); return <p>{counter}</p>}function Counter() { console.log('Counter.render begin'); const [counter, setCounter] = useState(0); console.log('Counter.render', counter); return ( <> <Display counter={counter}/> <button onClick={() => setCounter(counter + 1)}>Add</button> <button onClick={() => { console.log('Click event begin'); setCounter(prev => { console.log(`update 1, prev=${prev}`); return 10; }); setCounter(prev => { console.log(`update 2, prev=${prev}`); return 20; }); console.log('Click event end'); }}>setCounter</button> </> )}先点击下"Add"按钮，再点击“setCounter”按钮看下输入：
Click event beginClick event endCounter.render beginupdate 1, prev=1update 2, prev=10Counter.render 20Display.render 20通过栗子会发现：
- 先执行渲染函数，再执行更新函数；
- 第二个更新函数的实参就是第一个更新函数的返回值。
三、批处理
在懒计算中只有再次执行渲染函数时才会晓得state是否发生变化。那React什么时候再次执行组件渲染函数呢？
个别咱们都是在事件处理函数里调用setState，React在一个批处理里执行事件处理函数。事件处理函数执行结束后如果触发了re-render申请（一次或者屡次），则React就触发一次且只触发一次re-render。
3.1 个性
1. 一个批处理最多触发一次re-render, 并且一个批处理里能够蕴含多个更新队列；
function Counter() { console.log('Counter.render begin'); const [counter1, setCounter1] = useState(0); const [counter2, setCounter2] = useState(0); return ( <> <p>counter1={counter1}</p> <p>counter2={counter2}</p> <button onClick={() => { setCounter1(10); setCounter1(11); setCounter2(20); setCounter2(21); }}>setCounter</button> </> )}点击"setCounter"按钮，看下输入：
Counter.render begin2. 批处理只能解决回调函数里的同步代码，异步代码会作为新的批处理；
function Display({ counter }) { console.log('Display.render', counter); return <p>{counter}</p>}function Counter() { console.log('Counter.render begin'); const [counter, setCounter] = useState(0); return ( <> <Display counter={counter}/> <button onClick={() => { setCounter(prev => { return 10; }); setTimeout(() => { setCounter(prev => { return 20; }); }) }}>setCounter</button> </> )}点击"setCounter"按钮，看下输入：
Counter.render beginDisplay.render 10Counter.render beginDisplay.render 20触发两次批处理。
3. 异步回调函数里触发的re-render不会作为批处理
setTimeout/setInterval等异步解决函数调用并不是React触发调用的，React也就无奈对这些回调函数触发的re-render进行批处理。
function Display({ counter }) { console.log('Display.render', counter); return <p>{counter}</p>}export default function Counter() { console.log('Counter.render begin'); const [counter, setCounter] = useState(0); return ( <> <Display counter={counter}/> <button onClick={() => { setCounter(prev => { return 10; }); setCounter(prev => { return 11; }); setTimeout(() => { setCounter(prev => { return 20; }); setCounter(prev => { return 21; }); }) }}>setCounter</button> </> )}点击setCounter按钮输入：
Counter.render begin
Display.render 11
Counter.render begin
Display.render 20
Counter.render begin
Display.render 21
能够看出事件处理函数的里两次setState进行了批处理，而setTimeout回调函数里的两次setState别离触发了两次re-render。
3.2 总结
- 能够触发批处理的回调函数：
- React事件处理函数；
- React生命周期函数，如
useEffect副作用函数； - 组件渲染函数外部
在实现getDerivedStateFromProps中会遇到这种调用场景。 - 不会触发批处理的回调函数：
非React触发调用的回调函数，比方setTimeout/setInterval等异步处理函数
四、跳过更新
咱们都晓得如果state的值没有发生变化，React是不会从新渲染组件的。然而从下面得悉React只有再次执行useState时才会计算state的值啊。
为了计算最新的state须要触发re-render，而state如果不变又不渲染组件，这如同是个先有蛋还是先有鸡的问题。React是采纳2个策略跳过从新渲染：
- 懒计算
- 立刻计算
4.1 立刻计算
除了下面提到的都是懒计算，其实React还存在立刻计算。当React执行完以后渲染后，会立马执行更新队列里的更新函数计算最新的state：
- 如果
state值不变，则不会触发re-render； - 如果
state值发生变化，则转到懒计算策略。
当上一次计算的state没有发生变化或者上次是初始state（阐明React默认采纳立刻计算策略），则采纳立刻执行策略调用更新函数：
1. 以后state是初始state；
function Counter() { console.log('Counter.render begin'); const [counter, setCounter] = useState(1); return ( <> <p>counter={counter}</p> <button onClick={() => { console.log('Click event begin'); setCounter(() => { console.log('update'); return counter; }) console.log('Click event end'); }}>setCounter</button> </> )}点击“setCounter”按钮看下输入：
Click event beginupdateClick event end这样阐明了React默认采纳立刻执行策略。
2. 上一次计算state不变
function Counter() { console.log('Counter.render begin'); const [counter, setCounter] = useState(1); return ( <> <p>counter={counter}</p> <button onClick={() => { console.log('Click event begin'); // 放弃state不变 setCounter(() => { console.log('update'); return counter; }) console.log('Click event end'); }}>setCounter</button> <button onClick={() => { setCounter(2) }}>setCounter2</button> </> )}先点击两次或者更屡次"setCounter2"按钮（营造上次计算结果是state不变），再点击一次“setCounter”按钮看下输入。
4.2 懒计算
懒计算就是下面说到的那样。懒计算过程中如果发现最终计算的state没有发现变动，则React不抉择组件的子组件，即此时尽管执行了组件渲染函数，然而不会渲染组件的子组件。
function Display({ counter }) { console.log('Display.render', counter); return <p>{counter}</p>}function Counter() { console.log('Counter.render begin'); const [counter, setCounter] = useState(1); return ( <> <Display counter={counter} /> <button onClick={() => setCounter(2) }>setCounter2</button> </> )}点击两次“setCounter2”按钮，看下输入：
Counter.render beginDisplay.render 2Counter.render begin第二次点击尽管触发了父组件re-render，然而子组件Display并没有re-render。
懒计算导致的问题只是会多触发一次组件re-render，但这个别不是问题。React useState API文档也提到了：
Note that React may still need to render that specific component again before bailing out. That shouldn’t be a concern because React won’t unnecessarily go “deeper” into the tree. If you’re doing expensive calculations while rendering, you can optimize them with useMemo.
4.3 立刻计算主动转懒计算
在一个批处理中采纳立刻计算发现state发生变化，则立马转成懒计算模式，即前面的所有工作队列的所有更新函数都不执行了。
function Counter() { console.log('Counter.render begin'); const [counter, setCounter] = useState(1); return ( <> <p>counter={counter}</p> <button onClick={() => { console.log('Click event begin'); // 放弃state不变 setCounter(() => { console.log('update 1'); return counter; }) // state + 1 setCounter(() => { console.log('update 2'); return counter + 1; }) // state + 1 setCounter(() => { console.log('update 3'); return counter + 1; }) console.log('Click event end'); }}>setCounter</button> </> )}点击“setCounter”按钮，看下输入：
Click event begin // 先调用事件处理函数update 1 // 上个state是初始state，采纳立刻执行策略，所以立马执行更新函数1update 2 // 更新函数1并没有更新state，持续采纳立刻执行策略，所以立马执行更新函数2，然而state产生了变动，转懒计算策略Click event endCounter.render beginupdate 3执行完更新函数2时state产生了变动，React立马转成懒加载模式，前面的更新函数都不立刻执行了。
4.4 重新认识跳过更新
什么是跳过更新
- 不会渲染子组件；
- 不会触发组件
effect回调。 - 然而跳过更新并不示意不会从新执行渲染函数（从下面得悉）
什么状况下会跳过更新
除了下面提到的state没有发生变化时会跳过更新，还有当渲染函数里调用setState/dispatch时也会触发跳过更新。
function Display({ counter }) { console.log('Display.render', counter); return <p>{counter}</p>}export default function Counter() { const [counter, setCounter] = useState(0); console.log(`Counter.render begin counter=${counter}`); if(counter === 2) { setCounter(3) } useEffect(() => { console.log(`useEffect counter=${counter}`) }, [counter]) return ( <> <Display counter={counter}/> <button onClick={() => { setCounter(2) }}>setCounter 2</button> </> )}点击setCounter 2按钮输入：
Counter.render begin counter=2
Counter.render begin counter=3
Display.render 3
useEffect counter=3
能够看到state=2触发的更新被跳过了。
五、总结下
- 工作队列是为了懒计算更新函数；
- 批处理是为了管制并触发
re-render； - 懒计算和立刻计算是为了优化性能，既要实现
state不变时不从新渲染组件，又要实现懒计算state。
整顿自GitHub笔记：解密React state hook