React Hooks - useDeepCompareEffect在编写 React 时，useEffect 可以说是

前述

       在我们编写 React 时，useEffect 可以说是最常用的一个钩子，是优化组件更新的关键工具。但是，当依赖项是一个对象时，即使对象属性没有变化，useEffect 也会重新渲染。这是因为 useEffect 的底层源码是用的 Object.is 来进行浅比较的。Object.is 在进行比较同一个引用地址的对象时会返回true，否则返回false。        当我们在以对象为依赖项的 useEffect 中编写了复杂计算或网络请求时，这样重复渲染的结果明显是不符合我们需求的，所以use-deep-compare-effect开源项目走进了我们的视野。这个库提供了一个useDeepCompareEffect钩子，它采用深度比较而非引用相等性来决定何时运行你的效果。

项目简介

       use-deep-compare-effect 是 useEffect 的一个扩展，但它的核心差异在于它会对输入依赖进行深入的比较。这意味着如果你的依赖对象或数组内部值发生变化，且这种变化会影响应用状态，那么才会触发副作用的执行。这是一个针对深层数据结构优化的解决方案，旨在避免不必要的重渲染和提高性能。并且可以直接替换 useEffect，无需额外学习曲线。

开始使用

       只需要使用 npm install -save use-deep-compare-effect 或 yarn add use-deep-compare-effect，就可以将 use-deep-compare-effect 添加到项目中。        然后就可以在组件中像这样使用它

import { useDeepCompareEffect } from 'use-deep-compare-effect';

function MyComponent({ myObject }) {
    useDeepCompareEffect(() => {
        // 这里是你的副作用逻辑
    }, [myObject]); 
    // ... 
}

说明！！！

       react出于性能考虑用了Object.is来做浅比较，所以，我们并不能一次性的将 useEffect 替换为 useDeepCompareEffect，这样对性能不太友好。一般只有需要在进行复杂计算或网络请求时才使用。