React - 子组件在父组件重新渲染时是否会重新挂载？

Question

在这个非常基础的例子中，我将组件Bar包含在组件Foo的渲染函数内。我注意到每次重新渲染Foo时，Bar的componentDidMount方法都会被触发 - 这是正确的行为吗？

import Bar from './Bar.jsx';

export default class Foo extends Component {
    render() {
        return (
            <Bar />
        );
    }
}

注意：我询问这个问题是为了审查预期的行为，以便追踪错误。

- JoeTidee

Answer 1

孩子的行为取决于父母的行为。

componentDidMount() 会在组件装载后立即调用，子组件的 componentDidMount() 方法将先于父组件调用。

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

- idjuradj

---

请你整理一下这个答案，删除关于父组件重新挂载的细节，因为问题只关心重新渲染。 - JoeTidee

@JoeTidee 完成。 - idjuradj

Answer 2

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

import Bar from './Bar.jsx';

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

- JoeTidee

Answer 3

在我的经验中，导致子组件在父组件意外重新渲染时每次都会挂载的原因有：

• 子组件被传递到一个没有键的组件数组中
• 子组件包含在样式组件中，这些组件在渲染函数内部声明。而不是在父组件之外声明。

- subharb