web前端：React常用hook的优化useEffect浅比较

作者:GPERXP更新于： 2020-04-07 22:09:49

　　React起源于Facebook的内部项目，因为该公司对市场上所有Javascript MVC框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

　　先说说react原版的useEffect使用起来不便的地方

　　useEffect(

　　function(){

　　//effect操作

　　},

　　['a','b',{name:'c'}]

　　);

　　这里的effect每次更新都会执行，因为第三个参数一直是不等的，{name:'c'}!=={name:'c'}

　　第二是在dePS依赖很多的时候是真的麻烦

　　下面贴出改进版useEffect

　　import{useRef,useEffect}from'react';

　　import_from'lodash';

　　exportfunctionuseDeepCompareEffect(fn,deps:T){

　　//使用一个数字信号控制是否渲染，简化react的计算，也便于调试

　　letrenderRef=useRef(0);

　　letdepsRef=useRef(deps);

　　if(!_.isEqual(deps,depsRef.current)){

　　renderRef.current++;

　　}

　　depsRef.current=deps;

　　returnuseEffect(fn,[renderRef.current]);

　　}

　　在使用的时候什么都不用做，只需要把参数传进来就行。

　　避免了之前的浅比较的缺陷，性能上有降低

　　deps稍微控制一下量，此处的性能不是大问题

　　写起来爽就完事了，要啥自行车。

　　useDeepCompareEffect(function(){

　　//effect操作

　　},'a');

　　useDeepCompareEffect(

　　function(){

　　//effect操作

　　},

　　{name:'c'}

　　);

　　useDeepCompareEffect(function(){

　　//effect操作

　　},4567);

　　由于React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来Web开发的主流工具。