reactjs - React hooks 引用值对比

Question

各位! 想象一下，我有一个组件 SomeComponent。每次 'b' 值更改时，都会触发 useEffect，尽管 'b 不在其依赖项中

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], [])

作为 Prop

<SomeComponent a={a} />

Answer 1

这里的问题是每次重新渲染 a 的引用都会发生变化，因此 useEffect 会再次触发

您可以在 SomeComponent 中使用 useMemo 将内存值分配给 a

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

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