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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
动态加载jQuery的方法
Jun 16 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
Vue分页组件实例代码
Apr 17 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 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分页代码实例
2013/10/24 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
php输入数据统一类实例
2015/02/23 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
Node.js编码规范
2014/07/14 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python 字典dict使用介绍
2014/11/30 Python
python实现将文本转换成语音的方法
2015/05/28 Python
Python中防止sql注入的方法详解
2017/02/25 Python
彻底理解Python list切片原理
2017/10/27 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
彪马美国官网:PUMA美国
2017/03/09 全球购物
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
英国复古服装购物网站:Collectif
2019/10/30 全球购物
信息技术教学反思
2014/02/12 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
流动人口婚育证明
2014/10/19 职场文书
教学反思怎么写
2016/02/24 职场文书
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL
python缺失值填充方法示例代码
2022/12/24 Python