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