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. leepcode(斐波那契数列与float("inf")无穷大)解析

    12.加一 给定一个由整数组成的非空数组所表示的非负整数,在该数的基础上加一. 最高位数字存放在数组的首位, 数组中每个元素只存储一个数字. 你可以假设除了整数 0 之外,这个整数不会以零开头. 示例 ...

  2. eclipse代码格式化快捷键无法使用

    [产生原因] Ctrl+Shift+F快捷键组合被其他应用占有,如输入法. [解决方案] 关闭或更换其他应用快捷键或更换eclipse对应的快捷键组合.

  3. Android自动化测试Uiautomator--UiObject接口简介

    UiObject可以理解为控件的对象,主要对对象进行操作.按照一定条件(UiSelector)获取UiObject对象,之后对对象进行相应的操作,如下图所示. 对于对象的操作主要有点击/长按.拖动/滑 ...

  4. ASP.NET MVC 通用角色权限管理系统

    RightControl 介绍 .NET 通用后台角色权限管理系统,已完成.项目地址:http://106.14.77.184/Admin/Login 码云地址:https://gitee.com/L ...

  5. 二分查找与 bisect 模块

    Python 的列表(list)内部实现是一个数组,也就是一个线性表.在列表中查找元素可以使用 list.index() 方法,其时间复杂度为O(n).对于大数据量,则可以用二分查找进行优化.二分查找 ...

  6. Hibernate框架的主键生成策略

    在Hibernate中,id元素的<generator>子元素用于生成持久化类的对象的唯一标识符,也就是主键.Hibernate框架中定义了许多主键生成策略类,也叫生成器类.所有的生成器类 ...

  7. PYDay10&11&12&13-常用模块:time|datetime|os|sys|pickle|json|xml|shutil|logging|paramiko、configparser、字符串格式化、py自动全局变量、生成器迭代器

    1.py文件自动创建的全局变量 print(vars()) 返回值:{'__name__': '__main__', '__package__': None, '__loader__': <_f ...

  8. iOS控件-3级城市列表-plist版

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  9. spring之lazy-init

    lazy-init:延迟实例化 ApplicationContext实现的默认行为就是在启动服务器时将所有singleton bean提前进行实例化.提前实例化意味着作为初始化过程的一部分,appli ...

  10. Hubtown

    Hubtown 时间限制: 10 Sec  内存限制: 256 MB 题目描述 Hubtown is a large Nordic city which is home to n citizens. ...