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 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
JS 作用域与作用域链详解
Apr 07 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
一些实用性较高的js方法
Apr 19 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
JavaScript错误处理操作实例详解
Jan 04 Javascript
vue 插件的方法代码详解
Jun 06 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批量修改文件名称的方法分析
2017/02/27 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
Python常用特殊方法实例总结
2019/03/22 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
django 模版关闭转义方式
2020/05/14 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
python 写一个性能测试工具(一)
2020/10/24 Python
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
贸易经济专业自荐书
2014/06/29 职场文书
公司户外活动总结
2014/07/04 职场文书
三好学生个人总结
2015/02/15 职场文书
会议通知范文
2015/04/15 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
Java Socket实现多人聊天系统
2021/07/15 Java/Android
ant design vue的form表单取值方法
2022/06/01 Vue.js