在 React 中，parent 中道具的变化会导致 child 中的相应更新吗？

Question

react ( https://reactjs.org/docs/react-component.html ) 的官方文档说 props 中的更新会导致 child 被更新，但它不会发生在我的代码中。我错过了什么吗？

我创建了一个 parent 组件 (Y) 和一个 child 组件 (X)。 parent 将 currentTime 作为道具传递给 child。即使在 3 秒后 parent 中的道具发生变化（由于 setTimeout），child 中 h2 标签中的值也不会改变。

我在 React 的官方页面 (https://reactjs.org/docs/react-component.html ) 上发现 "An update can be caused by changes to props or state." （我在下面的官方网站上附上了截图以及文本）此外，我发现那里"These methods are called when a component is being re-rendered:"

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

但在我的例子中，道具的变化不会导致 child 中 h2 标签的值发生变化。官方文档说 props 的更新会导致 child 被更新，但它不会发生在我的代码中。我错过了什么吗？

我把我的代码贴在这里以供参考。

const Y = () => {

    let currentTime="09:00";
    setTimeout(()=> {
            currentTime = "10:00:"
        }, 3000);

    return (
        <X time={currentTime}/>
    );
};


class X extends Component {
    time = "11:00";

    render = () => {
        return (
            <h2>{this.props.time}</h2>
        );
    };
}

截图： https://prnt.sc/i8kvaw

更新： Shubham Khatri "The props for the child will only change if the parent re-renders" 的评论确实帮助我理解了。 :)

Answer 1

即使在组件 Y 中更改了道具值 currentTime，它也不会再次重新渲染，因此子道具不会更新。如果将 currentTime 存储在父状态中，然后使用 setState 设置 Y 组件的状态，它会触发组件的重新渲染，因此子组件 X

会收到新的道具

class Y extends Component {

    state = {
        currentTime: "9:00 AM"
    };

    componentDidMount() {
        setTimeout(() => {
            this.setState({currentTime: "10:00"}
        }, 3000);
    }

    render() {
        return (
             <X time={currentTime}/>
        );
    }

};


class X extends Component {

    render = () => {
        return (
            <h2>{this.props.time}</h2>
        );
    };
}

Answer 2

父组件中的setTimeout只是改变currentTime变量的值。父函数中的渲染函数不会重新渲染，因此它会更新子函数。

您需要在父组件中为 currentTime 设置状态。

this.state = {
  currentTime:"09:00"
}

现在你可以做

componentDidMount() {
    setTimeout(() => {
        this.setState({ currentTime: "10:00" }
    }, 3000);
}

这将使父级重新渲染，子级将使用新属性进行更新。

在 React 中，parent 中道具的变化会导致 child 中的相应更新吗？

In react, will change in props in parent result in a corresponding updation in the child?

reactjs

react-props