react 实现pure render的时候,bind(this)隐患
react 实现pure render的时候,bind(this)隐患
export default class Parent extends Component {
...
render() {
const {name,age} =this.state;
return (
<div>
<Child name={name} age={age} onClick={this._handleClick.bind(this)}></Child>//bug 所在
</div>
)
}
...
}
发现一个问题,对于Child这个子组件来说,在父组件re-render的时候,即使Child得前后两个props都没改变,它依旧会re-render。。即使用immutable.js也不好使。。。原来啊,父组件每次render,_handleClick都会执行bind(this) 这样_handleClick的引用每次都会改。。所以Child前后两次props其实是不一样的。。 那怎么办?把bind(this)去掉?不行 还必须得用。真正的答案是 让父组件每次render 不执行bind(this),直接提前在constructor执行好,修改之后
export default class Parent extends Component {
constructor(props){
super(props)
this._handleClick=this._handleClick.bind(this)//改成这样
}
render() {
const {name,age} =this.state;
return (
<div>
<Child name={name} age={age} onClick={this._handleClick}></Child>
</div>
)
}
...
}
.
react 实现pure render的时候,bind(this)隐患的更多相关文章
- React中的事件处理为什么要bind this?
个人总结: 问: 请给我讲一下React中的事件处理为什么要bind this? 答: 好的,比如说我写了一个类组件,有个onClick属性 ,onClick={ this.fun },如果不bind ...
- 使用React.Fragment替代render函数中div的包裹
1.在 React 中,render 函数中 return 的内容只能有一个根节点,如果多个元素嵌套,需要用一个标签元素包裹 这个包裹的标签通常用 div,示例如下: class App extend ...
- React在Render中使用bind可能导致的问题
因为bind在render的时候会重现生成,这样会导致props每次都不同, puremixin的插件也会失效. 所以需要将bind的结果缓存下来,或者直接在constructor里做这个事情 con ...
- 为什么React事件处理函数必须使用Function.bind()绑定this?
最近在React官网学习Handling Events这一章时,有一处不是很明白.代码如下: class Toggle extends React.Component { constructor(pr ...
- react props与render成员函数
props是组件固有的属性集合,其数据由外部传入,一般在整个组件的生命周期中都是只读的,React的API顶层设计也决定了这一点.属性初值通常由React.createElement函数或者JSX中标 ...
- react初学之render返回加括号的问题
刚在学习react的初始阶段,跑了一段代码 var Mydom = React.createClass({ render:function(){ return <div> <inp ...
- React 的 server render 初步学习
所谓server render 即服务端渲染,这是为了解决现代前端框架下的单页应用在SEO方面不友好的问题. react 的SSR主要思路就是 1.将应用的根组件导出 如 <App /> ...
- [React] Use a Render Porp
More detail check LInk. Render Prop vs HOC: HOC version for withMouse: import React from 'react' imp ...
- [React Router v4] Render Multiple Components for the Same Route
React Router v4 allows us to render Routes as components wherever we like in our components. This ca ...
随机推荐
- (转)编写高质量的OC代码
点标记语法 属性和幂等方法(多次调用和一次调用返回的结果相同)使用点标记语法访问,其他的情况使用方括号标记语法. 良好的风格: view.backgroundColor = [UIColor or ...
- shell中的$(( )) 的用途:主要用在整数的运算$(( a+b*c ))
$ a=5; b=7; c=2 $ echo $(( a+b*c ))//注意在进行这些运算时必须是双括号 $ echo $(( (a+b)/c )) $ echo $(( (a*b)%c))
- Uiautomator简介及其环境搭建、测试执行
UiAutomator框架使用指南 UiAutomator是Google开发的自动化测试工具,通过UI创建自动化测试代码,来测试界面(UI)的有效功能,可以针对应用程序运行在一个或更多的设备上.我们并 ...
- slave_net_timeout 问题一则
[背景] 对一套数据库集群进行5.5升级到5.6之后,alter.log 报warning异常. 2015-02-03 15:44:51 19633 [Warning] Storing MySQL ...
- 【Linux】网卡配置与绑定
Redhat Linux的网络配置,基本上是通过修改几个配置文件来实现的. 虽然也可以用ifconfig来设置IP,用route来配置默认网关,用hostname来配置主机名,但是重启后会丢失. 相关 ...
- WEB框架——WEB框架本质
武sir http://www.cnblogs.com/wupeiqi/articles/5237672.html
- 爆炸几何之 CCPC网络赛 I - The Designer (笛卡尔定理)
本文版权归BobHuang和博客园共有,不得转载.如想转载,请联系作者,并注明出处. Nowadays, little hahahaha got a problem from his teache ...
- redis介绍和安装(一)
Redis介绍:redis是一个key-value存储系统. 和Memcached类似,它支持存储的value类型相对更多,包括 string(字符串). list(链表).set(集合).zset( ...
- SoapUI offen used scripts
[ Groovy Step ] //get properties from testCase, testSuite and project in groovy step def testCasePro ...
- Codeforces 271D - Good Substrings [字典树]
传送门 D. Good Substrings time limit per test 2 seconds memory limit per test 512 megabytes input stand ...