//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> ) } }