React - 每次父组件渲染时是否重新装载子组件？

Question

在这个非常基本的例子中，我在组件Bar的render函数中包含了组件Foo。我观察到每次Foo重新渲染时componentDidMount的{​​{1}}方法都会触发 - 这是正确的行为吗？

Bar

注意：我已经问过这个问题，以便检查预期的行为，以便追踪错误。

Answer 1

儿童的行为取决于父母的行为。

装载组件后立即调用

componentDidMount（）。子组件的componentDidMount（）方法在父组件之前调用。

如果您的父组件只是重新渲染，则预期子组件也只是重新渲染，因为componentDidMount（）在组件的生命周期中只调用一次。

答案 1 :(得分：1)

在渲染函数中使用if if/else逻辑时需要小心。在下面的示例中，如果Bar道具值更改为loading，true组件将会卸载：

import Bar from './Bar.jsx';

export default class Foo extends Component {
    render() {
        if(this.props.loading){
            return (
                <div>Loading...</div>
            );
        }
        else{
            return (
                <Bar />
            );
        }
    }
}

Answer 2

在渲染函数中使用if if/else逻辑时需要小心。在下面的示例中，如果Bar道具值更改为loading，true组件将会卸载：

import Bar from './Bar.jsx';

export default class Foo extends Component {
    render() {
        if(this.props.loading){
            return (
                <div>Loading...</div>
            );
        }
        else{
            return (
                <Bar />
            );
        }
    }
}