lefecycle-Reactreact16生命周期前后A.初始化阶段：1.设置默认属性：staticdefaultProps={name:'sls',age:23,number:0};//orCounter.defaultProps={name:'sls'}2)设置属性检查`importPropTypesfrom'prop-types';`属性检查器，检查父组件传递给当前组件的类型staticpropTypes={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，则返回true；}else{返回错误；}}8。父组件会更新componentWillUpdate4，render（父组件挂载）9。子组件将接收新属性SubCountercomponentWillReceiveProps10。子组件是否需要更新shouldComponentUpdateshouldComponentUpdate(props,state){if(props.number<3){returntrue;}else{返回错误；}}11、子组件即将更新componentWillUpdate12、子组件正在挂载render13、子组件更新完成componentDidUpdate8、父组件更新完成componentDidUpdate子组件最后一次更新：6、父组件是否需要更新shouldComponentUpdate7.父组件将更新componentWillUpdate4。shouldComponentUpdate8，父组件更新完成componentDidUpdate通常我们使用shouldComponentUpdate()函数来优化性能：当一个React项目需要更新一个小组件时，很可能父组件需要更新自己的状态。一个父组件的重新更新会导致其所有子组件重新执行render()方法，形成一个新的虚拟DOM，然后使用diff算法比较新旧虚拟DOM的结构和属性判断组件是否需要重新渲染。这样的操作会造成很大的性能浪费，所以我们开发者可以根据项目的业务逻辑在shouldComponentUpdate()中加入条件判断来优化性能。例如，React提供了一个PureComponent类。当我们的组件继承使用时，当组件更新时，默认会比较新旧属性和状态来判断组件是否更新。值得注意的是，PureComponent进行的比较浅，因此当组件状态或属性发生变化时，需要返回一个新的对象或数组importReactfrom'react'importReactDOMfrom'react-dom';classSubCounterextendsReact.Component(newProps.number<5)返回真；returnfalse}componentWillUpdate(){console.log('11,子组件更新componentWillUpdate');}componentDidUpdate(){console.log('13,子组件更新完成componentDidUpdate');}componentWillUnmount(){console.log('14,子组件将卸载componentWillUnmount');}render(){console.log('12,子组件正在挂载渲染中');return(
{this.props.number}
)}}classCounterextendsReact.Component{staticdefaultProps={//1、加载默认属性name:'sls',age:23};构造函数（）{超级（）;//2。加载默认状态this.state={number:0}}componentWillMount(){console.log('3.componentWillMountbeforeparentcomponentmounted');}componentDidMount(){console.log('5.父组件挂载componentDidMount');}shouldComponentUpdate(newProps,newState){console.log('6.父组件是否需要更新shouldComponentUpdate');如果(newState.number<15)返回true；returnfalse}componentWillUpdate(){console.log('7,父组件会更新componentWillUpdate');}componentDidUpdate(){console.log('8、父组件更新完成componentDidUpdate');}handleClick=()=>{this.setState({number:this.state.number+1})};render(){console.log('4,render(父组件挂载)');返回({this.state.number}