【React】React入门--生命周期

简介: React入门--生命周期

React生命周期

react生命周期分为三个阶段—初始化阶段、运行中阶段、销毁阶段

react旧生命周期流程图如下:

71b7c1b11180c928026f7332a05ec64.png

初始化阶段

  • componentWillMount: 组件将要挂载,初始化数据的作用,只调用一次 , render之前最后一次修改状态的机会(不安全)
  • render:挂载组件,只能访问this.props和this.state,不允许修改状态和DOM输出
  • componentDidMount: 组件挂载完成,成功render并渲染完成真实DOM之后触发,可以修改DOM可以用于数据请求axios,订阅函数调用,给予创建的dom进行初始化,开启定时器
UNSAFE_componentWillMount(){
        console.log("第一次将要挂载",this.state.name,document.getElementById('myname').innerHTML);
// 第一次上树前的最后一次修改状态机会
        this.setState({
            name:'Kerwin'
        })
        //初始化数据的作用
    }
    componentDidMount(){
        console.log('第一次已经挂载',document.getElementById('myname').innerHTML);
        // 数据请求axios
        // 订阅函数调用
        // setInternal
        //基于创建的dom进行 初始化...BetterScoll
    }

运行中阶段

  • componentWillUpdate: 更新前的数据状态(不安全),不能修改属性和状态
  • componentDidUpdate:可以修改Dom,每次更新都会执行一次 含有两个属性:prevProps:旧的属性,prevState:旧的状态
  • render:组件更新 shouldComponentUpdate: 决定是否进行更新:return true:应该更新,return false:阻止更新 含有两个参数:nextProps:新属性,nextState:新状态
  • componentWillReceiveProps: 最先获得父组件传来的属性,父组件一修改便会触发(非首次)

componentWillUpdate和componentDidUpdate使用

//   不安全
  UNSAFE_componentWillUpdate(){
    console.log("componentWillUpdate",document.getElementById('myname').innerHTML);
  }
// 每次更新都会执行一次
  componentDidUpdate(prevProps,prevState){   //prevProps:老的属性
    console.log("componentDidUpdate",document.getElementById('myname').innerHTML);
    // 更新后,想要获取dom节点,更新
    new BScroll('#wrapper')
    console.log(prevProps,prevState);
    //进行判断,只调用一次
    if(prevState.list.length === 0){
        new BScroll("#wrapper")
    }
  }

shouldComponentUpdate的使用:

shouldComponentUpdate(nextProps,nextState){
    // return true; //应该更新
    // return false;  //组织更新
    // 老状态:this.state;新状态:nextState;新属性:nextProps
    // 通过状态的字符串是否一样来判断
    if(JSON.stringify(this.state) !== JSON.stringify(nextState)){
        return true;
    } else{
        return false;
    }
  }

componentWillReceiveProps的使用:

UNSAFE_componentWillReceiveProps(nextProps){
        console.log("componentWillReceiveProps",
        this.props.text,nextProps);
        // 最先获得父组件传来的属性,可以利用属性进行Ajax或逻辑处理
        // 将属性转化为孩子自己的状态
        this.setState({
            title:nextProps.text
        })
    }

销毁阶段

componentWillUnmount: 再删除组件之前进行清理作用,如清除挂载的定时器和事件监听器

componentDidMount(){
        window.onresize=()=>{
            console.log("resize");
        }
        this.timer = setInterval(()=>{
            console.log(1);
        },1000)
    }
//进行销毁
    componentWillUnmount(){
        console.log("componentWillUNMount");
        //取消监听事件
        window.onresize=null
  //清除定时器
        clearInterval(this.timer)
    }

老生命周期的问题

  • componentWillMount 在ssr(服务器渲染)中这个方法将会被多次调用,所以会重复触发多遍,同时在这里如果绑定事件,将无法解绑,导致内存泄漏,变得不够安全高效逐步废弃。
  • componentWillReceiveProps外部组件多次频繁更新传入多次不同的props,会导致不必要的异步请求
  • componetwilupdate,更新前记录DOM状态,可能会做一些处理,与componentDidUpdate相隔时间如果过长,会导致状态不太信

新生命周期代替

新生命周期流程图:

bffeae6fab15e561ed09df9611ccc82.png

static getDerivedStateFromProps :从props得到一个派生状态,第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子),返回一个对象作为新的state,返回null则说明不需要在这里更新state

// 适用于初始化和后续更新
    static getDerivedStateFromProps(nextProps,nextState){
        console.log('getDerivedStateFromProps',nextState);
        return {
            myname:nextState.myname
        }
    }

getSnapshotBeforeUpdate:在组件更新之前获取快照,即记录更新前的数据和状态,返回的值作为componentDidUpdate的第三个参数

componentDidUpdate = (prevProps, prevState,value) => {
  console.log("componentDidUpdate",value);  //value:100
}
getSnapshotBeforeUpdate(){
    console.log('getSnapshotBeforeUpdate');
    return 100
}

性能优化的方案

shouldComponentUpdate

控制组件自身或者子组件是否需要更新,尤其在子组件非常多的情况下,需要进行优化

PureComponent

PureComponent会帮你比较新props跟旧的props,新的state和老的state(值相等,或者对象含有相同的属性、且属性值相等),决定shouldcomponentUpdate返回true或者false,从而决定要不要呼叫render function。

import React, { PureComponent } from 'react'
export default class App extends PureComponent {
}

注意: 如果你的state或 props『永远都会变』,那 PureComponent并不会比较快,因为shallowEqual 也需要花时间。

重要的勾子

  • render:初始化渲染或更新渲染调用
  • componentDidMount:开启监听,发送axios请求
  • componentWillUnmount:做一些收尾工作,如清理定时器和事件监听器

即将废弃的勾子

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

注:使用时会出现警告,需要加上UNSAFE_前缀才能使用,以后可能被弃用

希望能够对学习react的小伙伴们有所帮助,期待你们的支持哦✨✨✨


目录
相关文章
|
2月前
|
前端开发 JavaScript
React 组件生命周期
React 组件生命周期
30 0
|
27天前
|
前端开发 JavaScript
react 组件的生命周期
React组件的生命周期包括从创建到销毁的各个阶段,如挂载(mounting)、更新(updating)和卸载(unmounting)。每个阶段都有特定的方法,用于控制组件的行为和状态,确保高效、有序地渲染和管理UI。
|
1月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
73 10
|
2月前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
3月前
|
移动开发 前端开发 JavaScript
构建高效跨平台移动应用:React Native入门指南
【8月更文挑战第47天】在移动开发领域,React Native凭借其跨平台特性和高效的开发模式赢得了开发者的青睐。本文将通过一个简易的待办事项应用实例,带领读者快速入门React Native,并展示如何利用JavaScript和React框架构建具有原生性能的应用。我们将探讨环境配置、界面布局、状态管理和数据流,以及如何打包和发布您的应用。准备好,让我们开始React Native之旅!
71 20
|
3月前
|
前端开发 JavaScript
React技术栈-React UI之ant-design使用入门
关于React技术栈中使用ant-design库的入门教程,包括了创建React应用、搭建开发环境、配置按需加载、编写和运行代码的步骤,以及遇到错误的解决方法。
45 2
React技术栈-React UI之ant-design使用入门
|
3月前
|
前端开发 JavaScript 开发者
介绍一下React生命周期
介绍一下React生命周期
105 9
|
2月前
|
存储 前端开发 JavaScript
深入理解React组件的生命周期与Hooks
【10月更文挑战第7天】深入理解React组件的生命周期与Hooks
104 0
|
3月前
|
前端开发 API UED
React组件生命周期详解
【9月更文挑战第4天】在React应用开发中,掌握组件生命周期对于管理状态和属性至关重要,并能有效提升应用性能。本文详细介绍了React组件生命周期的三个阶段:挂载、更新和卸载,并通过代码示例展示了如何避免状态更新导致的死循环及优化网络请求等问题,帮助开发者构建更高效、可维护的应用。
86 2
|
4月前
|
前端开发 JavaScript
React 组件生命周期方法详解
【8月更文挑战第30天】
51 5