react实现pure render时bind(this)隐患需注意!


Posted in Javascript onMarch 09, 2017

pure render 我就不多说了,附上我另一片文章链接 react如何性能达到最大化(前传)

不论你用不用immutable,只要你想达到pure render,下面值得你注意!

一天我和往常一样,开开心心得写着react,用着@pureRender,

export default class extends Component {
...
 render() {
  const {name,age} =this.state;
  return (
   <div>
    <Person name={name} age={age} onClick={this._handleClick.bind(this)}></Person>//bug 所在
   </div>
  )
 }
...
}

发现一个问题,对于Person这个子组件来说,在父组件re-render的时候,即使Person得前后两个props都没改变,它依旧会re-render,即使用immutable.js也不好使。

原来啊,父组件每次render,_handleClick都会执行bind(this) 这样_handleClick的引用每次都会改,所以Person前后两次props其实是不一样的。

那怎么办?把bind(this)去掉?不行 还必须得用

真正的答案是 让父组件每次render 不执行bind(this),直接提前在constructor执行好,修改之后

export default class extends Component {
 constructor(props){
  super(props)
  this._handleClick=this._handleClick.bind(this)//改成这样
 }
 render() {
  const {name,age} =this.state;
  return (
   <div>
    <Person name={name} age={age} onClick={this._handleClick}></Person>
   </div>
  )
 }
...
}

参考:React.js pure render performance anti-pattern

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

Javascript 相关文章推荐
JS中Iframe之间传值的方法
Mar 11 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
JS前端轻量fabric.js系列物体基类
Aug 05 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 #Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 #Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 #Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 #Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 #Javascript
js实现时间轴自动排列效果
Mar 09 #Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 #Javascript
You might like
PHP入门学习笔记之一
2010/10/12 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
ie 调试javascript的工具
2009/04/29 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
Vue formData实现图片上传
2019/08/20 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
python3制作捧腹网段子页爬虫
2017/02/12 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
python、Matlab求定积分的实现
2019/11/20 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
餐饮业会计岗位职责
2013/12/19 职场文书
学生会招新策划书
2014/02/14 职场文书
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python