React+Immutable.js的心路历程

  这段时间做的项目开发中用的是React+Redux+ImmutableJs+Es6开发,总结了immutable.js的相关使用姿势:

  Immutable Data 顾名思义是指一旦被创造后,就不可以被改变的数据。可以通过使用Immutable Data,可以让我们更容易的去处理缓存、回退、数据变化检测等问题,简化我们的开发。

  我们知道 react.js很著名的就是它处理dom的做法,它是通过Virtual Dom来查看diff,然后再改动需要改动的Dom。但是有个问题当state更新时,如果数据没变,react也会去做Virtual Dom的diff,这就产生了浪费,其实这种情况其实很常见。

  当然React 做性能优化时还有一个避免重复渲染的大招,就是使用生命周期 shouldComponentUpdate(),但它默认返回 true,即始终会执行 render() 方法,然后做 Virtual Dom 比较,并得出是否需要做真实 Dom 更新。

  这个时候其实还有方案来解决这个问题,用PureRenderMixin,貌似也可以解决这个问题,在某些情况下进行性能加速。

import PureRenderMixin from ‘react-addons-pure-render-mixin‘;

class FooComponent extends React.Component {

    constructor(props) {

        super(props);

        this.shouldComponentUpdate =PureRenderMixin.shouldComponentUpdate.bind(this);

}

render() {
    return <div className={this.props.className}>foo</div>;
    }
}

  

  其实就是, 实现了 shouldComponentUpdate, 它对当前及下一步的 props 和 state 进行比较,并当相等时返回 false,不进行渲染

  看了下PureRenderMixin官方文档,This only shallowly compares the objects,Only mix into components which have simple props and state。

PureRenderMixin,它只是简单的浅比较,不适用于复杂的比较。

  顺着刚刚的这条思路走,我们可以在shouldComponentUpdate()内做判断,如果有props/state有变化,那么再进行render(),这个时候的问题就来了,你如何做比较,shallowly compare,达不到效果,deep compare则性能很差

  这个时候immutable.js来了,使用immutable.js可以解决这个问题。

  首先Immutable.js的拷贝,是当对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享。

import Immutable from ‘immutable‘;

const initialState = Immutable.fromJS({ data: null });

  

  当然可以用deep-copy做到这一点,但是差别在于性能。每次deep-copy都要把整个对象递归的复制一份。而Immutable的实现像链表,添加一个新结点把旧结点的父子关系转移到新结点上。

生成immutable对象后,然后再在生命周期shouldComponentUpdate做做判断

shouldComponentUpdate(nextProps) {

    return !this.props.situation.equals(nextProps.situation);

}

  对当前及下一步的 props 的immutable对象 进行比较,并当相等时返回 false,不进行渲染,只有为true的时候,才进行render()处理。

  react+immutable这样就可以大大提升react的性能。

时间: 2024-08-07 18:37:47

React+Immutable.js的心路历程的相关文章

学习JS的心路历程-参数的传递(下)

今天我们要来探讨JS到底是透过何种参数传递方式呢? 废话不多说,上示例!! 我们先声明原始型别和物件型别来看看两者是否会有不一样的差异: var myStr = 'Hola': var myObj = {name:'Ann'}: 再来,声明另一个变量去复制他们: var myStr = 'Hola': var myObj = {name:'Ann'}: var copyStr = myStr: var copyObj = myObj: 然后,去修改复制过的变量内容并印出所有作比较: var my

学习JS的心路历程-声明

变量 在程序中将一个值指定(assign)给一个符号式的容器(symbolic container),叫做一个变量(variable). 声明在JS中目前提供了三种声明方式: var 声明一个变量,可选择是否给予一个初始值. 作用范围(scope)于该函式之内:但是如果在函式外声明,其作用范围则为全局性(global). var price = 10: price = price * 2: console.log(price): let(ES6新增) 声明一个内存块范围(scope)内的本地变量

学习JS的心路历程-范围Scope和提升(Hoisting)

在上一篇提到了JS有三种声明变量的方式,分别是var.const及let,var和const let最大区别就是范围(scope)的限制.所以在这一篇我们会详谈何谓范围链及他们的复写优先级. 范围Scope 我们先来看一个例子: var globalVar = 'global': function scopeFun(){ globalVar ="change in scopeFun": console.log("1.",globalVar)://1.change i

学JS的心路历程 -非同步执行

JS是单线程的语言,也就是说同一时间只会执行一行程序,所以如果一段程序执行过久就会造成阻塞(blocking)的现象,必须等到它结束后才能执行下一段程序. 举个例子来说,如果我们今天要买便当,但是老板说要十分钟才会好,那难道我们这十分钟内都不能做任何事情吗? 当然不是,JS本身有非同步执行的功能,也是就说我们会先跟这个函式说,你先到旁边继续跑,好了在「回来呼叫」我,我先继续跑其他程序. 有没有看到熟悉的关键字「回来呼叫」,没错非同步执行基本上都是利用callback达成. 举个例子来说,我们今天

学JS的心路历程-JS支持面向对象?(一)

昨天在看Prototype看到JS支持面向对象,被前辈问到说那什么是面向对象?JS是面向对象语言吗? 便开始了一连串艰辛爬文过程,今天就来看一下两者有什么差异吧(rgwyjc)! 首先面向对象有三大特色,封装.继承及多态,这三个都是抽象的概念. 其中继承这个抽象的概念,是为了避免多个类别间重复定义了相同行为与实作.基本上有两种实作的方式可以实现,「原型继承」与「类别继承」. 这两者分别的特色如下. 类别继承classical inheritance: 可以从同一个类别(class)中实例多个物件

学JS的心路历程 - JS的Class

没错,你没有看错,虽然前面说JS是原型继承,但在ES6以后新增了class关键字!!! 不过底层实作仍然是以原型继承方式进行,所以基本上算是一个语法糖. 今天我们就来看一下如何使用吧! class 首先先来看一个最简单的class例子. class Person{ constructor(val){ this.age = val: } say(){ return"Hi!": } } var Jason = new Person(29): Jason instanceof Person:

学JS的心路历程-函式(五)箭头函式

箭头函式arrow function 为了能够以更简短的方式建立函式,ES6变推出了箭头函式. 用说明的可能会不太懂,我们先拿之前的数组排序例子来看: var arr = [2,1,6,12,3,77,100,4]: arr.sort(function(a,b){ return a - b: }): arr.sort()经过箭头函式的修改后: var arr = [2,1,6,12,3,77,100,4]: arr.sort((a,b)=> a-b): 是不是简洁许多了! 现在让我们一步一步来看

大话immutable.js

为啥要用immutable.js呢.毫不夸张的说.有了immutable.js(当然也有其他实现库)..才能将react的性能发挥到极致!要是各位看官用过一段时间的react,而没有用immutable那么本文非常适合你. 1,对于react的来说,如果父组建有多个子组建 想象一下这种场景,一个父组建下面一大堆子组建.然后呢,这个父组建re-render.是不是下面的子组建都得跟着re-render.可是很多子组建里面是冤枉的啊!!很多子组建的props 和 state 然而并没有改变啊!!虽然

优云老王的心路历程(一):那个做了五年的产品经理

前言: 老王的五年产品经理心路历程,对拍脑袋式产品决策的反思,及如何建立产品用户体验监控体系. 我从2003年"误入"运维软件行业,并在2010年开始做产品经理,5年来,我始终和优秀的团队在一起,从零开始创造了ITSM.CMDB产品,并得到了很多用户的认可.但不怕大家笑话,这5年中,我内心其实无比的纠结.面对产品的历次迭代,一方面要做出对用户有价值的功能,要说服开发团队去落地:另一方面担心产品过于复杂用户不买账,而对功能的裁剪却不敢轻易动刀.例如产品是站为用户领导设计还是为真正的用户操