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 相关文章推荐
Span元素的width属性无效果原因及解决方案
Jan 15 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
微信小程序 数据绑定详解及实例
Oct 25 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
js实现经典贪吃蛇小游戏
Mar 19 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中使用Oracle数据库(6)
2006/10/09 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
Express 配置HTML页面访问的实现
2020/11/01 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
python查找指定具有相同内容文件的方法
2015/06/28 Python
利用python代码写的12306订票代码
2015/12/20 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
python程序控制NAO机器人行走
2019/04/29 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
python爬取天气数据的实例详解
2020/11/20 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
极简的HTML5模版
2015/07/09 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
出纳岗位职责范本
2013/12/01 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
团队会宣传标语
2014/10/09 职场文书
小学新教师个人总结
2015/02/05 职场文书
2015年建党94周年演讲稿
2015/03/19 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers