react组件生命周期理解

算法映星使
• 阅读 1932

react组件有两个状态,一个是渲染状态,一个是卸载状态,而渲染状态又分为初始渲染状态(也可以说是创建状态)和重新渲染状态(也可以说是存在状态,说明组件一直存在,会发生多次重新渲染)。这三个状态下又会产生一系列的生命周期函数,开发人员一般只需要了解其中五个主要的生命周期函数:componentWillMount、componentDidMount、componentWillUpdate、componentDidUpdate、componentWillUnmount。一下是图解:

react组件生命周期理解

下面详细解释一下上图。首先,在组件初始渲染之前react native框架会调用componentWillMount函数,在组件生命周期中,它只会被执行一次(注:如果组件需要从本地存储中获取数据,可以在该函数中执行获取本地存储数据操作);执行完componentWillMount函数之后,组件就会执行初始渲染;当初始渲染完成后,react native框架会立即调用componentDidMount函数,同样的,该函数在生命周期中也只会执行一次(注:组件可以在该函数中执行从网络中获取数据操作);这两步之后,组件就初始渲染出来了;当组件从父组件中接收到新的prop、组件的prop在父组件中被更改、或者组件的state变量改变时,只要这三个有发生一种,react native框架就会触发diff算法计算该组件是否有改动,如果有改动,组件就会被重新渲染,重新渲染之前,react native框架会调用componentWillUpdate函数(注:该函数中不能对组件状态进行更改);之后,组件便会执行重新渲染;重新渲染完成之后,react native框架会调用componentDidUpdate函数;重新渲染这个状态会被多次触发,所以这两个函数也会被执行多次。当组件要被卸载之前,react native框架会调用componentWillUnMount函数,之后就会卸载组件。
开发者可以在这几个生命周期函数中定义一些你想组件变化的操作或者做一些数据的改变。

最后提醒一点,diff算法是react native用于实现虚拟dom机制实现的一种算法,虚拟dom机制是react native实现对数据批量处理反应迅速的基础,建议朋友们有必要去理解透彻。之后的文章中,本人也会进行介绍,大家共勉交流一下,嘻嘻~

点赞
收藏
评论区
推荐文章
海军 海军
4年前
React Hook丨用好这9个钩子,所向披靡
ReactHook指南什么是Hook?Hook是React16.8的新增特性。它可以让你在不编写class的情况下使用state以及其他的React特性。Hook本质上就是一个函数,它简洁了组件,有自己的状态管理,生命周期管理,状态共享。useStateuseEffectuseContextus
Souleigh ✨ Souleigh ✨
4年前
React - 认识生命周期
这周开始学习React的生命周期。React的生命周期从广义上分为三个阶段:挂载、渲染、卸载.挂载卸载过程constructor()componentWillMount()componentDidMount()componentWillUnmount()更新过程componentWillRece
Alex799 Alex799
4年前
Vue进阶(幺肆拐):利用Vue中keep-alive快速实现页面缓存
引入场景有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件信息可以缓存下来,维持当前的状态。这时候就可以用到keepalive组件。官网解释:<keepalive包裹动
Easter79 Easter79
3年前
vue 生命周期的理解(created && mouted的区别)
生命周期先上图(笑skr个人~~)!(https://oscimg.oschina.net/oscnet/6d899c3576884ee9db73c0263ac9f4027e0.png)什么是生命周期Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我
爱丽丝13 爱丽丝13
4年前
快速了解 React Hooks 原理
为了保证的可读性,本文采用意译而非直译。我们大部分React类组件可以保存状态,而函数组件不能?并且类组件具有生命周期,而函数组件却不能?React早期版本,类组件可以通过继承PureComponent来优化一些不必要的渲染,相对于函数组件,React官网没有提供对应的方法来缓存函数组件以减少一些不必要的渲染,直接16.6出来的Rea
Souleigh ✨ Souleigh ✨
4年前
React Hooks 快速上手
ReactHook快速上手一、Hook简介1.1Hook历史在ReactHook出现之前的版本中,组件主要分为两种:函数式组件和类组件。其中,函数式组件通常只考虑负责UI的渲染,没有自身的状态也没有业务逻辑代码,是一个纯函数。而类组件则不同,类组件有自己的内部
Stella981 Stella981
3年前
DirectX3D设备丢失(lost device)的处理(二)
一个Microsoft?Direct3D?可以处于操作状态或丢失状态。操作状态是设备的正常状态,设备按预期运行并present所有渲染结果。当事件发生时,如全屏应用程序失去键盘输入焦点,设备就转变到丢失状态,这会导致渲染无法进行。丢失状态表现为所有渲染操作的悄然失败,这意味着即使渲染操作失败所有的渲染方法仍可以返回成功码。在这种情况下,IDirect3DD
Stella981 Stella981
3年前
React.js 时间组件 + 组件生命周期(更新模拟)
React是用于构建用户界面的JavaScript库,React组件使用一个名为render()的方法,接收数据作为输入,输出页面中对应展示的内容。React除了可以使用外部传入的数据以外(通过this.props访问传入数据),组件还可以拥有其内部的状态数据(通过this.state访问状态数据)。当组件的状态
Stella981 Stella981
3年前
React 第一个小游戏(井字棋)知识关键点
1、React是一个声明式,高效且灵活的用于构建用户界面的JavaScript库通过使用组件来告诉React我们希望在屏幕上看到什么。当数据发生变化时,React会高效的更新并重新渲染我们的组件2、render返回了一个React元素,这是一种对渲染内容的轻量级描述。大多数的React开发者使用了一种名为"JSX"的特
React memo的原理、实践与思考
前言在react中,对一个组件进行点击事件等操作时,该组件以及该组件的子组件都会重新渲染。避免组件的重新渲染一般可以借助React.memo、useCallback等来实现。什么是memomemo原理memo类似于class中pureComponent的特