ReactJS 组件 useEffect 钩子调用每次 parents 更新

Question

我有一个 parent 组件。

function ParentComponent(){

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

和一个child组件

function ChildComponent(){

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

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

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

Answer 1

你应该通过 props 传递 loading state 并在 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>
  )
}

Answer 2

好的，这里是条件加载。一旦您的加载状态更改为 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> } 
  )
}

ReactJS 组件 useEffect 钩子调用每次 parents 更新

ReactJS component useeffect hooks call every time parents get updated

javascript

reactjs

react-hooks

react-lifecycle-hooks