面试题：React组件通信与生命周期方法：状态传递的应用

Question

假设有一个父组件`Parent`和子组件`Child`，父组件有一个状态`count`，请通过合适的组件通信方式，将`count`传递给子组件，并在子组件的`componentDidUpdate`生命周期方法中，当`count`发生变化时，在控制台打印一条信息说明`count`值的改变，要求写出完整的代码示例。

Answer 1

以下以React为例：

import React, { Component } from 'react';

class Child extends Component {
    componentDidUpdate(prevProps) {
        if (prevProps.count!== this.props.count) {
            console.log(`count值从 ${prevProps.count} 变为 ${this.props.count}`);
        }
    }

    render() {
        return <div>子组件接收的count: {this.props.count}</div>;
    }
}

class Parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({ count: this.state.count + 1 });
        }, 2000);
    }

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

export default Parent;

上述代码实现了父组件Parent将状态count传递给子组件Child，并在子组件Child的componentDidUpdate生命周期中，当count变化时在控制台打印信息。父组件在挂载后两秒更新count值，触发子组件的componentDidUpdate。