时间戳

首页 > 解决方案 > 每次父母更新时都会调用 ReactJS 组件 useEffect 挂钩

javascript - 每次父母更新时都会调用 ReactJS 组件 useEffect 挂钩

问题描述

我有一个父组件。

function ParentComponent(){

  return (
     //loading is asynchronous variable which changes on some event call.
    {loading ? ( 
     <ChildComponent></ChildComponent>
    ): (
     <div>Some text...</div>
    )} 
  )
}

和一个子组件

function ChildComponent(){

  useEffect(() => {
     console.log("render child component"); 
  }, [])

  return (
     <div>This is child component</div>
  )
}

问题是，每当加载状态更改为 true 时，子组件 useEffect 挂钩每次都会调用，即使我将 [] 数组作为 useEffect 挂钩的第二个参数传递。但是，如果我删除条件然后更改加载状态，useEffect 可以完美运行。

标签： javascriptreactjsreact-hooksreact-lifecycle-hooks

解决方案

好的，你这里有条件加载。一旦您的加载状态更改为 false - 您的组件将从 DOM 中删除并执行所有清理工作。一旦加载状态从 false 更改为 true - 您的组件将被添加并且所有初始化工作都将发生（useState 还将设置初始值等）。您可以尝试更新您的钩子以查看发生了什么。另请查看 useEffect文档

function ChildComponent(){

  useEffect(() => {
     console.log("render child component"); 
     return () => console.log("cleanup");
  }, [])

  return (
     <div>This is child component</div>
  )
}

所以我的建议是，你真的不想从 DOM 中删除组件，所以你不需要显示它

function ParentComponent(){

  return (
     //loading is asynchronous variable which changes on some event call.
     <ChildComponent style={{display: loading? 'block' : 'none' }}></ChildComponent>
    { !loading && <div>Some text...</div> } 
  )
}

推荐阅读