React Hooks 参考值比较

Question

大家好！ 假设我有一个组件SomeComponent。每当'b'的值发生变化时，即使它不在其依赖项中，也会触发useEffect。

const SomeComponent = () => {
  const a = [1, 2, 3] //just an example of dependency. In real life it will be a changing value
  const b = useSelector(someValueSelector)

  useEffect(() => {
    //do some staff
  }, [a])
}

有没有办法在SomeComponent内部存储对'a'数组的引用？我所知道的唯一方法是创建一个包装组件并传递。

a = useMemo(() => [1, 2, 3], [])

作为对...的赞扬。

<SomeComponent a={a} />

- Aleksandr

Answer 1

问题在于每次重新渲染时，a的引用都会改变，因此useEffect会再次触发。

您可以在SomeComponent中使用useMemo将一个记忆化值分配给a。

const SomeComponent = () => {
  const a = useMemo(() => [1, 2, 3], []); 
  const b = useSelector(someValueSelector)

  useEffect(() => {
    //do some staff
  }, [a])
}

- Shubham Khatri

---

谢谢！ 有没有可能将这个与依赖于某些状态的函数（例如redux）结合起来？ - Aleksandr

请您详细说明一下，这样我就可以用更精细的细节更新我的帖子。目前为止，我只能使用您提供的内容。 - Shubham Khatri

哦，我找到了一个解决方案，给你打字)) 再次感谢你！ - Aleksandr

我猜这与在useMemo内部使用适当的依赖项调用函数有关。很高兴你的问题已经解决 :-) 很高兴能够帮助到你。 - Shubham Khatri

Answer 2

正如您可能已经了解的那样，但为了明确未来的读者，这是由于JavaScript中的对象相等性。由于对象是按引用比较的，{} === {}的结果为false。

根据您的使用情况，您可以通过以下方式解决此问题：

1. 如果值是静态的且不依赖于 props，请在组件的同一作用域中定义 a。这样可以避免将其声明为 useEffect 依赖项的需要：

   const a = [1, 2, 3]
   const SomeComponent = () => {
     useEffect(() => {
       // 使用 `a` 进行操作
     }, [])
   }
   

2. 如果值是动态的但更改不应导致组件重新渲染，则应使用 ref。更改 ref 的值不会促使 React 重新渲染组件，并且将从 useRef() 在每次渲染时返回相同的对象：
   

   const SomeComponent = () => {
     const ref = useRef([1, 2, 3])
     useEffect(() => {
       // 使用 ref.current 进行操作
     }, [ref])
   }
   

3. 最后，如果 a 的值是动态的或依赖于随时间可能发生更改的 props，请使用 useMemo。请注意，useMemo 并不是语义保证——React 可能选择弹出存储的值以释放内存，因此它应仅用作性能优化：
   

   const SomeComponent = () => {
     const a = useMemo(() => [1, 2, 3], [])
     useEffect(() => {
       // 使用 a 进行操作
     }, [a])
   }
   

- coreyward