每次父级更新时 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 可以完美运行。

解决方法

你应该通过 props 传递 loading 状态并在 useEffect 中使用它。

父组件：

function ParentComponent(){

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

子组件：

function ChildComponent(loading){

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

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

,

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

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> } 
  )
}