Question

我有一个组件，它从其父组件接收一个setState挂钩作为道具。当它调用该道具时，会导致重新渲染，因为父对象会更新其状态。

问题是我在子组件内部有一个useEffect，仅当props更改时才需要运行它（props是它唯一的依赖项）。但是由于其父项重新渲染，即使不需要它，我也不知道有什么方法可以阻止它执行。我认为父母重新渲染后会再次将道具发送给孩子。

对我的问题进行基本复制

function Parent = () => {
     const [test, setTest] = useState()
     

     return (
        <Child onClick={value => setTest(value)} propINeed={{foo: 'bar'}}/>
     )
}


function Child = props => {
   useEffect(() => {
      //STUFF I NEED TO RUN ONLY WHEN PROPS DO REALLY CHANGE
   }, [props])

   //ONCLICK PROP IS CALLED, AND useEffect RUNS AGAIN, messing with my data
}

我知道道具不会改变。所以我很确定这是由于父级重新渲染

Answer 1

仅将propINeed放入依赖项数组中，因此useEffect回调不会在单击时运行：

useEffect(() => {
   //STUFF I NEED TO RUN ONLY WHEN PROPS DO REALLY CHANGE
}, [props.propINeed])

setState触发以道具为依赖项的子UseEffect

1 个答案: