useEffect hook - 依赖 - 重新渲染问题

Question

第一种情况：
_假设我有一个处于 redux 状态或父状态的 prop。
_我不希望在此道具更改时触发 useEffect，
_但我确实需要在 useEffect 中使用该道具。
_React 警告我将道具添加到依赖项数组，但如果我这样做，那么 useEffect 将再次触发。

第二种情况：_
我在一个useEffect中使用了一个函数，_但
该函数在其他地方也需要。
_不想重复功能代码。
_React 希望我将该函数添加到依赖项数组，但我不希望每次函数引用更改时都触发 useEffect。

Answer 1

在使用 useEffect 时，您应该考虑闭包。如果在 useEffect 中使用了任何 props 或局部变量，那么建议将其包含在依赖项数组中，否则由于闭包，您将使用过时的数据。

在这里我介绍一个用例。在 ComponentUsingRef 内部，我们使用 ref 作为容器。您可以在https://reactjs.org/docs/hooks-reference.html#useref找到更多相关信息

这种方法的优点是您不必在父组件中记住 fn 。您将始终使用函数的最新值，在给定的情况下，它甚至不会导致 useEffect 的触发，因为它不会依赖于您的依赖项

const Component=({fn})=>{
    useEffect(()=>{
       fn()
    },[fn])
    .....
    .....
    return <SomeComponent {...newProps}/>
}

const ComponentUsingRef=({fn}){
    const fnRef = useRef(fn)
    fnRef.current = fn // so that our ref container contains the latest value
    useEffect(()=>{
       fn.current()
    },[ ])
    .....
    .....
    return <SomeComponent {...newProps}/>
}

如果您想使用抽象，那么您应该将逻辑提取到custom hook