📌  相关文章
📜  ReactJS-组件生命周期

📅  最后修改于: 2020-10-20 04:49:30             🧑  作者: Mango

在本章中，我们将讨论组件生命周期方法。

生命周期方法

  • componentWillMount在呈现之前在服务器和客户端上都执行。

  • componentDidMount仅在客户端第一次渲染之后执行。这是应该进行AJAX请求和DOM或状态更新的地方。此方法还用于与其他JavaScript框架以及执行延迟的任何函数（例如setTimeout或setInterval）集成。我们正在使用它来更新状态，以便我们可以触发其他生命周期方法。

  • 在调用另一个渲染之前，在更新道具后立即调用componentWillReceiveProps 。我们在更新状态时从setNewNumber触发了它。

  • shouldComponentUpdate应该返回true或false值。这将确定组件是否将被更新。默认情况下将其设置为true 。如果您确定组件在状态或道具更新后不需要渲染，则可以返回false值。

  • componentWillUpdate在呈现之前被调用。

  • 渲染后立即调用componentDidUpdate 。

  • 该组件是从DOM卸除后componentWillUnmount被调用。我们正在main.js中卸载组件。

在下面的示例中，我们将在构造函数设置初始状态。 setNewnumber用于更新状态。所有生命周期方法都在Content组件内部。

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 0
      }
      this.setNewNumber = this.setNewNumber.bind(this)
   };
   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }
   render() {
      return (
         

            
            
         

      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   render() {
      return (
         

            
{this.props.myNumber}

         

      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(, document.getElementById('app'));

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

初始渲染后，我们将获得以下屏幕。

反应组件生命周期初始屏幕