这会是一篇长文，我们首先会讨论使用 Immutable Data 的正当性；然后从功能上和性能上研究使用 Immutablejs 的技术的必要性，我猜你更关心的是是否值得使用 Immutablejs，这里先放上结论：推荐使用；但不一定必须使用。如果推荐指数最低一分最高十分的话，那么打六分。关于 Pure 无论是在 react 还是 redux 中，...
官网:https://immutable-js.github.io/immutable-js/ Immutable.js出自Facebook,是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构,使用结构共享。所有的更新操作都会返回新的值,但是在内部结构是共享的,来减少内存占用(和垃圾回收的失效)。 持久化数据结构:这里说的持久化是用来描述一种数据结构,...
Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。我们项目里用的是Facebook 工程师 Lee Byron 花费 3 年时间打造的 immutable.js 库。具体的API大家可以去官网学习。熟悉 React 的都知道，React 做性能优化时有一个避免重复渲染的...
// components/PureComponent.js import React from 'react'; import shallowEqual from 'react-pure-render/shallowEqual'; export default class PureComponent extends React.Component { shouldComponentUpdate(nextProps, nextState) { return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, next...
目前关于Immutable已经有一些类库,对于React应用,首选的是Immutable.js。 Immutable.js和React 首先需要明白的是React组件状态必须是一个原生JavaScript对象,而不能是一个Immutable对象,因为React的setState方法期望接受一个对象然后使用Object.assign方法将其与之前的状态对象合并。 class Component extends React.Component {...
由于Js中的对象是引用类型的,所以很多时候我们并不知道我们的对象在哪里被操作了什么,而在Redux中,因为Reducer是一个纯函数,每次返回的都是一个新的对象(重新生成对象占用时间及内存),再加上我们使用了connect这个高阶组件,官方文档中虽然说react-redux做了一些性能优化,但终究起来,react-redux只是对传入的参数进行了...
代码中组件App是被react-redux封装的组件,react-redux会假设App是一个Pure Component,即对于唯一的props和state有唯一的渲染结果。 所以react-redux首先会对根状态(即上述代码中mapStateToProps的第一个形参state)创建索引,进行浅对比,如果对比结果一致则不对组件进行重新渲染,否则继续调用mapStateToProps函数;同时继续对ma...
Immutable.js 则提供了简洁、高效的判断数据是否变化的方法,只需 === 和 is 比较就能知 道是否需要执行 render , 而这个操作几乎零成本, 所以可以极大提高性能。 修改后的 shouldComponentUpdate 是这样的: import React, { Component } from "react"; ...
像ClojureScript,Elm 等函数式编程语言中的数据类型天生都是 Immutable 的,这也是为什么 ClojureScript 基于 React 的框架 --- Om 性能比 React 还要好的原因。 使用Immutable 的缺点 1. 需要学习新的 API No Comments 2. 增加了资源文件大小 No Comments 3. 容易与原生对象混淆 这点是我们使用 Immutable.js 过程...
src/api/config/filmConfig.js 案例:点击按钮,数字+1,初始值100 单用户模块化拆分 src/store/action.js src/store/index.js src/store/reducer.js src/store/mutation.js 小分析: 代码 index.js import React from 'react'; import ReactDOM from 'react-dom'; ...