react-hooks进阶（相关源码学习）

react-hooks进阶（相关源码学习）

useState变更数据render渲染解析

schedule：调度器—》scheduler 内有优先级队列。高优任务优先进入下一步处理（reconciler）（schedule是在react16之后新增的）
render：协调器 ==》reconciler 存在虚拟dom fiber就是虚拟Dom，负责找出变化的组件，当前和上一步工作都在内存中进行。只有当所有组件都完成Reconciler的工作，才会统一交给Renderer。
commit：渲染器 ==》renderer 负责将变化的组件渲染到页面上
在使用useState或多个useState 变更数据后，会有两步（react16之前的）后才完成页面dom元素渲染变动，首先phase1，render阶段，使用useState变数据后，他会将变更的数据缓存到fiberNode中的memoriseState中，这是队列链表的（内有next），一个嵌一个缓存，然后完成这一步后，在再进行第二步phase2：commit阶段，它会调用fiberNode中的upDateQueue更新序列方法，更新数据的的队列从而实现了页面数据更新

useEffect

在源码中useEffect在整个页面初始化到渲染完成到后续的更新，总共是分为两种useEffect：mountEffect和updateEffect

• mountEffect：挂载阶段（初始化初次渲染）

function mountEffect(
  create: () => (() => void) | void,
  deps: Array<mixed> | void | null,
): void {
  if (
    __DEV__ &&
    enableStrictEffects &&
    (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
  ) {
    return mountEffectImpl(
      // | 位运算符，标识 fiber 节点的副作用异步执行的
      MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect,
      HookPassive,  // 标识 hook 为 useEffect
      create, // useEffect 第的第一个参数 callback
      deps,   // useEffect 的第二个可选参数 依赖项 []
    );
  } else {
    return mountEffectImpl(
      // | 位运算符，标识 fiber 节点的副作用
      PassiveEffect | PassiveStaticEffect,
      HookPassive,  // 标识 hook 为 useEffect 
      create, // useEffect 第的第一个参数 callback
      deps,   // useEffect 的第二个可选参数 依赖项 []
    );
  }
}

• updateEffect：更新阶段
  updateEffect 接受 useEffect 传入的 回调函数(create) 和 依赖项{deps) 两个参数，并返回了 updateEffectImpl 的执行结果。updateEffectImpl 通过比较前后的 deps (useEffect 的第二个参数) ，判断是否需要重新执行 useEffect 的 callback 参数

function updateEffect(
  create: () => (() => void) | void,
  deps: Array<mixed> | void | null,
): void {
  
  // 删除了 dev 代码
   
  // PassiveEffect: 二进制值，标识 fiber 节点的副作用是异步执行的(即使用的是useEffect，useEffect 是异步的)
  // HookPassive: 表示 hook 为 useEffect  
  // create: useEffect 第的第一个参数 callback
  // deps: useEffect 的第二个可选参数 依赖项 []
  // 比较前后的 deps ，判断是否需要重新执行useEffect的第一个参数 callback
  return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
}

uesEffect基本集合三种生命周期：componentDidMount（完成挂载阶段）、componentDidUpdate（完成更新阶段）、componentWillUnmount（卸载阶段）

useEffect(() => {
  // componentDidMount + componentDidUpdate
  console.log('这里基本等价于 componentDidMount + componentDidUpdate');
  return () => {
    // componentWillUnmount
    console.log('这里基本等价于 componentWillUnmount');
  }
}, [deps])

useEffect 接收的返回值是一个回调函数，这个回调函数不只是会在组件销毁时执行，而且是每次 该Effect 重新执行之前都会执行，用于清理上一次 Effect 的执行结果。

useMemo 与 useCallBack

useMemo ：缓存变量
useCallBack：缓存函数

useMemo 与useCallBack区别是：
useMemo 先执行穿过来的函数后，缓存其执行后的结果，useCallBack，不会执行传过来的函数，

以下是hook内的源码：
mountWorkInProgessHook与updateWorkInProgressHook是获取当前内的hook值（state值）
areHookInputsEqual函数是浅比较当前值和上一次传入值的变化（Object.is(）方法浅比较）

React性能优化

一、React性能分析器

react16.5 增加了对新的开发工具DEvTool性能分析的插件，此插件使用React试验性的Profiler API来收集有关每个组件的用时信息以便识别React应用程序中的性能瓶颈 react-detools

二、更新阶段的优化

1、根本原则是：将变的部分和不变的 部分的分离
变的：props、state、context
2、具体描述
当父组件满足性能优化条件，子组件可能命中性能优化，在实际父组件向子孙组件传值后，子孙组件的props的比较是全等比较，这种比较很容易导致newProps与oldProps比较值为false，从而使得无法实现性能优化，子孙组件重新渲染。因此该如何比较props呢（全等比较-----高效，但不易命中；浅比较----不高效，但易命中），从而react就提供了优化API；memo、useMemo、useCallBack
3、如何使用优化API
memo这个API 可以将父组件传给子孙组件的新老值进行浅比较（就是比较props内key与value变化，），使得子孙组件更容易命中性能优化，useMemo或useCallBack起作用的前提是这个子孙组件进行浅比较（useMemo作用就是缓存一个变量传给子孙组件使用，而只用浅比较来实现值的变化比较）， 一般配合memo使用，也是为了配合将不变量保存，达到浅比较效果；
4、总结
总结下来，有以下几点：

• 寻找项目中的性能损耗严重的子树
• 在子树的根节点使用性能优化API
• 子树中运用变与不变分离原则

三、编译阶段的优化

1、开发环境是重复构建更快

• include：编译包括设置路径下的文件，exclude：排除不需要编辑的文件
  

• resolve
  
  

• alias 别名 （如上）

• external 外部模块，在使用外部模块，可配置下列方式，在使用该模块是不会打包该模块，通过配置entry外部链接进入的，在导入使用改模块后，可直接使用设定的全局变量来使用

• 

import 'lodash'

• 编译缓存：webpack5提供的cache，缓存打包不变的内容

• 

• 开启多进程

2、生产环境是文件更小，加载更快

• 开启tree-sharking

• scope-hosting

• splitChunks: 代码分割打包

• 

• 提供node的空mocks

• 持久化缓存
  

四、路由阶段优化

在加载路由，导入页面模块是，可以进行路由懒加载，来实现页面加载慢、打包慢 等优化
具体实现方案是：使用react提供的Lazy与Suspense配合使用实现
在导入页面模块参数是，前面可配置注释webpackPrefetch，实现在加某个页面后，在空余时间时可默默加载另外配置这个参数的页面，从而在跳转加载另外页面时，更加顺畅，具体代码如下

• 在配置webpackPrefetch为true后，head标签内会自动加入link标签，如下
  

五、大数据渲染优化

1、进行时间（数据）切片，可使用相关的API： requestAnimationFrame 、requestIdLeCallback

• requestAnimationFrame ：每次浏览器渲染前执行
• requestIdLeCallback：在浏览器空闲的时候执行，比requestAnimationFrame 性能更佳
  在对5000条数据进行渲染时，一直行赋值渲染，大概率是浏览器卡顿，甚至崩溃，可以进行以时间切片（数据切片）的方式进行选，从而使得浏览器不会崩溃
  （加载地图等数据可能需要用到）

 const [listTest, setListTest] = useState([]);
  useEffect(() => {
    // console.log('list--val', new Array(3000).fill(new Date()));
    // setListTest([...new Array(3000).fill(new Date())]);
    timeSlice(5000); //渲染数据数据量
  }, []);
  const timeSlice = (times) => {
    requestIdleCallback(() => {
      let minus = times > 100 ? 100 : times;
      setListTest((val) => {
        return [...val, ...new Array(minus).fill(122)];
      });
      if (times !== 0) {
        console.log('times-->', times);
        times -= minus;
        timeSlice(times);
      }
    });
  };
  return (
      <div>
        {listTest.map((item, i) => (
          <div>
            {item}---{i}
          </div>
        ))}
      </div>
  );

使用requestAnimationFrame 的用法和requestIdLeCallback用法一样，替换即可
2、虚拟列表 – react-tiny-virtual-list
在渲染大批数据列表时可以使用改插件，实现原理是将在可视区域内渲染元素，在非可视区域内不渲染，但实际的占位高度存在。
具体实现可以见：https://blog.csdn.net/weixin_45315794/article/details/127801745?spm=1001.2014.3001.5502

六、其他性能优化

• 通过DOM-DIFF原理进行性能优化
• Error Boundaries
• 骨架屏
• 预渲染
• 图片懒加载

如何将两种数据进行深比较，并且性能很高

应用场景：在使用useEffect，如何监听多层次结构数据内部某个数据变动而引发其他一系列其他操作？？？

immutableJS：提供Map和is等api，可进行对多层次数据比较、获取等方案，具体使用可看：https://www.w3cschool.cn/doc_immutable/