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 
}

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

1 个答案: