React组件更新触发子孙componentDidUpdate问题及最佳实践咨询

问题解析 #

父组件状态更新触发所有子、孙组件的componentDidUpdate执行，这是React的默认渲染逻辑——父组件重新渲染时，会递归触发所有子组件的重渲染，无论子组件的props是否发生变化。

比如你提供的代码里，App组件点击按钮更新状态后，尽管Child和Grandchild没有接收任何props，依然会被触发重渲染，进而执行componentDidUpdate（首次挂载执行componentDidMount，后续更新才触发componentDidUpdate）。这并非你忽略了什么，而是React的基础渲染机制。

类组件判断更新原因的最佳实践 #

1. 用shouldComponentUpdate精准控制更新

这个生命周期钩子允许你手动决定组件是否需要更新，接收nextProps和nextState参数，对比当前的this.props/this.state后，返回true则继续更新，false则跳过更新。

示例：

shouldComponentUpdate(nextProps, nextState) {
  // 仅当count状态变化时才允许更新
  return nextState.count !== this.state.count;
}

2. 继承React.PureComponent自动浅比较

PureComponent内置了props和state的浅比较逻辑，会自动跳过props/state未发生浅变化的重渲染，能避免大部分不必要的性能损耗。

注意：如果props/state是引用类型（对象、数组），浅比较只对比引用地址。比如你代码中每次创建新的tempObj，即使内容和原obj一致，PureComponent也会认为状态变化而触发更新，此时需要确保状态更新时使用不可变操作（仅在内容变化时创建新对象）。

3. 在componentDidUpdate中追溯更新来源

如果只是想确认组件是因props还是state更新触发的，可以在componentDidUpdate中对比prevProps、prevState与当前props/state：

componentDidUpdate(prevProps, prevState) {
  // 判断props是否变化
  if (prevProps.someKey !== this.props.someKey) {
    console.log('组件因props更新触发');
  }
  // 判断state是否变化
  if (prevState.count !== this.state.count) {
    console.log('组件因state更新触发');
  }
}

注：复杂数据结构下不推荐用JSON.stringify做深比较，建议针对具体属性做精准对比，避免性能问题。

你的代码示例 #

App.js

import logo from './logo.svg';
import React from 'react';
import './App.css';
import Child from './child';
class App extends React.Component {

  constructor() {
    super();
    this.state = {
      count: 0,
      obj: {
        key1: 'text',
      }
    };
  }

  clickHandler = () => {
    const tempObj =  {
      key1: 'text',
    };
    this.setState({
      count: 0,
      obj: tempObj,
    });
  }

  render() {
    return (
      <div className='container'>
        <div className='top-button'>
        <button onClick={this.clickHandler}>`count: ${this.state.count}`</button>;;
        </div>
        <Child />
      </div>
    );
  }
}

export default App;

child.js

import React from 'react';
import Grandchild from './grandchild';
class Child extends React.Component {

  constructor() {
    super();
  }

  componentDidUpdate(){
    console.log('child: component updated');
  }

  componentDidMount(){
    console.log('child mounted');
  }

  render() {
    return <Grandchild />;
  }
}

export default Child;

grandchild.js

import React from 'react';

class Grandchild extends React.Component {

  constructor() {
    super();
  }

  componentDidUpdate(){
    console.log('Grandchild: component updated');
  }

  componentDidMount(){
    console.log('Grandchild mounted');
  }
  
  render() {
    return null;
  }
}

export default Grandchild;

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