react实现pure render时bind(this)隐患需注意!
更新时间：2017年03月09日 11:25:41 作者：杨川宝
这篇文章主要为大家详细介绍了值得你在react实现pure render的时候，需要注意的bind(this)隐患，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于React如何使用相对于根目录进行引用组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-10-10
在业务中,需要在一个卡片组件中展示多个标签,标签组件高度相同,宽度和出现顺序不同,要求标签只能在有限的空间内展示,所以本文给大家介绍了React实现多标签在有限空间内展示,需要的朋友可以参考下2023-12-12
最近在处理项目代码的时候,出现了一个bug,组件中的方法在组件卸载后仍然在执行,代码片段发给我看,但是变量的用意我也不懂,只看到有方法调用自身方法,这不就是递归嘛,所以本文详细给大家介绍了React组件卸载怎么中止递归方法,需要的朋友可以参考下2024-01-01
这篇文章主要为大家介绍了ReactJS应用程序中设置Axios拦截器方法demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要为大家介绍了react定位组件源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
本篇文章主要介绍了ReactNative短信验证码倒计时控件的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
React Native基础入门之调试React Native应用的一小步
这篇文章主要给大家介绍了关于React Native基础入门之调试React Native应用的相关资料，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
本文主要介绍了react-router-dom V6的配置使用实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
electron其实是一个桌面应用程序，不是一个标准的前端web程序，所有没有什么请求的发生，控制台network看不到请求，而是只能通过console.log去打印查看，而且通信协议使用的不是http而是gRPC协议，这篇文章主要介绍了Electron+React如何进行通信,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了React - ref 命令为什么代替父子组件的数据传递,使用 ref 之后，我们不需要再进行频繁的父子传递了，子组件也可以有自己的私有状态并且不会影响信息的正常需求，这是为什么呢？因为我们使用了 ref 命令的话，ref是可以进行状态的传输2022-08-08
最新评论