【React避坑指南】useEffect依赖引用类型

【React避坑指南】useEffect依赖引用类型

前言

如果你是一个入行不久的前端开发,面试中多半会遇到一个问题:

你认为使用React要注意些什么?

这个问题意在考察你对React的使用深度,因为沉浸式地写过一个项目就会发现,不同于一些替你做决定的框架,“潜规则”丰富的React远比看上去要难相处。

React中主要有两类坑点,一种是让你措手不及,结果对不上预期,严重影响开发进度,另一种更为头痛,表面风平浪静,水下暗流涌动。

官方文档的触角只伸到Demo级别,并不涉及花样百出的最差实践,所以下一批开发者又会掉入相同的陷阱。隐藏的坑点需要开发者亲自下地扫雷,经验主义发挥了重要作用,尤其是在Hooks使用中。

为了避免更多的心智负担,这个系列的文章会介绍一些React使用的常见陷阱,带你追溯原因和探索解决方案,帮助新手迅速跳过坑点。

异常现象

const Issue = function ({
  const [count, setCount] = useState(0);
  const [person, setPerson] = useState({ name'Alice'age15 });
  const [array, setArray] = useState([123]);

  useEffect(() => {
    console.log('Component re-rendered by count');
  }, [count]);

  useEffect(() => {
    console.log('Component re-rendered by person');
  }, [person]);

  useEffect(() => {
    console.log('Component re-rendered by array');
  }, [array]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(1)}>Update Count</button>
      <button onClick={() => setPerson({ name: 'Bob', age: 30 })}>Update Person</button>
      <button onClick={() => setArray([1, 2, 3, 4])}>Update Array</button>
    </div>

  );
};

在这个案例中,初始化了三个状态,和对应的三个副作用函数useEffect,理想状态是状态的值更新时才触发useEffect。

多次点击Update Count更新State,因为更新后的值还是1,所以第一个useEffect执行第一次后不会重复执行,这符合预期。但是重复点击Update Person和Update Array时,却不是这样,尽管值相同,但useEffect每一次都会触发。当useEffect中的副作用计算量较大时,必然会引起性能问题。

原因追溯

为了追溯这个原因,可以首先熟悉一下useEffect的源码:

function useEffect(create, deps{
  const fiber = get();
  const { alternate } = fiber;

  if (alternate !== null) {
    const oldProps = alternate.memoizedProps;
    const [oldDeps, hasSameDeps] = areHookInputsEqual(deps, alternate.memoizedDeps);

    if (hasSameDeps) {
      pushEffect(fiber, oldProps, deps);
      return;
    }
  }

  const newEffect = create();

  pushEffect(fiber, newEffect, deps);
}

function areHookInputsEqual(nextDeps, prevDeps{
  if (prevDeps === null) {
    return false;
  }

  for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
    if (Object.is(nextDeps[i], prevDeps[i])) {
      continue;
    }

    return false;
  }

  return true;
}

在上面的代码中,我们着重关注areHookInputsEqual的实现,这个函数对比了前后两次传入的依赖项,决定了后续副作用函数create()是否会执行。可以明显看到,useEffect对于依赖项执行的是浅比较,即Object.is (arg1, arg2),这可能是出于性能考虑。对于原始类型这没有问题,但对于引用类型(数组、对象、函数等),这意味着即使内部的值保持不变,引用本身也会发生变化,导致 useEffect执行副作用。

方案探索

1.饮鸩止渴

缝缝补补只是为了等一个人替你推倒重盖

最直接的思路是把useEffect的依赖项从引用类型换成基本类型:

useEffect(() => {
  console.log('Component re-rendered by person');
}, [JSON.stringify(person)]);

useEffect(() => {
  console.log('Component re-rendered by array');
}, [JSON.stringify(array)]);

表面上可行,实际后患无穷(具体参考JSON.stringify为什么不能用来深拷贝),为了避坑而挖另外的坑,显然不是我们期待的解决方案。

对比之下,这样的写法可以容忍,但是person对象如果增加了其他属性,你要确保自己还记得更新依赖,否则依然是掩盖问题。

useEffect(() => {
  console.log('Component re-rendered by person');
}, [person.name, person.age]);

2.前置拦截

第二种思路:

在你决定要出手之前,我已经帮你决定了 —— 格林公式引申公理

我们可以把问题尽可能前置,手动加一层深对比,如何发现引用值没有变化,就不执行状态更新的逻辑,也就不会触发useEffect重复执行。

<button onClick={() => {
    const newPerson = { name: 'Bob', age: 18 };
    if (!isEqual(newPerson, person)) {
      setPerson(newPerson)}
    }
  }
>Update person</button>

但这样显然不太优雅,且每一次写setState时心智负担太重,对比逻辑可不可以封装起来。

3.他山之石

实际上自定义的Hooks就是为了解决方法级别的逻辑复用,这里我们利用useRef绑定的值可以跨渲染周期的特点,实现一个自定义的useCompare。

const useCompare = (value, compare) => {
  const ref = useRef(null);
  if (!compare(value, ref.current)) {
    ref.current = value;
  }
  return ref.current;
}

经过ref记录的上一次结果,我们同时拥有了前后两次更新的状态,如果发现值不同,再让ref绑定新的引用类型地址。

import { isEqual } from 'lodash';

const comparePerson = useCompare(person, isEqual);

useEffect(() => {
    console.log('Component re-rendered by comparePerson');
}, [comparePerson]);

// 重复执行
useEffect(() => {
  console.log('Component re-rendered by person');
}, [person]);

需要注意的是,这里使用了lodash的isEqual函数实现深对比,看似省心实际是一个成本极其不稳定的选择,如果对象过于庞大,可能得不偿失,可以传入简化的compare函数,有取舍的比较常变的key值。而且每次又到单独调用useCompare生成新的对象,这里的逻辑也值得被封装。

4.回归本质

停止曲线救国,直面问题本身。

说了这么多,实际还是useEffect中对比逻辑问题,本着支持拓展但不支持修改的原则,我们需要支持一个新的useEffect支持深度对比。我们将useRef实现的记忆引用传入useEffect的对比逻辑中:

import { useEffect, useRef } from 'react';
import isEqual from 'lodash.isequal';

const useDeepCompareEffect = (callback, dependencies, compare) => {
  // 默认的对比函数采用lodash.isEqual, 支持自定义
  if (!compare) compare = isEqual;
  const memoizedDependencies = useRef([]);
  if (!compare (memoizedDependencies.current, dependencies)) {
    memoizedDependencies.current = dependencies;
  }
  useEffect(callback, memoizedDependencies.current);
};

export default useDeepCompareEffect;


function App({ data }{
  useDeepCompareEffect(() => {
    // 这里的代码只有在 data 发生深层级的改变时才会执行
    console.log('data 发生了改变', data);
  }, [data]);

  return <div>Hello World</div>;
}

考虑到前文提到的复杂对象的深对比隐患,我依然结和个人意志,在useDeepCompareEffect中加了一个可选参数compare函数,把isEqual作为一种默认模式。于是,我们终于有了一劳永逸的方法。

总结

实际上,react-use和a-hooks等第三方库都已经实现了useDeepCompareEffect,也可以发现自定义hooks解决问题将会是目前体系下一种复用性极高的实践。

文章出自:https://juejin.cn/post/7209160083690750008

作者:LewisFung


原文始发于微信公众号(前端24):【React避坑指南】useEffect依赖引用类型

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/216227.html

(0)
李, 若俞的头像李, 若俞

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!