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. sql server 2382端口问题

    前两天在微软下载了官方示例数据库AdventureWorksDW2008R2及它的OLAP项目:AdventureWorks 2008R2 Analysis Services Project < ...

  2. Linux/Ubuntu正确卸载LXDE

    第一步: sudo apt-get remove lxde 第二步 sudo apt autoremove lxde

  3. [LeetCode] 6. ZigZag Conversion (Medium)

    原题链接 把字符串按照 ↓↗↓……的顺序,排列成一个 Z 形,返回 从左到右,按行读得的字符串. 思路: 建立一个二维数组来按行保存字符串. 按照 ↓↗↓……的方向进行对每一行加入字符. 太慢了这个解 ...

  4. C#多线程学习之如何操纵一个线程

    下面我们就动手来创建一个线程,使用Thread类创建线程时,只需提供线程入口即可.(线程入口使程序知道该让这个线程干什么事) 在C#中,线程入口是通过ThreadStart代理(delegate)来提 ...

  5. 小白学python-day05-作业(购物车程序)

    购物车需求: 开始输入工资,然后出现购买商品的相关信息,输入编号进行购买 价格>工资提示余额不足,价格<工资提示 成功加入购物车,并且显示余额 然后将购买环节进行循环,直到用户退出购买 然 ...

  6. 深挖Openstack Nova - Scheduler调度策略

    深挖Openstack Nova - Scheduler调度策略   一.  Scheduler的作用就是在创建实例(instance)时,为实例选择出合适的主机(host).这个过程分两步:过滤(F ...

  7. Swagger UI使用指南

    1:认识Swagger Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法 ...

  8. 二、PyTorch 入门实战—Variable(转)

    目录 一.概念 二.Variable的创建和使用 三.标量求导计算图 四.矩阵求导计算图 五.Variable放到GPU上执行 六.Variable转Numpy与Numpy转Variable 七.Va ...

  9. 【iOS】this class is not key value coding-compliant for the key ...

    一般此问题 都是由 interface build 与代码中 IBOutlet 的连接所引起的. 可能是在代码中对 IBOutlet 的名称进行了修改,导致 interface build 中的连接实 ...

  10. 使用Java 编写FTP中的长传文件和下载文件

    实现FTP文件上传与下载可以通过以下两种种方式实现(不知道还有没有其他方式,),分别为:1.通过JDK自带的API实现:2.通过Apache提供的API是实现. 第一种方法:通过JDK自带的API实现 ...