react基础学习二——生命周期

2023-03-12 22:26:01

生命周期mount：

mounting装载创建

update更新

unmounting卸载

错误捕获

注意点：生命周期函数的作用，什么之后用

　　　　只有类式组件有生命周期，函数式组件没有生命周期

mounting装载创建：——

　　Construct——只执行一次

　　　　作用：初始化实例

　　static getDerivedStateFromProps(prop,state)　　

　　　　有返回值，当返回值为null时，state不变；有值时，将返回对象中的属性和state的属性对应，并将state做相应修改；
　　　　作用：在render之前，可以改变state的机会，不改变，返回null

static getDerivedStateFromProps(props,state){

    return null;

  }

　　Render
　　　　作用：生产新的虚拟DOM

　　componentDidUpdate(p,s,shot)——只执行一次
　　　　作用：虚拟DOM变成真实的DOM，可以在页面看到视图，组件创建完成

　　　　用处：可以获取真实的DOM节点

componentDidMount(){

    console.log(document.getElementById('root'))

}

update更新：——

　　static getDerivedStateFromProps(prop,state)
　　　　用处：父组件更新，（已挂载）子组件页更新，在子组件中更新state*****

　　　　父组件修改，因为state只在constructor的时候赋值，所以组件更新的时候，子组件的state是不修改的，可以通过这个静态函数修改state

static getDerivedStateFromProps(props,state){

    return {

      number: props.number

    }

  }

　　shouldComponentUpdate(nextProps,nextState)
　　　　作用：用于优化性能。如果是false就不需要走render，不用去重新计算

　　　　用处：返回bool,true——组件正常更新流程；false——后面的生命周期函数不会执行，界面不更新

　　Render
　　　　作用：

　　getSnapshotBeforeUpdate(prevProp,prevState)

　　　　必须有返回值，返回值不能为空；这个方法必须和componentDidUpdate一起使用。
　　　　作用：获取更新之前的快照，浏览器DOM结构还没有更新

　　　　用处：动画，浏览器大小，布局变化，元素宽高，位置。和原来的比较。之前滚动条的位置

　　componentDidUpdate(p,s,shot)
　　　　作用：更新完成之后，可以获取DOM，获取宽高

unmounting卸载：——

　　componentWillUnmount()——只执行一次
　　　　作用：

错误捕获：

　　compinentDidCatch(error,info)
　　　　作用：子组件生命周期出错，回退

流程图：

码农公寓