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 相关文章推荐
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
vue element-ui实现动态面包屑导航
Dec 23 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 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_Flame(Version:Progress)的原代码
2006/10/09 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
详解Python装饰器由浅入深
2016/12/09 Python
Python递归函数定义与用法示例
2017/06/02 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
自动化系在校本科生求职信
2013/10/23 职场文书
质检部职责
2013/12/28 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers