避免在有条件地渲染时调用组件内部的效果

Question

我有以下组件：

const Component = () => {
useEffect(() => {
console.log('Component useEffect')
}, [])
return <Text>element</Text>
}

当我有条件地渲染上面的组件时，每次重新附加组件时都会调用副作用：

{someCondition && <Component />}

有没有办法通过以某种方式记住渲染的元素来避免这种情况？这是由于钩子对排序敏感的本质吗？

Answer 1

在父组件内执行效果或在子组件内移动conditional render逻辑

const Parent = () =>{
return <Child condition={false} />
}
const Child = ({ condition }) =>{
useEffect(() =>{},[])
return condition ? <span /> : null 
}