ES6 生命周期图解



很多文章里的图解,第一步是 getDefaultProps , 第二步是 getinitialstate ,这是 ES5 的写法; 实际上ES6 中 getinitialstate 是不会再执行的,初始化state都是在 constructor中完成;

强制刷新

某些情况下,可能想手动触发刷新/强制刷新, 使用下面方法:

this.forceUpdate()

优化性能

实现 shouldComponentUpdate 方法,满足某些条件下,返回 false, 以减少渲染次数,以便达到优化性能;

关于 PureComponent 和 Component

PureComponent 就是内部自己实现了 shouldComponentUpdate方法,里面会判断 props,state改变后才会返回true,重新渲染。

注意这里比较props/state是浅比较,有可能会判断不准。假如 state 里有个数组,这个数组某个元素改变了,浅比较这个state是没有改变的,就不会重新渲染。

解决办法:使用 immutable.js;或者简单点自己重载 shouldComponentUpdate 方法,自己定义比较规则, 返回true/false

React Native 生命周期及相关方法小技巧使用的更多相关文章

  1. React Native底|顶部导航使用小技巧

    导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNati ...

  2. React Native顶|底部导航使用小技巧

    导航一直是App开发中比较重要的一个组件,ReactNative提供了两种导航组件供我们使用,分别是:NavigatorIOS和Navigator,但是前者只能用于iOS平台,后者在ReactNati ...

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

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

  4. React组件生命周期小结

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

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

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

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

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

  7. React的生命周期

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

  8. React之生命周期

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

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

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

随机推荐

  1. 实现一个代码自动生成(一):模板引擎Freemarker

    目录 前言 模板引擎FreeMarker 前言 在现在的开发当中,代码生成已经是必不可少的一个功能,每个公司都会有自己的一套定制的项目骨架,而实现代码自动生成,模板引擎是必不可少的,所以在这篇博客中, ...

  2. [leetcode] 7. Reverse Integer (easy)

    原题 水题 唯一注意的点就是数字溢出 class Solution { public: int reverse(int x) { long long MAX = ((long long)1 <& ...

  3. linux中type 、file、stat三者的区别

    1.type 用来查看命令类型,以区别是内部命令还是外部命令 示例:[root@localhost ~]# type cd cd 是 shell 内嵌    [root@localhost ~]# t ...

  4. tar 命令详解(持续更新)

    可以用man tar查看tar命令使用的权威解释 Main operation mode: -c: 建立压缩档案 -r:向压缩归档文件末尾追加文件 -t:查看内容 -u:更新原压缩包中的文件 -x:解 ...

  5. 《C# 语言学习笔记》——C# 简介

    1 什么是.NET Framework .NET Framework 是Microsoft为开发应用程序而创建的一个富有革命性的新平台. 1.1 .NET Framework 的内容 .NET Fra ...

  6. vue-cli - webpack 打包兼容 360 浏览器和 IE 浏览器

    index.html增加一行代码 <head> <meta charset="utf-8"> <meta name="viewport&qu ...

  7. Java NIO DirectByteBuffer 的使用与研究

    一.结论 DirectByteBuffer 与 ByteBuffer 最大区别就在于缓冲区内存管理的方式.ByteBuffer使用的是堆内存,DirectByteBuffer 使用的是堆外内存,堆外内 ...

  8. 机器学习经典分类算法 —— k-近邻算法(附python实现代码及数据集)

    目录 工作原理 python实现 算法实战 约会对象好感度预测 故事背景 准备数据:从文本文件中解析数据 分析数据:使用Matplotlib创建散点图 准备数据:归一化数值 测试算法:作为完整程序验证 ...

  9. 后端开发实践系列之二——领域驱动设计(DDD)编码实践

    Martin Fowler在<企业应用架构模式>一书中写道: I found this(business logic) a curious term because there are f ...

  10. Go“一个包含nil指针的接口不是nil接口”踩坑

    最近在项目中踩了一个深坑--"Golang中一个包含nil指针的接口不是nil接口",总结下分享出来,如果你不是很理解这句话,那推荐认真看下下面的示例代码,避免以后写代码时踩坑. ...