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 相关文章推荐
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
Dec 17 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 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生成WAP页面
2006/10/09 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
javascript第一课
2007/02/27 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
浅谈Webpack打包优化技巧
2018/06/12 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2016/12/27 Python
python实现拓扑排序的基本教程
2018/03/11 Python
python cs架构实现简单文件传输
2020/03/20 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
PyTorch中permute的用法详解
2019/12/30 Python
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
大学生学习党课思想汇报
2014/01/03 职场文书
土地转让协议书
2014/09/27 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
python某漫画app逆向
2021/03/31 Python
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技
Golang jwt身份认证
2022/04/20 Golang