一、前言

问:

  什么是组件的生命周期?

  组件的生命周期中都包含哪些方法,各有什么作用?

  生命周期的方法都在什么时候调用?

生命周期: 顾名思义,一个主体从出生到死亡的整个过程

学习组件(React的基石、核心),必须先去了解他整个生命的流程,才能掌握组件的使用方法,否则盲目的使用,只是在一次次的碰运气而已。

二、正文

(一)、先分拆周期(分成3个模块)

组件装载(Mounting)、组件更新(Updating)、组件卸载(UnMounting)

(二)、再盗图

(三)、再详解生命周期的方法

1. 组件装载前:

方法: getDefaultProps()

作用: 为组件设置默认属性(props),es6使用defaultProps来设置默认属性

static defaultProps = {
name: '小明' ,
age: 22,
sex: '男'
}
//import PropTypes from 'prop-types' 规定属性类型
static propTypes = {
name: PropTypes.string.isRequired, //isRequired表示该属性必须传入
age: PropTypes.number,
sex: PropTypes.string
}

2. 组件装载阶段:

方法: getInitialState() 组件的构造方法

作用: 为组件初始化状态(state),es6使用constructor()来初始化,此时可获取this.props...

constructor(props){
super(props); //只要组件存在constructor,就必要要写super,否则this指向会错误
this.state = {
visible: false,
}
}

方法:componentWillMount()

作用: 组件装载前调用,以后组件更新不调用,整个生命周期只调用一次,此时可以修改state。

方法:render()

作用: react最重要的步骤,创建虚拟dom,进行diff算法,更新dom树都在此进行。此时就不能更改state了。

概念:

  虚拟DOM(Virtual Dom):组件并不是真正的DOM节点,而是存在于内存中的数据结构(此时即可叫虚拟节点),只有当它插入真正的文档之后,才变成真正的DOM

  diff算法: React的设计就是,所有DOM的变动都会先发生在虚拟DOM上,然后再将实际的DOM变动反映到真实的DOM的节点上。(实际的DOM变动就是通过diff算法来完成)

方法:componentDidMount()

作用: 组件装载之后调用,只调用一次。

3. 组件的更新阶段(此阶段会根据props和state的改变不断循环)

方法:componentWillReceiveProps(nextProps)

作用: 组件初始化时不调用,组件接受新的props时调用。

   即监听组件属性的变化,可以通过此方法来解决props改变组件却不重新渲染的问题

componentWillReceiveProps(nextProps){
this.setState({visible: nextProps.visible})
}

方法:shouldComponentUpdate(nextProps, nextState)

作用: react性能优化非常重要的一环。

组件接受新的state或者props时调用,我们可以设置在此对比前后两个props和state是否相同,

如果相同则返回false阻止更新,因为相同的属性状态一定会生成相同的dom树,这样就不需要创造新的dom树和旧的dom树进行diff算法对比,节省大量性能,尤其是在dom结构复杂的时候

方法:componentWillUpdate(nextProps, nextState)

作用: 组件初始化时不调用,只有在组件将要更新时才调用,此时可以修改state

方法:render()

作用: 组件props或state更新,重新渲染

方法:componentDidUpdate()

作用: 组件初始化时不调用,组件更新完成后调用,此时可以获取dom节点。

4. 组件的卸载阶段

方法:componentWillUnmount()

作用: 组件将要卸载时调用,一些事件监听和定时器需要在此时清除。

三、结语

加油!

react-native 生命周期的更多相关文章

  1. React Native 生命周期及相关方法小技巧使用

    ES6 生命周期图解 很多文章里的图解,第一步是 getDefaultProps , 第二步是 getinitialstate ,这是 ES5 的写法; 实际上ES6 中 getinitialstat ...

  2. react.js 生命周期componentDidUpdate的另类用法:防止页面过渡刷新

    场景:数据新增成功之后,需要返回原来的查询表,这时候的查询,需要使用react的生命周期:componentDidUpdate componentDidUpdate() 这个生命周期的作用是当prop ...

  3. React的生命周期

    我们先来看一张图,其实看完这张图基本就懂了,如果还不懂,请继续往下看. getDefaultProps 执行过一次后,被创建的类会有缓存,映射的值会存在this.props,前提是这个prop不是父组 ...

  4. 附实例!图解React的生命周期及执行顺序

    本文由云+社区发表 作者:前端林子 1.七个可选的生命周期 可以结合下图来看: (1) componentWillMount() 仅在render()方法前被调用一次,如果在该方法中调用了setSta ...

  5. React之生命周期

    哈喽,这是我的第一篇博客,请大家多多关照~ 追根溯源:What's the lifeCycle? 生命周期函数指在某一时刻组件会自动调用执行的函数: React生命周期概览: 接下来我们就着生命周期的 ...

  6. React组件生命周期小结

    React组件生命周期小结 下面所写的,只适合前端的React.(React也支持后端渲染,而且和前端有点小区别,不过我没用过.) 相关函数 简单地说,React Component通过其定义的几个函 ...

  7. React—组件生命周期详解

    React—组件生命周期详解 转自 明明的博客  http://blog.csdn.net/slandove/article/details/50748473 (非原创) 版权声明:转载请注明出处,欢 ...

  8. React 函数生命周期

      React 函数生命周期基础 1 ,概念 在组件创建.到加载到页面上运行.以及组件被销毁的过程中,总是伴随着各种各样的事件,这些在组件特定时期,触发的事件,统称为组件的生命周期:* 2,组件生命周 ...

  9. 帮你理清React的生命周期

    这是一个从印记中文 | react官方文档提取总结的,算是帮自己理清并且强化记忆React的生命周期,以便以后编写组件的时候能够有更清晰的思路.本文如有纰漏,欢迎指正 整体上来讲,React生命周期分 ...

  10. 七天接手react项目 —— 生命周期&受控和非受控组件&Dom 元素&Diffing 算法

    生命周期&受控和非受控组件&Dom 元素&Diffing 算法 生命周期 首先回忆一下 vue 中的生命周期: vue 对外提供了生命周期的钩子函数,允许我们在 vue 的各个 ...

随机推荐

  1. L187 DKK2

    Why can millions of hairs grow from our heads, and yet our palms手掌 and the soles of our feet are as ...

  2. 李氏滑动事件冲突解决方案 之 处理子ViewGroup的超棒方案

    父ViewGroup(CurView) 和 子 ViewGroup(ParentView) 滑动事件冲突解决方案 之 处理子ViewGroup的超棒方案: 子ViewGroup 以 SlipRelat ...

  3. IOS NSBundle的使用,注意mainBundle和Custom Bundle的区别

    1.[NSBundle mainBundle],文件夹其实是Group,如左侧的树形文件管理器 Build之后,文件直接就复制到了根目录下,于是读取的方法,应该是这样: NSString *earth ...

  4. linux vi常用操作

    1.基本操作 进入vi vi 或者 vim 进入一个文件或者新建一个文件 例如:vim 11.txt vi有3种模式 一般模式:刚进入时.按esc时. 编辑模式:按下字母[i, I, o, O, a, ...

  5. BZOJ4408: [Fjoi 2016]神秘数【主席树好题】

    Description 一个可重复数字集合S的神秘数定义为最小的不能被S的子集的和表示的正整数.例如S={1,1,1,4,13}, 1 = 1 2 = 1+1 3 = 1+1+1 4 = 4 5 = ...

  6. jenkins配置maven

    # 去官网下载maven # 安装 cd /opt wget http://mirrors.tuna.tsinghua.edu.cn/apache/maven/maven-3/3.5.3/binari ...

  7. slot的使用实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. hasura graphql pg 自定义函数的使用

      hasura graphql 的安装可以参考相关项目 创建函数 数据表创建 CREATE TABLE sql_function_table ( id SERIAL PRIMARY KEY, inp ...

  9. socket编程---UDP

    头文件 #include <sys/types.h> #include <sys/socket.h> 函数原型 int sendto (int s, const void *b ...

  10. box2d试用

    下载之后,修改里面的Testbed,加入一个footest,测试一下俺的冰箱能不能放到厨房里面