react性能优化达到最大化的方法 immutable.js使用的必要性


Posted in Javascript onMarch 09, 2017

一行代码胜过千言万语。这篇文章呢,主要讲述我一步一步优化react性能的过程,为什么要用immutable.js呢。毫不夸张的说。有了immutable.js(当然也有其他实现库)。。才能将react的性能发挥到极致!要是各位看官用过一段时间的react,而没有用immutable那么本文非常适合你。那么我开始吧!

1、对于react的来说,如果父组件有多个子组件

想象一下这种场景,一个父组件下面一大堆子组件。然后呢,这个父组件re-render。是不是下面的子组件都得跟着re-render。可是很多子组件里面是冤枉的啊!很多子组件的props 和 state 然而并没有改变啊!!虽然virtual dom 的diff 算法很快,但是性能也不是这么浪费的啊!下面我们上代码

1).原始代码如下

以下是父组件代码。。负责输入name 和 age 然后循环显示name 和 age

export default class extends Component {
  constructor(props){
  super(props)
  this.state={
   name:"",
   age :"",
   persons:[]
  }
  }
  render() {
  const {name,age,persons} = this.state
  return (
   <div>
   <span>姓名:</span><input value={name} name="name" onChange={this._handleChange.bind(this)}></input>
   <span>年龄:</span><input value={age} name="age" onChange={this._handleChange.bind(this)}></input>
   <input type="button" onClick={this._handleClick.bind(this)} value="确认"></input>
   {persons.map((person,index)=>(
    <Person key={index} name={person.name} age={person.age}></Person>
   ))}
   </div>
  )
  }
  _handleChange(event){
  this.setState({[event.target.name]:event.target.value})
  }
  _handleClick(){
  const {name,age} = this.state
  this.setState({
   name:"",
   age :"",
   persons:this.state.persons.concat([{name:name,age:age}])
  })
 
  }
 }

以下是子组件代码单纯的显示name和age而已

class Person extends Component {
 componentWillReceiveProps(newProps){
 console.log(`我新的props的name是${newProps.name},age是${newProps.age}。我以前的props的name是${this.props.name},age是${this.props.age}是我要re-render了`);
 }
 render() {
 const {name,age} = this.props;

  return (
  <div>
   <span>姓名:</span>
   <span>{name}</span>
   <span> age:</span>
   <span>{age}</span>
  </div>
  )
 }
}

运行起来长下图这个样

react性能优化达到最大化的方法 immutable.js使用的必要性

好那么问题来了,我们看一下控制台:

react性能优化达到最大化的方法 immutable.js使用的必要性

天哪,这么多次re-reder..细细观看,不难发现。要re-render这么多次,父组件一re-render,子组件就跟着re-render啊。那么多么浪费性能,好PureRenderMixin出场

2).PureRenderMixin

因为咱用的是es2015的 Component,所以已经不支持mixin了,不过没关系,可以用HOCs,这个比mixin还更受推崇呢。我有空回用代码来展示他俩的异同,鉴于不是本文重点,,大家可以看这两篇文章了解下React Mixin 的前世今生 和Mixins Are Dead. Long Live Composition

所以在这里我们用Pure render decorator代替PureRenderMixin,那么代码如下

import pureRender from "pure-render-decorator"
...

@pureRender
class Person extends Component {
 render() {
 console.log("我re-render了");
 const {name,age} = this.props;

  return (
  <div>
   <span>姓名:</span>
   <span>{name}</span>
   <span> age:</span>
   <span>{age}</span>
  </div>
  )
 }
}

加个这东西就完事了?看上去咋这么不令人信服啊。不管怎样,试试吧。

react性能优化达到最大化的方法 immutable.js使用的必要性

果然可以做到pure render,在必须render 的时候才render。

好我们看看它的神奇之处

@pureRender

是es7的Decorators语法。上面这么写就和下面这么写一样

class PersonOrigin extends Component {
 render() {
 console.log("我re-render了");
 const {name,age} = this.props;

  return (
  <div>
   <span>姓名:</span>
   <span>{name}</span>
   <span> age:</span>
   <span>{age}</span>
  </div>
  )
 }
}
const Person = pureRender(PersonOrigin)

pureRender其实就是一个函数,接受一个Component。把这个Component搞一搞,返回一个Component看他pureRender的源代码就一目了然

function shouldComponentUpdate(nextProps, nextState) {
 return shallowCompare(this, nextProps, nextState);
}

function pureRende(component) {
 component.prototype.shouldComponentUpdate = shouldComponentUpdate;
}
module.exports = pureRender;

pureRender很简单,就是把传进来的component的shouldComponentUpdate给重写掉了,原来的shouldComponentUpdate,无论怎样都是return ture,现在不了,我要用shallowCompare比一比,shallowCompare代码及其简单,如下

function shallowCompare(instance, nextProps, nextState) {
 return !shallowEqual(instance.props, nextProps) || !shallowEqual(instance.state, nextState);
}

一目了然。分别拿现在props&state和要传进来的props&state,用shallowEqual比一比,要是props&state都一样的话,就return false,是不是感觉很完美?不。。这才刚刚开始,问题就出在shallowEqual上了

3).shallowEqual的问题

shallowEqual引起的bug
很多时候,父组件向子组件传props的时候,可能会传一个复杂类型,比如我们改下。

render() {
 const {name,age,persons} = this.state
 return (
  <div>
...省略.....
  {persons.map((person,index)=>(
   <Person key={index} detail={person}></Person>
  ))}
  </div>
 )
 }

person是一个复杂类型。这就埋下了隐患,在演示隐患前,我们先说说shallowEqual,是个什么东西,shallowEqual其实只比较props的第一层子属性是不是相同,就像上述代码,props 是如下

{
 detail:{
  name:"123",
  age:"123"}
}

他只会比较props.detail ===nextProps.detail
那么问题来了,上代码
如果我想修改detail的时候考虑两种情况

情况一,我修改detail的内容,而不改detail的引用

这样就会引起一个bug,比如我修改detail.name,因为detail的引用没有改,所以props.detail ===nextProps.detail 还是为true。
所以我们为了安全起见必须修改detail的引用,(redux的reducer就是这么做的)

情况二,我修改detail的引用

这种虽然没有bug,但是容易误杀,比如如果我新旧两个detail的内容是一样的,岂不是还要,render。所以还是不完美,你可能会说用深比较就好了,但是 深比较及其消耗性能,要用递归保证每个子元素一样。

这只是说没有用immutable引起各种、、、下一篇我讲写,如何用immutable.j。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 面向对象编程 聊聊对象的事
Sep 17 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
Oct 13 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
深入了解JavaScript 私有化
May 30 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 #Javascript
js实现时间轴自动排列效果
Mar 09 #Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 #Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 #Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 #Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 #Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 #Javascript
You might like
PHP 实用代码收集
2010/01/22 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
jquery提升性能最佳实践小结
2010/12/06 Javascript
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
2018/08/19 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
Python自定义线程池实现方法分析
2018/02/07 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
Python----数据预处理代码实例
2019/03/20 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
T3官网:头发造型工具
2019/12/26 全球购物
教育科学研究生自荐信
2013/10/09 职场文书
火车来了教学反思
2014/02/11 职场文书
护士实习求职信
2014/06/22 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
教师个人年度总结
2015/02/11 职场文书
学校通报表扬范文
2015/05/04 职场文书
军训新闻稿范文
2015/07/17 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
Python并发编程实例教程之线程的玩法
2021/06/20 Python