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. 【基础算法模拟+例题】-C++

    在漫长的刷题练习过程中,几乎所有稍微熟练一点的OIer都会,但是都几乎没有经过系统的学习,今天,我们就来讲讲模拟算法,也是为了复习emm. 定义? 定义?模拟还有什么定义吗? 那什么是模拟呢? 就是按 ...

  2. 个人永久性免费-Excel催化剂功能第103波-批量打开多文件或多链接

    有时简单的东西,却带来许多的便利,为了让大家可以记住并容易找寻到此功能,也将这么简单的功能归为一波,反正已经100+波了,也无需为了凑功能文章而故意罗列一些小功能带忽悠性地让人觉得很强大. 使用场景 ...

  3. SpringMVC面试题:什么是Servlet?

    一.什么是servlet? servlet是一个Java编写的程序,此程序是基于http协议的,在服务器端(如Tomcat)运行的,是按照servlet规范编写的一个Java类.客户端发送请求至服务器 ...

  4. CF356E - Xenia and String Problem

    也许更好的阅读体验 \(\mathcal{Description}\) 定义一种字符串\(gray\)串满足: 长度为奇数 正中间的字母只出现一次 左右两端相同,左右两端也是gray串 一个\(gra ...

  5. C语言编程入门之--第一章初识程序

    第一章 初识程序 导读:计算机程序无时不刻的影响着人类的生活,现代社会已经离不开程序,程序的作用如此巨大,那么程序到底是什么呢?本章主要讨论程序的概念,唤起读者对程序的兴趣,同时对C语言程序与其它语言 ...

  6. TestNG中group的用法

    TestNG中的组可以从多个类中筛选组属性相同的方法执行. 比如有两个类A和B,A中有1个方法a属于组1,B中有1个方法b也属于组1,那么我们可以通过配置TestNG文件实现把这两个类中都属于1组的方 ...

  7. java相关的一些资源

    http://www.cnblogs.com/best/p/5876559.html#_label1

  8. TCP加速机制是如何加速的?

    一.什么是TCP加速?   TCP加速就是在高时延链路提高吞吐量的一系列解决方案.   二.为什么需要对TCP进行加速?   1.传统的TCP拥塞控制算法并不适用于高时延.高误码的链路. 2.随着we ...

  9. vscode vue开发环境搭建

    以前仅了解过VUE但没有真正上手过,现在因为工作需要准备再近几个月里系统的学习一下这款超火的前端框架,希望大佬们指教. ---------------------------------------- ...

  10. 【iOS】iOS CocoaPods 整理

    github 上下载 Demo 时第一次遇到这个情况,当时有些不知所措,也没怎么在意,后来项目调整结构时正式见到了这个,并且自己去了解学习了. CocoaPods安装和使用教程 这篇文章写得很好!ma ...