官方文档(https://immutable-js.github.io/immutable-js/docs/#/) 有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明,因为同期 React 太火,它的光芒被掩盖了.这些至少说明 Immutable 是很有价值的,下面我们来一探究竟. JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原始对象,改变新…

在redux中使用Immutable 1.什么是Immutable? Immutable是一旦创建,就不能被更改的数据. 对Immutable对象的任何修改或添加删除操作都会返回一个新的Immutable对象. Immutable实现的原理是:Persistent Data Structure(持久化数据结构),   也就是数据改变时(增删改)要保证旧数据同时可用且不变 为了避免深拷贝把所有节点都复制一遍带来的性能损耗,Immutable使用了Structural Sharing(结构共享)  …

为什么用immutable.js呢.有了immutable.js可以大大提升react的性能. JavaScript 中的对象一般是可变的(Mutable),因为使用了引用赋值,新的对象简单的引用了原始对象,改变新的对象将影响到原始对象.如 foo={a: 1}; bar=foo; bar.a=2 你会发现此时 foo.a 也被改成了 2.虽然这样做可以节约内存,但当应用复杂后,这就造成了非常大的隐患,Mutable 带来的优点变得得不偿失.为了解决这个问题,一般的做法是使用 shallowCo…

相关技术:webpack+react+react-router+redux+immutable 郭永峰react学习指南 1.git bash--windows命令行工具 --教程 下载地址 2. immutable immutable的基础操作    中文基础操作文章 2.1 es6运行编译环境搭建 3. js创建对象的几种方法 4.阮一峰全栈开发教程 5.react--api 6.redux-ruanyifeng  redux文档 疑问点: 关于react-router中props传递的问题…

原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 star 数达 42000 +,超过了 jquery 的 39000+,也即将超过前几年比较火的angular 1 的 49000+:redux 的 star 数也要接近 20000,可见大家对其的热情程度,究竟是什么魔力让大家为之疯狂呢?让我们上车,亲自体验一波试试~~本文章偏向于讲解redux流程…

pagemaker是一个前端页面制作工具,方便产品,运营和视觉的同学迅速开发简单的前端页面,从而可以解放前端同学的工作量.此项目创意来自网易乐得内部项目nfop中的pagemaker项目.原来项目的前端是采用jquery和模板ejs做的,每次组件的更新都会重绘整个dom,性能不是很好.因为当时react特别火,加上项目本身的适合,最后决定采用react来试试水.因为原来整个项目是包含很多子项目一起,所以后台的实现也没有参考,完全重写. 本项目只是原来项目的简单实现,去除了用的不多和复杂的组件.但…

一.需求 1.子组件有更新时,只重新渲染有变化的子组件,而不是全部 二.ImmutableJS原理 三.代码 1.CheckboxWithLabel.jsx var React = require('react/addons'); var CheckboxWithLabel = React.createClass({ shouldComponentUpdate: function(nextProps, nextState) { return nextProps.label !== this.pr…

webpack算是个磨人的小妖精了.之前一直站在glup阵营,使用browserify打包,发现webpack已经火到爆炸,深怕被社区遗落,赶紧拿起来把玩一下.本来只想玩一下的.尝试打包了以后,就想启个webpack服务器,之后就想添加热替换,什么css文件单独拆分,各种 loader 处理优化打包结果,各种 source-map 有什么不同,一个都不能少.其中添加热替换时候,因为应用的服务器和webpack服务器没有使用同一个,产生了一点波折.然后就到了今天这个主题了. 逐步展开今天的主题:…

在前端应用的优化中,对加载资源的大小控制极其的重要,大多数时候我们能做的是在打包编译的过程对资源进行大小控制.拆分与复用.本片文章中主要是基于 webpack 打包,以 React.vue 等生态开发的单页面应用来举例说明如何从 webpack 打包的层面去处理资源以及缓存,其中主要我们需要做的是对 webpack 进行配置的优化,同时涉及少量的业务代码的更改. 同时对打包资源的分析可以使用 webpack-bundle-analyzer 插件,当然可选的分析插件还是很多的,在本文中主要以该插件…

webpack算是个磨人的小妖精了.之前一直站在glup阵营,使用browserify打包,发现webpack已经火到爆炸,深怕被社区遗落,赶紧拿起来把玩一下.本来只想玩一下的.尝试打包了以后,就想启个webpack服务器,之后就想添加热替换,什么css文件单独拆分,各种 loader 处理优化打包结果,各种 source-map 有什么不同,一个都不能少.其中添加热替换时候,因为应用的服务器和webpack服务器没有使用同一个,产生了一点波折.然后就到了今天这个主题了. 逐步展开今天的主题:…