javascript - 未安装的组件仍然首先渲染

Question

我是 React 新手，只是关于 componentWillUnmount() 和 render() 生命周期方法的问题。下面是一些代码:

...
export default class App extends Component { 
   constructor(props) {
      super(props);
      this.state = { showMessage: true }
   }
 
   handleChange = () => { this.setState({ showMessage: !this.state.showMessage });
 }
   
   render(){
      <div>
         <input type="checkbox" checked={ this.state.showMessage } onChange={ this.handleChange } />
         <label>Show</label>
     </div>
     { this.state.showMessage && <Message message="Hello" /> }
   }
}

export class Message extends Component {
   ...
   componentWillUnmount() { 
      console.log("Unmount Message Component");
   }

   render(){
      console.log(`Render Message Component `);
      return (
         <div>{this.props.message}</div/
      )
   
   }
}

我通过取消选中复选框来触发 Message 组件的卸载阶段，因此控制台输出中包含这些内容:

Render Message Component

Unmount Message Component

所以我的问题是:

这效率不高，因为一旦取消选中该框，当前的消息组件将被销毁，因为我不再需要它。但是 Message 组件的 render() 仍然被调用，这是不必要的，因为我们并不真正关心它包含什么内容，这是避免调用重新渲染方法而只是调用 componentWillUnmount() 的方法吗？我正在考虑使用 shouldComponentUpdate()，但我可以停止调用 render() 方法，但这也会停止调用 componentWillUnmount()

Answer 1

当您卸载组件时，render 不会执行 - 仅调用 componentWillUnmount。 Render Message Component 日志是由 Message 可见时的初始渲染引起的:

class App extends React.Component { 
   constructor(props) {
      super(props);
      this.state = { showMessage: true }
      console.log("initial render:");
   }

   handleChange = () => { this.setState({ showMessage: !this.state.showMessage });
 }

   render(){
      this.state.showMessage || console.log("unmounting:");
      return <div>
         <input type="checkbox" checked={ this.state.showMessage } onChange={ this.handleChange } />
         <label>Show</label>
         { this.state.showMessage && <Message message="Hello" /> }
     </div>
     
   }
}

class Message extends React.Component {
   componentWillUnmount() { 
      console.log("Unmount Message Component");
   }

   render(){
      console.log(`Render Message Component `);
      return (
         <div>{this.props.message}</div>
      )

   }
}

ReactDOM.render(<App/>, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.development.js"></script>
<div id="root"></div>