REACT(react)系列组件生命周期钩子函数(详细分解)！！！

REACT(react)
生命周期图解

• static defaultProps 设置属性的默认值
  • 当子组建中的属性未能从父组件内获取到值的时候启用该方法中的默认值

	static defaultProps={
		name:'陈浩杰',
        age:21,
        ary:[1,2,3,4,5,6],
        obj:{a:12,b:13,c:6},
	}

• static propTypes 设置属性的类型
  • react 中的该方法等价于 vue 中的 props:{default:{age:Number}},
  • 对所传输的数据进行数据类型的限制

import MyPropTypes from 'prop-types' 
	static propTypes={
		name:MyPropTypes.oneOfType([
            MyPropTypes.string,MyPropTypes.number,
            // 必传 而且还需要数据类型是字符串或者是数字
        ]),
        age:MyPropTypes.number.isRequired,// 必传 而且还需要数据类型是数字
        ary:MyPropTypes.array,// 必传 而且还需要数据类型是数组
        obj:MyPropTypes.object，// 必传 而且还需要数据类型是对象
	} 

• constructor() 是ES6对类的默认方法，通过 new 命令生成对象实例时自动调用该方法。并且，该方法是类中必须有的，如果没有显示定义，则会默认添加空的constructor( )方法。
  • 在class方法中，super() 是使用 extends 关键字来实现的继承。子类 必须 在 constructor( )调用 super( )方法，否则新建实例时会报错。

constructor(){
	super()
}

• componentWillMount() 在组件挂载之前会触发该函数且全局范围内只触发一次,在constructor()执行之后.可以操作数据,不可以操作dom(相当于 vue 中的 created)

    componentWillMount(){} 

• render() 首次执行渲染组件挂载到页面 ,render是一个React组件必须定义的生命周期，用来渲染dom。
  • ⚠️不要在render里面修改state，会触发死循环导致栈溢出。
  • render必须返回reactDom

    render(){}  

• componentDidMount()在组件挂载之后会触发该函数且全局范围内只触发一次。可以在这里使用refs，获取真实dom元素。
  • 该钩子内也可以发起异步请求，并在异步请求中可以进行setState。

	componentDidMount(){} // vue mounted

• componentWillReceiveProps(nextProps) 在 render() 首次执行时不会被调用，然而一旦数据更新页面需要重新渲染，则会造成 render() 再次执行，子组件的这个生命周期函数就会在 render 再次执行之前被触发
  • 在该钩子内可以通过参数nextProps获取变化后的props参数，通过this.props获取变化前的props。该生命周期内可以进行setState。

	componentWillReceiveProps(nextProps){
        console.log(nextProps);
        console.log(this.props);
    }

• shouldComponentUpdate(nextProps,nextState) 是一个提高代码性能的一个钩子函数
  • 检测组件内的变化 可以用作页面性能的优化(默认值为true)
  • 询问组件是否需要更新的一个钩子函数，判断数据是否需要重新渲染，返回一个布尔值。默认的返回值是true，需要重新render()。若如果返回值是false则不触发渲染,利用这个生命周期函数可以强制关闭不需要更新的子组件来提升渲染性能。
• nextProps：更新后的属性
• nextState：更新后的状态
• 不管是状态更新还是属性更新 都会触发该函数

	shouldComponentUpdate(nextProps,nextState){
        console.log(nextProps);
        console.log(nextState);
        console.log(this);
        return false
    }

• componentWillUpdate() 该钩子函数在组件接收到新的props或者state之后，更新 render() 再次执行之前，会触发。在 render() 首次时不会被触发(相当于 vue 中的 beforeUpdate)

	componentWillUpdate(){
        // 再重新 render执行之前会触发该函数
        // 相当于 vue的 beforeUpdate
    }

• render() 接收到新的props或者state之后，再次执行渲染组件挂载到页面，再次渲染dom。

    render(){}  

• componentDidUpdate() 该钩子函数在组件接收到新的props或者state之后，更新 render() 再次执行之后，会触发。在 render() 首次时不会被触发(相当于 vue 中的 updateud)

    componentDidUpdate(){
        // 再重新 render执行之后会触发该函数
        // 相当于 vue的 updated
    }

• componentWillUnmount() 该钩子函数在组件从 DOM 中移除，将要销毁的时候，会触发。(相当于 vue 中的 beforeDestroy)

	componentWillUnmount(){}