react组件生命周期理解

Rango 发布于2019-08-21 11:53 / 1808人阅读

摘要：当组件要被卸载之前，框架会调用函数，之后就会卸载组件。开发者可以在这几个生命周期函数中定义一些你想组件变化的操作或者做一些数据的改变。

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

下面详细解释一下上图。首先，在组件初始渲染之前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实现对数据批量处理反应迅速的基础，建议朋友们有必要去理解透彻。之后的文章中，本人也会进行介绍，大家共勉交流一下，嘻嘻~

海外云主机服务器托管生命周期软件生命周期生命周期理论页面生命周期

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87247.html

React.js 小书 Lesson20 - 更新阶段的组件生命周期

摘要：所以对于组件更新阶段的组件生命周期，我们简单提及并且提供一些资料给大家。这里为了知识的完整，补充关于更新阶段的组件生命周期你可以通过这个方法控制组件是否重新渲染。大家对这更新阶段的生命周期比较感兴趣的话可以查看官网文档。 React.js 小书 Lesson20 - 更新阶段的组件生命周期本文作者：胡子大哈本文原文：http://huziketang.com/books/react...

Yumenokanata 2019-08-21 17:34 评论0 收藏0
简单谈谈我理解的React组件生命周期

摘要：用处你在组建中所有的移除所有组建中的监听生命周期父子组件渲染顺序父组件代码引入子组件子组件代码浏览器中的执行结果如下图结论所以在的组件挂载及过程中，最底层的子组件是最先完成挂载及更新的。原文首发在我的个人博客：欢迎点此访问我的个人博客学了一段时间的react了，现在对自己学习的react的生命周期做一个简单总结（如有错误请留言指正，谢谢） react一共有如下几个生命周期函数 c...

lowett 2019-08-26 11:36 评论0 收藏0
React的生命周期到底是怎么一回事？

摘要：在中，组件基本由三个部分组成属性状态以及生命周期方法。在生命周期中是必须的，是渲染组件用的。返回就是紧接着以下的生命周期函数返回表示组件不需要重新渲染，不再执行任何生命周期函数包括。生命周期流程图原文地址尽量全面详细的整理一下React的生命周期中的知识点。组件组件是独立的封装的可以复用的一个小部件，它是React的核心思想之一。通过划分组件，可以将一个页面划分成独立的多个可复用...

sutaking 2019-08-22 11:08 评论0 收藏0
React16 生命周期理解

摘要：完整生命周期初始化参数第一次渲染当父组件向子组件传入发生改变后，依次调用子组件更新渲染当组件自身发生变化后组件再次更新渲染当组件卸载生命周期详解此处请求接口数据子组件获得新时触发，作用是在子组件再次渲染前，更新子组件自身的，之后会触发接受的完整生命周期 constructor(props) // 初始化参数 componentWillMount() render() // 第一次...

Flands 2019-08-23 14:38 评论0 收藏0
浅析 React 生命周期

摘要：在使用组件的进行组件实例化时，得到的便是其返回值。也就是说，如果其子组件的或发生改变时，只会取决于那个组件的方法的返回值。文章为本人原创，原文见本人个博浅析生命周期一浅析生命周期二 Overview 最近常有学习React相关的技术，写了几个React的小Demo，使用 React/Express 技术栈。实在太小，羞于拿出来细说。React 的确是一个值得追随的技术。但React体系...

lansheng228 2019-08-20 14:15 评论0 收藏0