掌握hook原理之如何手寫useMemo

如果只是毫無思考的使用api，那么我將變成一個沒有感情的api使用機器人，對技術不會有任何提升，多思考，多總結。

UseMemo

useMemo，允許你通過記住上一個結果的方式在多次渲染的之間緩存計算結果,使得控制具體子節點何時更新變得更容易

useMemo的使用方法

 const data = useMemo(() => {}, []);

 

知道了使用方法，那么我們來分析一下useMemo執行的幾種情況：

1.首次渲染

2.非首次渲染

   a.依賴發生改變 

   b.為空數組時

   c. 依賴每發生變化

 

我們大致可以將情況分為兩種大情況

 

 let hookState = [];
    let hookIndex = 0;
    function useMemo(callBack, dependencies) {
      if (hookState[hookIndex]) {
        const [oldData, odlDependencies] = hookState[hookIndex];
        // 空數組every為true
        let same  = odlDependencies.every((item,index)=>item===odlDependencies[index])
        if(same) {
          hookIndex++
          return oldData
        }else{
           const newData = callBack()
           hookState[hookIndex++] = [newData, dependencies];
        }
        //  非首次渲染
      } else {
        // 首次渲染
        const newData = callBack();
        hookState[hookIndex++] = [newData, dependencies];
      }
   }