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. Fedora dnf配置

    1.在配置文件/etc/dnf/dnf.conf中加入: fastestmirror=true keepcache=true 这样下载安装软件就快多了. 2.dnf常用命令 检查并升级可用软件包: $ ...

  2. Excel催化剂开源第13波-VSTO开发之DataGridView控件几个小坑

    Excel催化剂内部大量使用了DataGridView,这其中有一些小坑,花了力气才解决的,在此给广大开发者作简单分享. 为何要使用DataGridView而不是其他控件如ListBox.ListVi ...

  3. [PTA] 数据结构与算法题目集 6-3 求链式表的表长

    Length( List L ){ int res=0; while(L!=NULL){ res++; L=L->Next; } return res; }

  4. [leetcode] 120. Triangle (Medium)

    原题 思路: dp,从下往上依次取得最小的,取到最上面的,就是一条最小的路径. class Solution { public: int minimumTotal(vector<vector&l ...

  5. 2019牛客多校第二场F-Partition problem(搜索+剪枝)

    Partition problem 题目传送门 解题思路 假设当前两队的对抗值为s,如果把红队中的一个人a分配到白队,s+= a对红队中所有人的对抗值,s-= a对白队中所有人的对抗值.所以我们可以先 ...

  6. JavaScript数组高性能去重解决方案

    在大多数的人眼里,数组去重是一个很简单的课题,很多人甚至熟练掌握了多种数组去重的方法,然而大多时候,我们却忽略了数组去重所消耗的时间资源.譬如我们在做前端性能优化的时候,又有多少人会考虑JavaScr ...

  7. Kafka学习(三)-------- Kafka核心之Cosumer

    了解了什么是kafka( https://www.cnblogs.com/tree1123/p/11226880.html)以后 学习核心api之消费者,kafka的消费者经过几次版本变化,特别容易混 ...

  8. List集合源码解读

    一:总述: 主要讲解3个集合 1.ArrayList: 底层是数组,线程不安全: 2.LinkedList: 底层是链表,线程不安全: 3.Vector    底层数据结构是数组.线程安全: 二:Ar ...

  9. 准备开始,选好第一个C#的封装库

    如今C#做工业图像处理和开发,最多资料和例子的就是Emgu.不过现在人家开始商业收费了,对于我们这些小企业就不是很好了.这里,我要介绍和推荐的是另外一个也同样牛逼的C#封装Opnecv的库,叫做Ope ...

  10. linux初学者-正则表达式

      在windows中,是没有办法批量处理文件的,但是在linux系统中,可以通过命令直接处理一系列文件,这些文件的处理就需要用到正则表达式.这同样可以应用与目录. 1.处理多个文件 正则表达式中批量 ...