React-子组件每次渲染时都会重新安装吗？

Question

In this very basic example I am including the component Bar inside the render function of component Foo . I am observing that the componentDidMount method for Bar is firing each time Foo re-renders - is this the correct behaviour?

import Bar from './Bar.jsx';

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

Note: I have asked this question to sanity check the expected behaviour, in order to track down a bug.

Answer 1

The children behaviour depends on the parent behaviour.

componentDidMount() is invoked immediately after a component is mounted. The componentDidMount() method of child components is invoked before that of parent components.

If your parent component simply re-renders, it is expected that child components also simply re-render, since componentDidMount() is invoked only once in the component's lifecycle.

Answer 2

Need to be careful when using if if/else logic in the render function. In the example below, the Bar component will unmount if the loading prop value changes to true :

import Bar from './Bar.jsx';

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