前端之家

  1. 首页
  2. 问答

卸载的组件仍将首先渲染

• 问答

我是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组件的卸载阶段，因此控制台输出中将包含这些内容：

  

渲染消息组件

     

卸载消息组件

所以我的问题是：

效率不高，因为当前的Message组件将被销毁，因为一旦取消选中该框，我就不需要它。但是仍在调用Message组件的render（），这是不必要的，因为我们并不真正关心它包含的内容，这是一种避免调用re-render方法而只调用componentWillUnmount（）的方法吗？我本来打算使用shouldComponentUpdate()，但是我可以停止调用render（）方法，但这也将停止componentWillUnmount()的调用

sjhranran 回答：卸载的组件仍将首先渲染

卸载组件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>

javascriptreactjs
本文链接：https://www.f2er.com/3163039.html

大家都在问