React生命周期函数

2022-10-29 09:16:47

1.render

render是React生命周期函数中必须调用的方法,render主要负责页面的渲染,页面初始加载就会先调用render()一次。

当render被调用时,它会检查this.props和this.state的变化并且返回以下类型:

  • React元素。通过jsx创建,比如说<div />会被渲染为react节点,<MyComponent />会被渲染成自定义组件。无论是<div />还是<MyComponent />都时react元素
  • 数组或是Fregrament
  • Protals。可以将子元素渲染到任何DOM树中,一般默认将子元素渲染到DOM节点中最近的父节点。
  • 文本节点,字符串或是数值类型
  • 布尔型或者是Null。什么都不渲染

当shouldComponentUpdate 返回值为false时,默认页面不更新,便也不会调用render方法

2. constructor

constructor是react中的构造函数,一般如果没有数据初始化就不用单独调用,在其他语句之间必须写,super(props),props可以理解为形式参数。

props在react官方文档中的定义:“当 React 元素为用户自定义组件时,它会将 JSX 所接收的属性(attributes)以及子组件(children)转换为单个对象传递给组件,这个对象被称之为 “props”。”

在react中,构造函数仅处理以下两种情况

  • this.state()初始化
  • 为事件处理函数进行实时绑定,一般也不怎么用,将函数定义写为箭头函数,一般不存在this指向绑定的问题

3.componentDidMount

componentDidMout()当组件挂载完毕(插入到DOM)后,会被立即调用。常常将依赖于Dom节点初始化的事件写在这里,比如网络请求获取数据,写在这里很合适。这里也比较适合添加订阅模式,但是在componentWillUnMount要记得取消订阅。

4.componentDidUpdate

componentDidUpdate()会在更新完成后被立即调用,首次渲染不会执行此方法。

当组件完成更新后,可以在此处进行DOM操作。如果对更新前后进行了props的比较,可以在此处进行网络请求(当props没有发生变化就不会执行网络请求)

componentDidUpdate(prevProps){
    if(this.props.ID != prevProps){
        this.fetchDate(this.props.ID)
    }
}

注意:如果在componentDidUpdate()中使用this.setState()必须包裹在条件语句中,避免进入死循环。

5.componentWillUnmount

componentWillUnmount()会在组件销毁之前被调用。在此方法中主要进行清理工作,比如清除timer、取消订阅者模式(如果在componentDidMount()发布了订阅模式)或是取消网络请求

不常用的生命周期函数

1.getDrivedStateFromprops

2.getSnapshotBeforeUpdate

3.shouldComponentUpdate常用于性能优化

在面试中经常会被问到,该函数主要用于优化性能。防止render进行多次渲染,消耗性能。

  • 作者:BigData_0504
  • 原文链接:https://blog.csdn.net/weixin_42447364/article/details/125248458
    更新时间:2022-10-29 09:16:47