zoukankan      html  css  js  c++  java
  • 掌握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];
          }
       }

  • 相关阅读:
    Alignment
    Matrix 二维树状数组的第二类应用
    网络请求中的URL中传bool型数据
    把推送证书给服务器
    完全取代VC上原有的view
    图层CALayer的使用
    数组使用的注意事项
    使用CocoaPods
    声明遵循协议
    神奇的navigationBar.translucent
  • 原文地址:https://www.cnblogs.com/Ewarm/p/13915809.html
Copyright © 2011-2022 走看看