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. mysql 面安装配置

    解压MySQL压缩包    将以下载的MySQL压缩包解压到自定义目录下,我的解压目录是:    "D:\Program Files\MySQL\mysql-5.6.13-win32&quo ...

  2. MySQL 2003 [ERROR] /usr/sbin/mysqld: Incorrect key file for table './keyword_search/keyword.MYI'; try to repair it

    今天对一个有四百多万数据的表增加一个功能时,当做数据插入时,显示没有插入,到Linux的log下面查看了发现下面这条错误信息 在stacOver上面找到这句: 存储引擎(MyISAM)支持修复表.你应 ...

  3. Educational Codeforces Round 26

    Educational Codeforces Round 26 困到不行的场,等着中午显示器到了就可以美滋滋了 A. Text Volume time limit per test 1 second ...

  4. 【java基础 7】java内存区域分析及常见异常

    本篇博客,主要是读书笔记总结,还有就是结合培训分享的总结,没有太多的技术含量! java 的自动内存管理机制,使得程序员不用为每一个new惭怍的对象写配对的delete/ free代码(回想起C++的 ...

  5. Android刷新页面

    代码改变世界 Android刷新页面 继承 extends Activity /*** 调用onCreate(), 目的是刷新数据,  从另一activity界面返回到该activity界面时, 此方 ...

  6. 【bzoj3956】Count 单调栈+可持久化线段树

    题目描述 输入 输出 样例输入 3 2 0 2 1 2 1 1 1 3 样例输出 0 3 题解 单调栈+可持久化线段树 本题是 bzoj4826 的弱化版(我为什么做题总喜欢先挑难的做QAQ) $k$ ...

  7. 【Luogu】P1312Mayan游戏(暴搜)

    题目链接 由于是暴搜题,所以这篇博客只讲怎么优化剪枝,以及一些细节. 模拟消除思路:因为消除可以拆分成小的横条或竖条,而这些条的长度至少为三,所以一块可消除的区域至少会有一个中心点.这里的中心点可以不 ...

  8. HDU——1242Rescue(BFS+优先队列求点图最短路)

    Rescue Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  9. 转载自CSDN,结论:windows下按ENTER键应该是\r\n ascii码为 13 10

    记得在Windows下学X86汇编语言时,用0DH(\r)和0AH(\n)来输出回车(跳到下一行的开始处).问题来了,在Windows下是 先回车再换行呢还是先换行再回车呢?在Unix系统下换行只有\ ...

  10. pl/sql小技巧

    更正方法: 然后把Automatic statistics的勾选去掉,点击apply即可