React生命周期介绍

1.componentWillMount

表示组件将要挂载。
可以获取this 数据不能获取dom。
修改数据可以直接引起页面的改变。
修改数据不会触发运行中的生命周期

2.不在componentWillMount发起网络请求原因：

16.3版本同步渲染 ->异步渲染（fiber）
渲染前的生命周期可以能会被意外情况打断，生命周期会重新执行
这该生命周期放网络请求会导致请求的多次发出。

3.componentDidMount

表示组件挂载结束。
.有dom 有数据。
做网络请求做初始化的操作初始化swiper better-scroll。
数据的修改不能直接引起页面的改变需要通过setState。
数据的修改会触发运行中的生命期。

4.shouldComponentUpdate

表示组件的数据改变触发。
该生命周期控制数据修改是否要更新界面通过该生命周期减少无关的页面更新。
返回 true 更新。
返回 false 不更新
参数 props 和state 将要更新的数据。
this里的props和state 指的是还没更新的数据。

5.componentWillUpdate（传state参数）

表示组件更新之前触发。
数据 dom 元素都是更新之前，也是在render前。

6.componentDidUpdate

在更新操作结束之后触发
数据和dom 都是修改之后的
注意！小心在这里做数据跟新的操作

7.componentWillReceiveProps（传props参数）

监听props 发生改变
参数里是更新之后的数据
this 里是更新之前的数据

8.componentWillUnmount

表示组件销毁

React生命周期介绍相关推荐

react生命周期方法介绍
react生命周期 react生命周期主要包括三个阶段:初始化阶段.运行中阶段.销毁阶段 react在不同的生命周期会触发不同的钩子函数初始化阶段 getDefaultProps() 设置组件默认的 ...
react生命周期详细介绍
目录挂载:在组件实例被创建并插入到dom中时,生命周期调用顺序如下 constructor componentWillMount getDerivedStateFromProps render co ...
React生命周期理解
前言如果将React的生命周期比喻成一只蚂蚁爬过一根吊绳,那么这只蚂蚁从绳头爬到绳尾,就会依次触动不同的卡片挂钩.在React每一个生命周期中,也有类似卡片挂钩的存在,我们把它称之为'钩子函数'.那 ...
前端React教程第二课 React生命周期设计思想
02 为什么 React 16 要更改组件的生命周期?(上) React 生命周期已经是一个老生常谈的话题了,几乎没有哪一门 React 入门教材会省略对组件生命周期的介绍.然而,入门教材在设计上往往 ...
浅谈 React 生命周期
浅谈 React 生命周期浅谈 React 生命周期旧版的生命周期新版的生命周期详解各个生命周期函数 constructor getDerivedStateFromProps render c ...
深入react技术栈(5):React生命周期
我是歌谣放弃很容易但是坚持一定很酷微信搜一搜前端小歌谣 React生命周期挂载和卸载过程组件得挂载组件得卸载数据更新过程整体流程文章参考深入学习React技术栈
react学习(9)----react生命周期
react生命周期1.1.constructor() constructor()中完成了React数据的初始化,它接受两个参数 :props和context,当想在函数内部使用这两个参数时 ,需使用s ...
react生命周期（自己的方式理解）
react生命周期(自己的方式理解) react的生命周期函数有:挂载,渲染/更新,卸载首先要知道react生命周期最初始的要有哪些?最后生命中出现的又有哪些?我本人喜欢把react比作是一个人的一 ...
ASP.NET页生命周期介绍：阶段，事件及其他
ASP.NET页生命周期介绍:阶段,事件及其他本文概述了asp.net的页生命周期.在页生命周期的每个阶段中,页将引发可运行您自己的代码进行处理的事件. asp.net 页运行时,此页将经历一个生命 ...

React生命周期介绍

React生命周期介绍相关推荐

最新文章

热门文章