卸載的組件仍然首先渲染

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組件的卸載階段，所以我在控制台 output 中有這些：

渲染消息組件

卸載消息組件

所以我的問題是：

它效率不高，因為當前的 Message 組件將被銷毀，因為一旦我取消選中該框，我就不需要它。 但是 Message 組件的 render() 仍然被調用，這是不必要的，因為我們並不關心它包含什么內容，這是一種避免調用 re-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>