组件生命周期在子父子组件间及异步路由时的变化

前端

2023-11-18 21:36:55

组件生命周期：React 组件的旅程

子父组件之间的生命周期

当组件嵌套在一起时，它们的生命周期会相互影响。父组件的变化可能会触发子组件的更新。生命周期方法的调用顺序如下：

父组件的 render() 方法生成子组件的元素。
子组件的 constructor() 方法创建子组件。
子组件的 componentWillMount() 方法被调用。
父组件的 componentDidMount() 方法被调用。
子组件的 componentDidMount() 方法被调用。
子组件的 componentWillReceiveProps() 方法在属性变化时被调用。
子组件的 shouldComponentUpdate() 方法决定是否需要更新。
子组件的 componentWillUpdate() 方法被调用。
子组件的 render() 方法生成更新后的元素。
父组件的 componentDidUpdate() 方法被调用。
子组件的 componentDidUpdate() 方法被调用。
子组件的 componentWillUnmount() 方法在从 DOM 中卸载时被调用。
父组件的 componentWillUnmount() 方法被调用。

兄弟组件之间的生命周期

兄弟组件没有嵌套关系，它们的生命周期相互独立。生命周期方法的调用顺序如下：

父组件的 render() 方法生成兄弟组件的元素。
兄弟组件的 constructor() 方法创建兄弟组件。
兄弟组件的 componentWillMount() 方法被调用。
父组件的 componentDidMount() 方法被调用。
兄弟组件的 componentDidMount() 方法被调用。
兄弟组件的 componentWillReceiveProps() 方法在属性变化时被调用。
兄弟组件的 shouldComponentUpdate() 方法决定是否需要更新。
兄弟组件的 componentWillUpdate() 方法被调用。
兄弟组件的 render() 方法生成更新后的元素。
父组件的 componentDidUpdate() 方法被调用。
兄弟组件的 componentDidUpdate() 方法被调用。
兄弟组件的 componentWillUnmount() 方法在从 DOM 中卸载时被调用。
父组件的 componentWillUnmount() 方法被调用。

异步路由时的生命周期

异步路由会在组件挂载到 DOM 之前加载组件，这会影响组件的生命周期。生命周期方法的调用顺序如下：

父组件的 render() 方法生成子组件的元素。
子组件的 constructor() 方法创建子组件。
子组件的 componentWillMount() 方法被调用。
子组件的 componentDidMount() 方法被调用。
父组件的 componentDidMount() 方法被调用。
子组件的 componentWillUnmount() 方法在从 DOM 中卸载时被调用。
父组件的 componentWillUnmount() 方法被调用。

代码示例

// 父组件
class Parent extends React.Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }

  componentDidMount() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return <Child count={this.state.count} />;
  }
}

// 子组件
class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: props.count };
  }

  componentDidMount() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return <div>子组件计数：{this.state.count}</div>;
  }
}