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

【问题标题】：Avoid calling effect inside component when conditionally rendering条件渲染时避免在组件内部调用效果
【发布时间】：2020-03-24 09:51:52
【问题描述】：

我有以下组件：

const Component = () => {
  useEffect(() => {
    console.log('Component useEffect')
  }, [])

  return <Text>element</Text>
}

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

{someCondition && <Component />}

有没有办法通过以某种方式记忆呈现的元素来避免这种情况？这是因为钩子的性质对排序很敏感吗...？

【问题讨论】：

标签： javascript reactjs rendering react-hooks

【解决方案1】：

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

const Parent = () =>{
    return <Child condition={false} />
}

const Child = ({ condition }) =>{
    useEffect(() =>{},[])

    return condition ? <span /> : null 
}

【讨论】：

我知道钩子不能有条件地调用，Component 在这里有条件地呈现。这是一样的吗？
如果我理解正确，你只想执行一次效果，不管它被挂载和卸载多少次，对吧？好吧，如果效果是在您的组件内部定义的，您将无法实现此行为。每次组件再次挂载时，效果都会运行。
没错。如果我理解正确，我们需要知道子组件在处理条件挂载时是否使用钩子？
没有。也许我解释的不对。我删除了关于有条件地调用钩子的评论。
我的观点是：钩子在安装时总是至少运行一次。如果组件被多次挂载，效果会运行多次