关于javascript:深入了解-React-state-hook

53次阅读

共计 6496 个字符，预计需要花费 17 分钟才能阅读完成。

先看个问题，上面组件中如果点击 3 次组件 Counter 的“setCounter”按钮，控制台输入是什么？

function Display({counter}) {console.log('Display.render', counter);
    return <p>{counter}</p>
}

function Counter() {const [counter, setCounter] = useState(1);
    console.log('Counter.render', counter);
    return (
           <>
               <Display counter={counter}/>
               <button onClick={() => setCounter(2)}>setCounter</button>
           </>
   )
}

正确的答案：

  1. 第一次点击“setCounter”按钮，state变成 2，触发一次 re-render。输入：

    Counter.render 2
Display.render 2

  2. 第二次点击“setCounter”按钮，尽管 state 没有变，然而又触发了一次组件Counter re-render，然而没有触发组件Display re-render，输入：

    Counter.render 2
Display.render 2
Counter.render 2
  3. 第三次点击“setCounter”按钮，state没有变，也没有触发 re-render。

如果答对了，能够间接先点赞并返回上一页了。如果没有答对，那得花点工夫读读剩下的内容了

一、更新队列

其实每个 state hook 都关联一个更新队列。每次调用 setState 函数时，React 并不会立刻执行更新函数，而是把更新函数插入更新队列里，并通知 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 begin
Click event end
update 1
update 2
Counter.render 2
Display.render 2

执行事件处理函数过程中并没有执行更新函数。次要还是为了性能优化吧，因为可能存在多处 setState 函数调用。

1.2 多个工作队列

每个 state hook 对应一个工作队列，一个组件里可能会波及多个工作队列。

  1. 每个工作队列是相互独立的；
  2. 每个工作队列的更新函数执行程序取决于工作队列创立先后，即调用 useState 的先后顺序。
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>
           </>
   )
}

setCounter对应的工作队列的更新函数永远要先于 setCounter2 对应的工作队列的更新函数执行。

二、懒计算

只有须要 state 时 React 才会去计算最新的 state 值，即得等到再次执行 useState 时才会执行更新队列里的更新函数。并且同一个更新队列里多个更新函数是顺次执行的，前一个更新函数的输入，作为下一个更新函数的输出。

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 begin
Click event end
Counter.render begin
update 1, prev=1
update 2, prev=10
Counter.render 20
Display.render 20

会发现此时先执行的渲染函数，再执行更新函数。第二个更新函数的实参就是第一个更新函数的返回值。

三、批处理

只有再次执行 useState 时 React 才会执行更新函数，也就是说只有再次执行渲染函数时才会晓得 state 是否发生变化。那 React 什么时候再次执行渲染函数呢？
个别咱们都是在事件处理函数里（用户交互，网络）调用 setState，React 是在一个批处理里执行回调函数。回调函数执行结束后如果触发了re-render 申请，则 React 就触发一次re-render。

  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 begin

  2. 批处理只能解决回调函数里的同步代码，异步代码会作为新的批处理；

    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 begin
Display.render 10
Counter.render begin
Display.render 20

    触发两次批处理。

四、跳过渲染

咱们都晓得如果 state 的值没有发生变化，React 是不会从新渲染组件的。然而从下面得悉 React 只有再次执行 useState 时才会计算 state 的值啊。
为了计算最新的 state 须要触发 re-render，而 state 如果不变又不渲染组件，这如同是个先有蛋还是先有鸡的问题。React 是采纳 2 个策略跳过从新渲染。

4.1 立刻计算

下面提到的都是懒计算，其实 React 还存在立刻计算。React 立刻更新函数：

  • 如果 state 值不变，则不会触发re-render；
  • 如果 state 值发生变化，则转到懒加载策略。

当上一次计算的 state 没有发生变化或者上次是初始state，则采纳立刻执行策略调用更新函数

  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 begin
update
Click 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 begin
Display.render 2
Counter.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，采纳立刻执行策略，所以立马执行更新函数 1
update 2 // 更新函数 1 并没有更新 state，持续采纳立刻执行策略，所以立马执行更新函数 2，然而 state 产生了变动，转懒计算策略
Click event end
Counter.render begin
update 3

执行完 更新函数 2 时 state 产生了变动，React 立马转成懒加载模式，前面的更新函数都不立刻执行了。

参考

整顿自 gitHub 笔记：

  1. 解密 React state hook
  2. State Hook

正文完
javascript
发表至： javascript
2020-11-26
 0
关于javascript:利用Express框架建立博客
JavaScript中的浅拷贝与深拷贝
关于javascript:数组扁平化专栏
关于javascript:Nodejs-Web开发第二章设置Nodejs1