React - 每次父組件呈現時，子組件是否重新掛載？

Question

在這個非常基本的示例中，我將組件Bar包含在組件Foo的渲染函數中。我注意到Bar的componentDidMount方法在每次Foo重新渲染時都會觸發 - 這是正確的行爲嗎？

import Bar from './Bar.jsx'; 

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

注：我也問過這個問題，理智檢查預期的行爲，爲了追蹤一個錯誤。

Answer 1

孩子的行爲取決於父母的行爲。

componentDidMount（）在組件裝入後立即被調用。子組件的componentDidMount（）方法在父組件之前被調用。

如果您的父組件簡單地重新呈現，則期望子組件僅僅重新呈現，因爲componentDidMount（）在組件的生命週期中僅被調用一次。

Answer 2

在渲染功能中使用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 /> 
      ); 
     } 
    } 
}