lefecycle-React
react16 之前后的生命周期
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、子组件是否需要更新 shouldComponentUpdate
shouldComponentUpdate(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’));