react的生命周期的钩子函数

react的钩子函数

1. 初始化

         constructor(props)                1. 通过super继承父类传递过来的属性                2. 初始化一个状态                3. 用来初始化绑定一个方法（非箭头函数，因为箭头函数的this是存在的），将this传递给这个方法            注意：                    1. 不写方法的触发（订阅）                    2. 不写具有副作用的代码（比如：计时器）               static getDerivedStateFromProps(nextProps,prevState)                    1. nextProps  将来的属性                    2. prevState   变化的值                 注意：17版本将来会使用     1. 数据请求      2.数据修改，返回值就是修改后的数据                componentWillMount      将被弃用                    1. 提供了一次数据修改的机会                    2. 进行数据请求     axios    fetch                注意：虽然我们这里可以进行数据请求和初始化数据的修改，但是官方建议我们写在componentDidMount中，可以减少副作用和订阅                    fetch('/data.json')                        .then(res=>res.json)                        .then(data=>{console.log(data)})                        .catch(error=>{ if(error) throw error })                render                    1. 计算this.prop   this.state                    2. 返回一种类型                            1. React元素，通过jsx创建，既可以是dom元素，也可以是用户自定义的组件                            2. 字符串或是数字，他们将会以文本节点形式渲染到dom中                            3. Portal,  react 16版本中提出的新的解决方案，可以使组件脱离父组件层级直接挂载在DOM树的任何位置                            4. null, 和布尔值，什么都不渲染                   3. render方法必须是一个纯函数，不应该改变state,也不能直接和浏览器进行交互，应该把事件放在其他生命周期函数中
               4. 如果shouldComponentUpdate返回false，那么，render不会被调用
               5. jsx->vdom 对象

            componentDidMount    组件挂在结束
                    1. 进行数据请求
                    2. 数据修改
                    3. 将render函数生成的vdom对象渲染成真实dom，然后挂载在id为root的容器中

1. 

运行中（更新阶段）

            componentWillReceiveProps(nextProps)
                1. 触发：属性发生改变，就会触发
                2. 这个钩子函数一定能监听到整个当前组件的属性变化，当前组件的路由也能监听到
                3. 应用场景：路由监听

            shouldComponentUpdate
                1. 决定组件是否更新
                        返回true,更新；返回false，不更新；默认返回true
                2. 这个钩子是react性能优化的关键钩子

            componentWillUpdate
                1. 组件即将更新，生成新的vdom
             
            componentDidUpdate    组件更新结束
                1. 数据请求
                2. DOM操作（第三方库的实例化）
                3. 接收getSnapshotBeforeUpdate(),第三个参数作为返回值
                使用fiber算法进行新旧dom比对，生成新的patch对象，再根据patch对象进行页面的渲染

1. 
销毁


        
            componentWillUnmount
                组件的销毁，有外部销毁和内部销毁，推荐使用外部销毁
                外部销毁使用开关
                内部销毁：ReactDom.unmountComponentAtNode(document.querySelector('#root')),必须是root
1. 

错误

        componentDidCatch(error,info)