React之useEffect依赖引用类型问题怎么解决

其他教程   发布日期:2023年08月24日   浏览次数:381

本文小编为大家详细介绍“React之useEffect依赖引用类型问题怎么解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“React之useEffect依赖引用类型问题怎么解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

    问题提出

    1. const Issue = function () {
    2. const [count, setCount] = useState(0);
    3. const [person, setPerson] = useState({ name: 'Alice', age: 15 });
    4. const [array, setArray] = useState([1, 2, 3]);
    5. useEffect(() => {
    6. console.log('Component re-rendered by count');
    7. }, [count]);
    8. useEffect(() => {
    9. console.log('Component re-rendered by person');
    10. }, [person]);
    11. useEffect(() => {
    12. console.log('Component re-rendered by array');
    13. }, [array]);
    14. return (
    15. <div>
    16. <p>You clicked {count} times</p>
    17. <button onClick={() => setCount(1)}>Update Count</button>
    18. <button onClick={() => setPerson({ name: 'Bob', age: 30 })}>Update Person</button>
    19. <button onClick={() => setArray([1, 2, 3, 4])}>Update Array</button>
    20. </div>
    21. );
    22. };

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

    原因追溯

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

    1. function useEffect(create, deps) {
    2. const fiber = get();
    3. const { alternate } = fiber;
    4. if (alternate !== null) {
    5. const oldProps = alternate.memoizedProps;
    6. const [oldDeps, hasSameDeps] = areHookInputsEqual(deps, alternate.memoizedDeps);
    7. if (hasSameDeps) {
    8. pushEffect(fiber, oldProps, deps);
    9. return;
    10. }
    11. }
    12. const newEffect = create();
    13. pushEffect(fiber, newEffect, deps);
    14. }
    15. function areHookInputsEqual(nextDeps, prevDeps) {
    16. if (prevDeps === null) {
    17. return false;
    18. }
    19. for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
    20. if (Object.is(nextDeps[i], prevDeps[i])) {
    21. continue;
    22. }
    23. return false;
    24. }
    25. return true;
    26. }

    在上面的代码中,我们着重关注

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

    方案探索

    1.饮鸩止渴

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

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

    1. useEffect(() => {
    2. console.log('Component re-rendered by person');
    3. }, [JSON.stringify(person)]);
    4. useEffect(() => {
    5. console.log('Component re-rendered by array');
    6. }, [JSON.stringify(array)]);

    表面上可行,实际后患无穷(具体参考JSON.stringify为什么不能用来深拷贝),为了避坑而挖另外的坑,显然不是我们期待的解决方案。
    对比之下,这样的写法可以容忍,但是person对象如果增加了其他属性,你要确保自己还记得更新依赖,否则依然是掩盖问题。

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

    2.前置拦截

    第二种思路:

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

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

    1. <button onClick={() => {
    2. const newPerson = { name: 'Bob', age: 18 };
    3. if (!isEqual(newPerson, person)) {
    4. setPerson(newPerson)}
    5. }
    6. }
    7. >Update person</button>

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

    3.他山之石

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

    1. const useCompare = (value, compare) => {
    2. const ref = useRef(null);
    3. if (!compare(value, ref.current)) {
    4. ref.current = value;
    5. }
    6. return ref.current;
    7. }

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

    1. import { isEqual } from 'lodash';
    2. const comparePerson = useCompare(person, isEqual);
    3. useEffect(() => {
    4. console.log('Component re-rendered by comparePerson');
    5. }, [comparePerson]);
    6. // 重复执行
    7. useEffect(() => {
    8. console.log('Component re-rendered by person');
    9. }, [person]);

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

    4.回归本质

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

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

    1. import { useEffect, useRef } from 'react';
    2. import isEqual from 'lodash.isequal';
    3. const useDeepCompareEffect = (callback, dependencies, compare) => {
    4. // 默认的对比函数采用lodash.isEqual, 支持自定义
    5. if (!compare) compare = isEqual;
    6. const memoizedDependencies = useRef([]);
    7. if (!compare (memoizedDependencies.current, dependencies)) {
    8. memoizedDependencies.current = dependencies;
    9. }
    10. useEffect(callback, memoizedDependencies.current);
    11. };
    12. export default useDeepCompareEffect;
    13. function App({ data }) {
    14. useDeepCompareEffect(() => {
    15. // 这里的代码只有在 data 发生深层级的改变时才会执行
    16. console.log('data 发生了改变', data);
    17. }, [data]);
    18. return <div>Hello World</div>;
    19. }

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

    以上就是React之useEffect依赖引用类型问题怎么解决的详细内容,更多关于React之useEffect依赖引用类型问题怎么解决的资料请关注九品源码其它相关文章!