掌握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];
      }
   }