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. centos 7.3安装教程

    进入安装初始化界面 等待检查完就可以进入安装了,不想等待的按ESC退出,没关系的 语言这里我们推荐使用英文: 然后点击Continue继续 选择-系统SYSTEM-安装位置INSTALLTION DE ...

  2. WIN10配置instantclient

    在PLSQL Developer目录下建立如下bat文件,替换其快捷方式,启动PLSQL Developer: @echo off set path=C:\instantclient-basic-nt ...

  3. centos 装 android studio (2)

    这里,我打算安装 JDK 1.8. $ sudo add-apt-repository ppa:webupd8team/java $ sudoapt-get update $ sudoapt-get ...

  4. mac securecrt自动保存密码

    一.问题描述 mac有自带的终端,可以运行ssl和sftp,但是目录操作,文件操作和文件上传是分开的,很不方便,并且文件上传命令需要文件的全路路径. 使用securecrt能方便的解决上述的问题,并且 ...

  5. css3小代码

    1.三角 <!doctype html> <html lang="en"> <head> <meta charset="UTF- ...

  6. Mac版有道云笔记不能自动同步

    删除本地资源文件夹 /Users/xxxx/Library/Containers/com.youdao.note.YoudaoNoteMac 直接删除整个文件夹,之后重新登录账号.

  7. ImportError: No module named ‘MySQLdb'

    1.APP未注册 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contentty ...

  8. [android开发篇]activity组件篇

    https://developer.android.com/guide/components/activities.html Activity 是一个应用组件,用户可与其提供的屏幕进行交互,以执行拨打 ...

  9. HDU-4738 Caocao's Bridges,注意重边不是桥!

    Caocao's Bridges 题意:曹操赤壁之战后卷土重来,他在n个小岛之间建立了m座桥.现在周瑜只有一颗炮弹,他只能炸毁一座桥使得这些岛屿不再连通.每座桥上都可能会有士兵把手,如果想安放***那 ...

  10. mark一下。hadoop分布式系统搭建

    用于测试,我用4台虚拟机搭建成了hadoop结构 我用了两个台式机.一个xp系统,一个win7系统.每台电脑装两个虚拟机,要不然内存就满了. 1.安装虚拟机环境 Vmware,收费产品,占内存较大. ...