標准的ES6語法的react組件生命周期代碼


//ES6語法定義的組件生命周期
import React,{Component} from 'react';
export  default class Life extends Component{
    constructor(props){
        super(props)
        console.log('構造函數')
        //初始化了我們的state,這是被推薦的語法
        this.state={
            props1:"初始化state"
        }
    }
  //組件將要被渲染到真實的dom節點中
  componentWillMount(){
      console.log('componentWillMount');
  }
  //組件已經插入到真實的dom節點中
  componentDidMount(){
      console.log('componentDidMount');
  }
  //組件是否要被重新渲染
  shouldComponentUpdate(){
      console.log('shouldComponentUpdate');
      return true;
  }
  //組件將要被重新渲染
  componentWillUpdate(){
      console.log('componentWillUpdate');
  }
   //組件已經被重新渲染
   componentDidUpdate(){
       console.log('componentDidUpdate');
   }
  //組件將要接收到新屬性
  componnentWillReceiveProps(){
      console.log('componnentWillReceiveProps');
  }
  click1=()=>{
      console.log('點擊了單擊事件');
      this.setState({
          props1:'改變了state的值'
      })
      console.log('點擊了單擊事件結束');
  }
  render(){
      console.log('render');
      return(
          <div>
              <h1 onClick={this.click1}>{this.state.props1}</h1>
          </div>
          )
  } 
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM