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 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
利用forever和pm2部署node.js项目过程
May 10 Javascript
vue2.0实现分页组件的实例代码
Jun 22 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 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中的类-什么叫类
2006/11/20 PHP
PHP 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
php 缩略图实现函数代码
2011/06/23 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
2017/09/28 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
python实现无证书加密解密实例
2014/10/27 Python
python Flask实现restful api service
2017/12/04 Python
基于Python log 的正确打开方式
2018/04/28 Python
python Django的web开发实例(入门)
2019/07/31 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
python算的上脚本语言吗
2020/06/22 Python
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
运动会解说词100字
2014/01/31 职场文书
百日安全活动总结
2014/05/04 职场文书
与美同行演讲稿
2014/09/13 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
社区活动总结
2015/02/04 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
浅谈PHP7中的一些小技巧
2021/05/29 PHP