react生命周期

参考资料：React：组件的生命周期这个文档利用es5的creatClass，有些陈旧。React 生命周期这个过于粗暴，没有示例一个React组件的生命周期分为三个部分：实例化、存在期和销毁时，如下图：实例化getDefaultProps()设置默认的props，也可以用dufaultProps设置组件的默认属性.getInitialState()在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。每一个React组件都有自己的 state，其与 props 的区别在于 state只存在组件的内部，props 在所有实例中共享。componentWillMount()组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。render()react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。只能通过 this.props 和 this.state 访问数据（不能修改），也就是不能调用this.setState()。只能出现一个顶级组件，不能返回一组元素。例如：render(){ //这样不行 this.setState({ newState:_newState }); return ( <div></div> //去掉下面一行 <div></div> );}componentDidMount()组件渲染之后调用，只调用一次。demoimport React,{Component} from ‘react’;import ReactDOM from ‘react-dom’;class Clock extends Component{ constructor(props){ super(props); this.state = { date:new Date() } } //渲染前render执行 componentWillMount(){ //this.timer/////////////////////////// this.timer =setInterval(()=>{ this.setState({ date: new Date() }) },1000) } componentDidMount(){ this.clock.focus(); } componentWillUnmount(){ clearInterval(this.timer) } render(){ return( <div> <h1> <p ref={(clock)=>this.clock=clock}>now time:</p> {this.state.date.toLocaleTimeString()} </h1> </div> ) }}ReactDOM.render(<Clock />, document.getElementById(‘root’));存在期，更新操作改变componentWillReceiveProps(nextProps)只有props改变时调用shouldComponentUpdate(nextProps, nextState)react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候componentWillUpdata(nextProps, nextState)组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state。render()componentDidUpdate()组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。demoimport React from ‘react’;import ReactDOM from ‘react-dom’;class Content extends React.Component { constructor(){ super(); this.state = { test:0 } } componentWillMount() { console.log(‘Component WILL MOUNT!’) } componentDidMount() { console.log(‘Component DID MOUNT!’) } componentWillReceiveProps(newProps) { console.log(newProps) console.log(‘Component WILL RECEIVE PROPS!’) } shouldComponentUpdate(newProps, newState) { console.log(newProps,newState) return true; } componentWillUpdate(nextProps, nextState) { console.log(nextProps,nextState) console.log(‘Component WILL UPDATE!’); } componentDidUpdate(prevProps, prevState) { console.log(prevProps,prevState) console.log(‘Component DID UPDATE!’) } componentWillUnmount() { console.log(‘Component WILL UNMOUNT!’) } _handleClick(){ this.setState({ test:this.state.test + 1 }) } render() { return ( <div> <h3>{this.props.myNumber}</h3> <label onClick={this._handleClick.bind(this)}>点我</label> <span>{this.state.test}</span> </div> ); }}class Button 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 ( <div> <button onClick = {this.setNewNumber}>INCREMENT</button> <Content myNumber = {this.state.data}></Content> </div> ); }}ReactDOM.render(<Button />, document.getElementById(‘root’));卸载componentWillUnmount()组件将要卸载时调用，一些事件监听和定时器需要在此时清除，主要是优化性能，例子见Clock。