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 相关文章推荐
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
详解React之key的使用和实践
Sep 29 Javascript
vue中监听返回键问题
Aug 28 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
使用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 session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
php 带逗号千位符数字的处理方法
2012/01/10 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
js实现验证码干扰(动态)
2021/02/23 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
Python实现线程池代码分享
2015/06/21 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
Django内容增加富文本功能的实例
2017/10/17 Python
django中模板的html自动转意方法
2018/05/27 Python
提升python处理速度原理及方法实例
2019/12/25 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
CSS3点击按钮实现背景渐变动画效果
2016/10/19 HTML / CSS
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
机械设计及其自动化专业推荐信
2013/10/31 职场文书
小学生学习感言
2014/03/10 职场文书
红色电影观后感
2015/06/18 职场文书
CAD实训总结范文
2015/08/03 职场文书
预备党员入党感想
2015/08/10 职场文书
Python+Appium新手教程
2021/04/17 Python
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技