Javascript 当添加或删除子/孙组件时，如何在React中判断？

在React中，当组件更新时，我可以通过将代码放在

componentdiddupdate

生命周期方法中来执行一些代码。在我的例子中，我需要区分两种类型的更新。第一种情况是，只有现有组件上的道具更改（不会添加或删除DOM元素，但现有元素的属性/内容可能会更改）。第二个是添加/删除新的子组件时（将添加或删除DOM元素）

考虑下面的伪代码；当具有

列表

的

名称

的组件的一个子组件被删除时，我希望执行一个函数，但当任何子组件的

活动

属性被更改时，我不希望执行该函数。这只是一个普通的例子，并不是我想做的唯一的事情，否则我可以根据这个特定的情况定制我的解决方案

<Module>
  <Component name='list' />
    <Component active={true} />
    <Component active={false} />
    <Component active={false} />
  </Component>
</Module>

我考虑过使用

props.children.length

值并将其存储为state，然后如果值在渲染之间发生变化，我知道元素已被添加/删除，但我认为在添加/删除grand children组件时，这不起作用，而只直接子元素

---

我觉得可能有一个使用上下文API的解决方案，但我不太确定该解决方案是什么。

创建两个函数，在安装或卸载子组件时调用，将函数作为道具传递给子组件

class ParentComponent extends Component {
  childMounted() {
    console.log('child mounted')
  }
  childUnmounted() {
    console.log('child un-mounted')
  }
  render() {
    return(
      <div>
        <ChildComponent mounted={this.childMounted} unmounted={this.childUnmounted} />
      </div>
    )
  }
}

---

创建两个要在安装或卸载子组件时调用的函数，将这些函数作为道具传递给子组件

class ParentComponent extends Component {
  childMounted() {
    console.log('child mounted')
  }
  childUnmounted() {
    console.log('child un-mounted')
  }
  render() {
    return(
      <div>
        <ChildComponent mounted={this.childMounted} unmounted={this.childUnmounted} />
      </div>
    )
  }
}

---

将一个函数作为prop从父组件传递给子组件，然后使用子组件的生命周期方法（componentDidMount、componentWillUnmount）调用该函数。你需要一个例子吗？@AbdullahAlsigar是的，这是有道理的，我应该从这里做起！非常感谢。可以随意添加一个示例，这样它就可以被投票/接受，这样你就可以赢得一些声誉。将一个函数作为道具从父组件传递给子组件，然后使用子组件的生命周期方法（componentDidMount，componentWillUnmount）调用该函数。你需要一个例子吗？@AbdullahAlsigar是的，这是有道理的，我应该从这里做起！非常感谢。请随意添加一个示例，以便投票/接受，从而赢得一些声誉。

class ChildComponent extends Component {
  componentDidMount() { this.props.childMounted() }
  componentWillUnmount() { this.props.unmounted() }
  render() { return null; }
}