React组件子元素增删、条件渲染回显时触发哪些钩子？

嘿，我来帮你拆解这两个React钩子相关的问题，都是日常开发中容易踩坑的点：

1. 子元素被添加/移除时，会触发哪些React钩子？ #

这个得分子组件自身和**父组件（控制子元素渲染的组件）**两种情况来看：

子组件视角 #

• 当子元素被添加（挂载）时：
  • 函数组件：会触发useEffect（挂载阶段执行）、useLayoutEffect（在DOM更新后同步执行，比useEffect早）
  • 类组件：会触发componentDidMount
• 当子元素被移除（卸载）时：
  • 函数组件：会触发useEffect/useLayoutEffect的清理函数（就是useEffect返回的那个函数）
  • 类组件：会触发componentWillUnmount

父组件视角 #

如果是父组件通过条件渲染（比如{showChild && <Child />}）控制子元素的添加/移除，父组件自身会触发这些钩子：

• 函数组件：如果依赖了控制子元素显示的状态（比如useEffect(() => {}, [showChild])），对应的useEffect会触发；如果没有特定依赖，每次父组件重新渲染时无依赖的useEffect也会执行
• 类组件：会触发componentDidUpdate（因为父组件的状态变化导致了重新渲染）

2. 中间层组件能否拦截子元素的移除/重新添加？ #

你之前的疑惑很典型——默认情况下，如果中间层组件的自身props或state没有变化，它的更新钩子（比如componentDidUpdate）确实不会触发，除非满足以下条件：

什么时候中间层会触发钩子？ #

• 如果中间层没有用React.memo（函数组件）或PureComponent/shouldComponentUpdate（类组件），当上层组件因状态更新重新渲染时，中间层会跟着重新渲染。此时：
  • 类组件的componentDidUpdate会触发（哪怕props/state没变化）
  • 函数组件的无依赖useEffect也会每次渲染都执行
• 但如果用了React.memo/PureComponent，React会浅比较props/state，没变化的话中间层不会重新渲染，自然不会触发钩子。

如何主动在中间层拦截这个变化？ #

要精准感知子元素的添加/移除，最好的方式是让中间层依赖与子元素渲染相关的变量：

1. 接收控制状态作为props：如果上层控制子元素显示的状态（比如showChild）是通过props传递给中间层的，你可以直接依赖这个状态：
   • 函数组件：

     function MiddleComponent({ showChild }) {
       useEffect(() => {
         if (showChild) {
           console.log('子元素被添加了');
         } else {
           console.log('子元素被移除了');
         }
       }, [showChild]);
     
       return <div>{showChild && <Child />}</div>;
     }
     

   • 类组件：

     class MiddleComponent extends Component {
       componentDidUpdate(prevProps) {
         if (prevProps.showChild !== this.props.showChild) {
           if (this.props.showChild) {
             console.log('子元素被添加了');
           } else {
             console.log('子元素被移除了');
           }
         }
       }
     
       render() {
         return <div>{this.props.showChild && <Child />}</div>;
       }
     }
     

2. 监听children的变化：如果子元素是作为children props传递给中间层的，可以依赖children或者其衍生值（比如子元素数量）：

   function MiddleComponent({ children }) {
     const childCount = React.Children.count(children);
     useEffect(() => {
       console.log('子元素数量变化了，当前数量：', childCount);
       // 这里可以进一步判断是添加还是移除
     }, [childCount, children]);
   
     return <div>{children}</div>;
   }
   

   注意：如果children是动态生成的（比如条件渲染的元素），每次上层渲染时它的引用会变化，这个依赖会生效；如果是静态元素，引用不变则不会触发。

内容的提问来源于stack exchange，提问作者jayarjo