React+Immutable.js的心路历程

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的性能。

以上是关于React+Immutable.js的心路历程的主要内容,如果未能解决你的问题,请参考以下文章

微信演出票前后端分离的心路历程以及开发环境的设计

心路历程

Immutable.js 与 React Typescript 结合

在 Immutable.js 中使用 React 的不可变助手

激活office2016的心路历程

使用 immutable.js 的 react shouldComponentUpdate 的最佳实现是啥