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)隐患的更多相关文章

  1. React中的事件处理为什么要bind this?

    个人总结: 问: 请给我讲一下React中的事件处理为什么要bind this? 答: 好的,比如说我写了一个类组件,有个onClick属性 ,onClick={ this.fun },如果不bind ...

  2. 使用React.Fragment替代render函数中div的包裹

    1.在 React 中,render 函数中 return 的内容只能有一个根节点,如果多个元素嵌套,需要用一个标签元素包裹 这个包裹的标签通常用 div,示例如下: class App extend ...

  3. React在Render中使用bind可能导致的问题

    因为bind在render的时候会重现生成,这样会导致props每次都不同, puremixin的插件也会失效. 所以需要将bind的结果缓存下来,或者直接在constructor里做这个事情 con ...

  4. 为什么React事件处理函数必须使用Function.bind()绑定this?

    最近在React官网学习Handling Events这一章时,有一处不是很明白.代码如下: class Toggle extends React.Component { constructor(pr ...

  5. react props与render成员函数

    props是组件固有的属性集合,其数据由外部传入,一般在整个组件的生命周期中都是只读的,React的API顶层设计也决定了这一点.属性初值通常由React.createElement函数或者JSX中标 ...

  6. react初学之render返回加括号的问题

    刚在学习react的初始阶段,跑了一段代码 var  Mydom = React.createClass({ render:function(){ return <div> <inp ...

  7. React 的 server render 初步学习

    所谓server render 即服务端渲染,这是为了解决现代前端框架下的单页应用在SEO方面不友好的问题. react 的SSR主要思路就是 1.将应用的根组件导出 如 <App /> ...

  8. [React] Use a Render Porp

    More detail check LInk. Render Prop vs HOC: HOC version for withMouse: import React from 'react' imp ...

  9. [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 ...

随机推荐

  1. (转)编写高质量的OC代码

    点标记语法 属性和幂等方法(多次调用和一次调用返回的结果相同)使用点标记语法访问,其他的情况使用方括号标记语法.   良好的风格: view.backgroundColor = [UIColor or ...

  2. shell中的$(( )) 的用途:主要用在整数的运算$(( a+b*c ))

    $ a=5; b=7; c=2 $ echo $(( a+b*c ))//注意在进行这些运算时必须是双括号 $ echo $(( (a+b)/c )) $ echo $(( (a*b)%c))

  3. Uiautomator简介及其环境搭建、测试执行

    UiAutomator框架使用指南 UiAutomator是Google开发的自动化测试工具,通过UI创建自动化测试代码,来测试界面(UI)的有效功能,可以针对应用程序运行在一个或更多的设备上.我们并 ...

  4. slave_net_timeout 问题一则

    [背景]   对一套数据库集群进行5.5升级到5.6之后,alter.log 报warning异常. 2015-02-03 15:44:51 19633 [Warning] Storing MySQL ...

  5. 【Linux】网卡配置与绑定

    Redhat Linux的网络配置,基本上是通过修改几个配置文件来实现的. 虽然也可以用ifconfig来设置IP,用route来配置默认网关,用hostname来配置主机名,但是重启后会丢失. 相关 ...

  6. WEB框架——WEB框架本质

    武sir http://www.cnblogs.com/wupeiqi/articles/5237672.html

  7. 爆炸几何之 CCPC网络赛 I - The Designer (笛卡尔定理)

    本文版权归BobHuang和博客园共有,不得转载.如想转载,请联系作者,并注明出处.   Nowadays, little hahahaha got a problem from his teache ...

  8. redis介绍和安装(一)

    Redis介绍:redis是一个key-value存储系统. 和Memcached类似,它支持存储的value类型相对更多,包括 string(字符串). list(链表).set(集合).zset( ...

  9. SoapUI offen used scripts

    [ Groovy Step ] //get properties from testCase, testSuite and project in groovy step def testCasePro ...

  10. Codeforces 271D - Good Substrings [字典树]

    传送门 D. Good Substrings time limit per test 2 seconds memory limit per test 512 megabytes input stand ...