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. Cocos2D 添加 UIView

    cocos2d是使用继承于ccnode的结点类型的层.但是我想用一个opengl来绘制,就简单的情况来说必须得加一个uiview.现转载如下: 第一部分:: 使用Cocos2D开发游戏和应用程序的时候 ...

  2. luogu3759 [TJOI2017]不勤劳的图书管理员

    分块+权值逆序对 #include <algorithm> #include <iostream> #include <cstdio> #include <c ...

  3. Mac下的Eclipse不能记住工作空间问题

    每次启动eclipse都要选择工作空间,即使你勾选了"选择这个作为默认"也不行. Eclipse版本 4.5, mac os版本10.12 找到这个目录下的config.ini文件 ...

  4. sql server 2008启动时:已成功与服务器建立连接,但是在登录过程中发生错误。(provider:命名管道提供程序,error:0-管道的另一端上无任何进程。)(Microsoft SQL Server,错误:233) 然后再连接:错误:18456

    问题:sql server 2008启动时:已成功与服务器建立连接,但是在登录过程中发生错误.(provider:命名管道提供程序,error:0-管道的另一端上无任何进程.)(Microsoft S ...

  5. Course Machine Learning Note

    Machine Learning Note Introduction Introduction What is Machine Learning? Two definitions of Machine ...

  6. ASP.NET(一):Reques对象和Response对象的区别,以及IsPostBack属性的用法

    导读:在ASP.NET的学习中,初步认识了其6大对象(严格说来只能算是属性):Request,Response,Application,Session,Server,OjectContext.这些对象 ...

  7. LINUX DNS客户端 解析域名慢的问题。

    Linux系统下域名解析的配置文件是/etc/resolv.conf cat /etc/resolv.conf # Generated by NetworkManager options single ...

  8. NOJ——1628Alex’s Game(III)(DFS+回溯)

    [1628] Alex’s Game(III) 时间限制: 1000 ms 内存限制: 65535 K 问题描述 Alex likes to play with one and zero as you ...

  9. BZOJ 1419 Red is good ——期望DP

    定义f[i][j]表示还剩i张红牌,j张黑牌的时候能取得的期望最大值 显然有$f[i][j]=max(0,\frac {i}{i+j}(f[i-1][j]+1)+ \frac {j}{i+j}(f[i ...

  10. Split The Tree

    Split The Tree 时间限制: 1 Sec  内存限制: 128 MB 题目描述 You are given a tree with n vertices, numbered from 1 ...