React生命周期

Posted 2022-12-04 home-

有时百感交集，却又百口模辩，那些很远的事，仿佛就在昨天

React生命周期

React_生命周期_constructor 初始化
constructor:
1、当前生命周期函数的作用是用来做初始化工作的
    this的身上是没有props的如果必须使用通过super身上的参数
    在调用当前函数的时候必须在内部调用super,否则this的指向会发生错误

2、 当前生命周期函数可以用来定义当前组件所需要用到的一些状态值

3、 在constructor中如果需要使用props的时候需要在super中继承过来

React_生命周期_componentDidMount 挂载后
当前生命周期函数我们可以通过ref来获取真实的DOM结构(两种写法请查看ref那一页)

 一般情况下我们都会在当前生命周期函数中做ajax数据的请求
 为什么要在这里做?不在挂载前做
 因为挂载前在17.0中被废除了如果不被废除也可以做数据请求
 一般在客户端的时候会在挂载后做数据渲染主要也是为了防止挂载前进行阻塞导致页面渲染白屏
 因为ajax是异步的

React_生命周期_componentWillMount 挂载前、(可以做后端渲染)
componentWillMount:挂载前(传来的值在这里使用)只执行一次
1、当前生命周期函数可以用来接受外部的数据，将外部的数据转换成内部的数据
    在这个生命周期里面尽量不要使用setState
    因为当前生命周期执行完毕以后就会执行render

2、用来做最后数据最后的修改

3、当前生命周期函数在新版本中被废除掉了

将外部的数据转换成内部的数据是什么意思呢?看下面
class My extends React.Component 
constructor(props) 
    super(props)
    console.log(this.props)
    console.log("constructor")
     this.state=
         mss :""
     

componentWillMount()
    console.log(this.props)
    console.log("componentWillMount");
    this.state.mss = this.props.age

render() 
    console.log("render")
    return (
       <div>
            <h2>this.state.mss</h2>
        </div>
    )

componentDidMount()
    console.log("componentDidMount");
    
    


ReactDOM.render(<My age="12"></My>, document.querySelector("#app"))

React_生命周期_componenDidUpdate 数据更新完毕
1、数据更新完毕，获取到数据更新后最新的DOM结构,轮播图不轮播可以在这里面new轮播图
    注意if判断

2、当前生命周期函数中会接收2个参数  一是旧的props  一个是旧的state
    都已经更新完毕了所以值就变成旧的了

React_生命周期_componentWillUpdate 数据最后的更新处理
1、 当前生命周期函数用来做数据最后的更新处理

2、当前生命周期函数中有2个参数  一个是新的props  一个是新的state
通过参数修改因为数据现在是新的,例:newState.要更改数据的属性名
这个函数执行完后render函数就会自动执行

React_生命周期_componentWillReceiveProps 做外部数据的处理
主要用来监听外部数据发生改变的
1、当this.props发生改变的时候那么当前生命周期函数就会执行

2、当前生命周期函数中有一个参数  新的props

3、可以用来做外部数据的处理
this.state.当前内部状态属性名=newProps.外部状态要更改的属性名

React_生命周期_componentWillunmount 卸载
当前生命周期函数只会执行一次

一般情况下用来做事件的移除

React_生命周期_shouldComponentUpdate 性能优化
1、当前生命周期函数必须有一个返回值，如果返回true则继续执行下面的生命周期函数
    如果返回false则不会执行下面的生命周期函数

2、shouldComponentUpdate生命周期函数中我们可以做性能的优化
    如果说当前数据改变后没有必要进行render的渲染我们就可以return false  
    如果需要进行渲染则返回true  来减少不必要的渲染
    if( this.state.age !=  newState)
            return true
        else
            return false
        
    
3、当前生命周期函数中会有2个参数一个是新的props  一个是新的state

4、当前生命周期函数决定的是render函数是否渲染，而不是数据是否更新
    即使是返回的false同样更改数据只是render方法不进行渲染

在项目开过程中配合immutable一起使用        

React_生命周期_render 渲染
用来渲染而且必须要有返回值
1、当this.state/this.props发生改变的时候render函数就会执行

2、 render函数每次执行的时候都会将虚拟DOM在缓存中缓存一份，
    当下一次render函数执行的时候，会与缓存中的
    虚拟DOM进行对比(这种对比叫做diff算法) 将发生改变的虚拟DOM进行更新
    新旧两个虚拟DOM对比就是diff算法

1、render函数什么时候会执行?
当this.state/this.props发生改变的时候render函数就会执行


2、组件第一次执行的时候会执行哪些生命周期
constructor 初始化-->
componentWillmount 挂载前--->
render渲染 --->
componentDidMount 挂载后


3、哪些生命周期函数只会执行一次
constructor 初始化
componentWillMount 挂载前
componentDidMount 挂载后
componentWillUnmount 卸载


4、哪些生命周期函数会执行多次
render 渲染
componentWillReceiveProps 监听外部数据变化
shouldComponentUpdate 性能优化
componentWillUpdate 数据最后的更新处理
componentDidUpdate 数据更新完毕


5、你对shouldComponentUpdate的理解
用来做性能优化的记住那4点


6、当this.state/this.props发生改变的时候会执行哪些生命周期函数
    this.state
        shouldComponentUpdate 性能优化
     componentWillUpdate 数据最后的更新处理
        render 渲染
        componentDidUpdate 数据更新完毕


    this.props
        componentWillReceiveProps 监听外部数据变化
        shouldComponentUpdate 性能优化
        componentWillUpdate 数据最后的更新处理
        render 渲染
        componentDidUpdate 数据更新完毕


7、setState是用来干什么的除了更改数据外主要是为了让render函数执行