react16之前的生命周期

lefecycle-Reactreact16之前后的生命周期A.初始化阶段：1.设置默认属性：static defaultProps = { name: ‘sls’, age:23， number: 0};//or Counter.defaltProps={name:‘sls’}2)设置属性校验import PropTypes from 'prop-types';属性检查器，检查父组件传递给当前组件的类型 static propTypes = { number: PropTypes.number.isRequired }2.设置组件的初始化状态constructor() { super(); this.state = {number: 0}}3、父组件挂载之前 componentWillMount4 、render(父组件挂载)5、子组件挂载中render6、父组件挂载完成 componentDidMount组件被更新完成后触发。页面中产生了新的DOM的元素，可以进行DOM操作7、父组件是否需要更新 shouldComponentUpdate//上一个属性对象 上一个状态对象shouldComponentUpdate(prevProps,prevState){ if(prevState.number<5){//如果新状态的number属性小于5的话 return true; }else{ return false; } }8、父组件将要更新 componentWillUpdate4、render(父组件挂载)9、子组件将要接收到新属性SubCounter componentWillReceiveProps10、子组件是否需要更新 shouldComponentUpdateshouldComponentUpdate(props,state){ if(props.number<3){ return true; }else{ return false; } }11、子组件将要更新 componentWillUpdate12、子组件挂载中render13、子组件更新完成 componentDidUpdate8、父组件更新完成 componentDidUpdate子组件最后一次更新：6、父组件是否需要更新 shouldComponentUpdate7、父组件将要更新 componentWillUpdate4、render(父组件挂载)9、子组件将要接收到新属性SubCounter componentWillReceiveProps10、子组件是否需要更新 shouldComponentUpdate8、父组件更新完成 componentDidUpdate一般我们通过shouldComponentUpdate()函数来优化性能：一个React项目需要更新一个小组件时，很可能需要父组件更新自己的状态。而一个父组件的重新更新会造成它旗下所有的子组件重新执行render()方法，形成新的虚拟DOM，再用diff算法对新旧虚拟DOM进行结构和属性的比较，决定组件是否需要重新渲染无疑这样的操作会造成很多的性能浪费，所以我们开发者可以根据项目的业务逻辑，在shouldComponentUpdate()中加入条件判断，从而优化性能例如React中的就提供了一个PureComponent的类，当我们的组件继承于它时，组件更新时就会默认先比较新旧属性和状态，从而决定组件是否更新。值得注意的是，PureComponent进行的是浅比较，所以组件状态或属性改变时，都需要返回一个新的对象或数组import React from ‘react’import ReactDOM from ‘react-dom’;class SubCounter extends React.Component { componentWillReceiveProps() { console.log(‘9、子组件将要接收到新属性SubCounter componentWillReceiveProps’); } shouldComponentUpdate(newProps, newState) { console.log(‘10、子组件是否需要更新 shouldComponentUpdate’); if (newProps.number < 5) return true; return false } componentWillUpdate() { console.log(‘11、子组件将要更新 componentWillUpdate’); } componentDidUpdate() { console.log(‘13、子组件更新完成 componentDidUpdate’); } componentWillUnmount() { console.log(‘14、子组件将卸载 componentWillUnmount’); } render() { console.log(‘12、子组件挂载中render’); return ( <p>{this.props.number}</p> ) }}class Counter extends React.Component { static defaultProps = { //1、加载默认属性 name: ‘sls’, age:23 }; constructor() { super(); //2、加载默认状态 this.state = {number: 0} } componentWillMount() { console.log(‘3、父组件挂载之前 componentWillMount’); } componentDidMount() { console.log(‘5、父组件挂载完成 componentDidMount’); } shouldComponentUpdate(newProps, newState) { console.log(‘6、父组件是否需要更新 shouldComponentUpdate’); if (newState.number<15) return true; return false } componentWillUpdate() { console.log(‘7、父组件将要更新 componentWillUpdate’); } componentDidUpdate() { console.log(‘8、父组件更新完成 componentDidUpdate’); } handleClick = () => { this.setState({ number: this.state.number + 1 }) }; render() { console.log(‘4、render(父组件挂载)’); return ( <div style={{margin:50}}> <p>{this.state.number}</p> <button onClick={this.handleClick}>+</button> {this.state.number<10?<SubCounter number={this.state.number}/>:null} </div> ) }}ReactDOM.render(<Counter/>, document.getElementById(‘root’));