React性能优化：immutability-helper

项目地址：kolodny/immutability-helper

轮子作用：以最低的成本对抗浅比较。

适用场景：state的修改。

如果使用redux管理数据流，就必然会遇到state的修改。state修改有个特性，redux会进行一次新旧state的浅比较，如果有变动才会触发重新渲染。一个大的项目state的数据结构必然会很复杂，如果有一个很里层的数据被修改，这时就很头疼。

如果把state深拷贝一次会十分浪费资源，所以我们不会这么干。浅拷贝同样行不通，因为浅拷贝之后的操作会改变旧的state值，这既不规范，也不会触发渲染。

假如我们有如下一个state：

state = {info: {name: "tom",age: 12},score: {exam1: [99, 98, 89],exam2: [78, 85]}
}
复制代码

进行一次浅拷贝copyState = state，此时的copyState与state其实保存了相同的值，他们指向内存中的同一片区域。如果现在我进行一番操作：

state.score.exam2.push(90);
复制代码

对于copyState与state而言，他们其实没有任何变化，依旧指向同一片内存区域，只是这片区域内保存的数据有了变化，所以此时两者仍然相等。

所以浅复制自然也就无法对抗浅比较，而且还可能出现意想不到的副作用（修改state导致copyState也变了）。

一个比较原始地方法就是把state照抄一遍，并进行所需的修改：

newState = {info: state.info,score: {exam1: state.score.exam1,exam2: [state.score.exam2[0], state.score.exam2[1], 90],},
}
复制代码

这就是最大程度上利用原有数据，在不深拷贝的情况下定向修改数据，并且返回一个新对象的操作。

但是上面的操作明显就很笨拙，在ES6引入了...操作符以后，这个操作就可以得到简化：

newState = {...state,score: {...state.score,exam2: [...state.score.exam2, 90，]，}，
}
复制代码

但是可以想象，在数据层级比较深的时候就会写得很复杂，上面的...state.score.exam2已经是不短的一串代码了。

面对着这种困境，immutability-helper就是一个与使用...操作逻辑相同，但是书写要简便很多的轮子。这个轮子有一定的学习成本。上面的例子使用immutability-helper实现的具体操作如下：

import update from 'immutability-helper';newState = update(state, {score: {exam2: {$push: [90]}}
})
复制代码

不难看出，用了immutability-helper以后少写了很多不必要的代码，immutability-helper实现的功能还不仅仅只是这些，有兴趣可以自行研究一下源码。它也是一个被antd推荐使用的轮子。

总而言之，十分推荐在React中使用immutability-helper来进行state的更新，兼具性能与优雅。

React性能优化：immutability-helper相关推荐

react性能优化方案_React灵敏且性能卓越的Spray + Akka解决方案，以“在Java和Node.js中发挥并发性和性能”...
react性能优化方案在我以前的文章中,我研究了一个虚拟的交易引擎,并将基于Java的阻止解决方案与基于Node.js的非阻止解决方案进行了比较. 在文章的结尾,我写道: 我怀疑随着Node.js的 ...
[react] 你知道的react性能优化有哪些方法？
[react] 你知道的react性能优化有哪些方法? shouldComponentUpdate PureComponent :Class Component React.Memo :Functio ...
React性能优化记录（不定期更新）
React性能优化记录(不定期更新) 1. 使用PureComponent代替Component 在新建组件的时候需要继承Component会用到以下代码 import React,{Componen ...
React性能优化SCU | PureComponent | memo
文章目录 React性能优化SCU React更新机制 render函数被调用 PureComponent 高阶组件memo React性能优化SCU React更新机制我们在前面文章已经讲解过Re ...
Airbnb 爱彼迎房源详情页中的 React 性能优化
Airbnb 爱彼迎工程师和数据科学家将定期和大家分享移动开发.系统架构.数据科学及人工智能等领域的技术探索和经验心得. 正文从这开始-- 在一些容易被忽视但又非常重要的场景,可能会有许多严重影响性能 ...
React性能优化(完整版)
我的博客 http://wangxince.site/my-demo-markdown/ React 性能优化 1.减少 render 次数 shouldComponentUpdate PureCom ...
react 组件遍历】_从 Context 源码实现谈 React 性能优化
(给前端大全加星标,提升前端技能) 转自:魔术师卡颂学完这篇文章,你会收获: 了解Context的实现原理源码层面掌握React组件的render时机,从而写出高性能的React组件源码层面了解 ...
React性能优化总结
文章同步于Github Pines-Cheng/blog 初学者对React可能满怀期待,觉得React可能完爆其它一切框架,甚至不切实际地认为React可能连原生的渲染都能完爆--对框架的狂热确实会 ...
react性能优化之memo的作用和memo的坑
前言在react中,组件渲染的是最常有的事情.但是,有部分的渲染是不必要的,是可以避免的. 在react的一般规则中,只有父组件的某一个状态改变,父组件下面所有的子组件不论是否使用了该状态,都会进行 ...
React 性能优化完全指南，将自己这几年的心血总结成这篇！
作者: MoonBall 原文地址: https://juejin.cn/post/6935584878071119885 本文分为三部分,首先介绍 React 的工作流,让读者对 React 组件更 ...

React性能优化：immutability-helper

React性能优化：immutability-helper相关推荐

最新文章

热门文章