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. LeetCode(79) Word Search

    题目 Given a 2D board and a word, find if the word exists in the grid. The word can be constructed fro ...

  2. 高性能MySQL(第三版)

    一.MySQL架构与历史 1.2.2 锁粒度 表锁:写锁的优先级高于读锁:写锁的请求可以插入到读锁的前面,但读锁的请求却不能插入到写锁的前面: 行级锁:行级锁只在存储引擎层实现,在服务器层没有实现: ...

  3. Mac下Python和Pycharm之virtualenv

    一.python如何配置virtualenv   1.安装virtualenv pip3 install virtualenvpip install -i https://pypi.tuna.tsin ...

  4. python 三——列表、字典、元祖、字符串、set

    本节内容 1.列表 2.元祖 3.字典 4.字符串 不可变类型:整型.字符串.元组tuple 可变类型:列表list.字典dict 1.列表 >>> names ['Alex', ' ...

  5. 【03】图解原型和原型链by魔芋

    [03]图解原型和原型链 一图胜前言             请先结合图解原型和原型链这张图. 可以分为4种情况. 情况1: Object有: constructor:是Function. __pro ...

  6. SQL Server on Red Hat Enterprise Linux

    本文从零开始一步一步介绍如何在Red Hat Enterprise Linux上搭建SQL Server 2017,包括安装系统.安装SQL等相关步骤和方法(仅供测试学习之用,基础篇). 一.   创 ...

  7. 九度oj 题目1031:xxx定律 题目1033:继续xxx定律

    题目描述:     对于一个数n,如果是偶数,就把n砍掉一半:如果是奇数,把n变成 3*n+ 1后砍掉一半,直到该数变为1为止.    请计算需要经过几步才能将n变到1,具体可见样例. 输入:     ...

  8. 查询UNDO使用情况

    查看UNDO事务占用情况 SELECT s.username, s.sid, pr.PID, s.OSUSER, s.MACHINE, s.PROGRAM, rs.segment_id, r.usn, ...

  9. Oracle 数据库有五个必需的后台进程,DBWR,LGWR,CKPT,SMON,PMON

    SMON 是系统监视器(System Monitor)的缩写.如果Oracle实例失败,则在SGA中的任何没有写到磁盘中的数据都会丢失.有许多情况可能引起Oracle实例失败,例如,操作系统的崩溃就会 ...

  10. POJ 2154 Color ——Burnside引理

    [题目分析] 数据范围有些大. 然后遍求欧拉函数,遍求和就好了,注意取模. [代码] #include <cstdio> #include <cstring> #include ...