面试题：React组件通信与生命周期：跨多层组件通信及生命周期协同

Question

有一个祖孙三代的组件结构，`GrandParent` -> `Parent` -> `Child`。`GrandParent`有一个状态`data`，现在需要将`data`传递给`Child`组件。在`Child`组件接收到`data`发生变化时，不仅要在`componentDidUpdate`生命周期方法中打印新数据，还要触发`Parent`组件的一个`handleDataChange`方法，这个方法用于更新`Parent`组件自身的一个本地状态。请设计组件结构并实现相应功能，阐述你的设计思路并写出关键代码。

Answer 1

设计思路

1. 在 GrandParent 组件中定义 data 状态，并通过属性传递将 data 传递给 Parent 组件。
2. Parent 组件接收 data 后，再通过属性传递将 data 传递给 Child 组件。同时，在 Parent 组件中定义 handleDataChange 方法用于更新本地状态。
3. Child 组件在 componentDidUpdate 生命周期方法中检测 data 的变化，打印新数据并调用 Parent 组件传递过来的 handleDataChange 方法。

关键代码

1. GrandParent 组件

import React, { Component } from 'react';
import Parent from './Parent';

class GrandParent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: '初始数据'
    };
  }

  render() {
    return (
      <div>
        <Parent data={this.state.data} />
      </div>
    );
  }
}

export default GrandParent;

2. Parent 组件

import React, { Component } from 'react';
import Child from './Child';

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      localData: '本地初始数据'
    };
    this.handleDataChange = this.handleDataChange.bind(this);
  }

  handleDataChange() {
    this.setState({
      localData: this.props.data
    });
  }

  render() {
    return (
      <div>
        <Child data={this.props.data} handleDataChange={this.handleDataChange} />
      </div>
    );
  }
}

export default Parent;

3. Child 组件

import React, { Component } from 'react';

class Child extends Component {
  componentDidUpdate(prevProps) {
    if (prevProps.data!== this.props.data) {
      console.log('新数据:', this.props.data);
      this.props.handleDataChange();
    }
  }

  render() {
    return (
      <div>
        {this.props.data}
      </div>
    );
  }
}

export default Child;