react 实现pure render的时候,bind(this)隐患
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)隐患的更多相关文章
- React中的事件处理为什么要bind this?
个人总结: 问: 请给我讲一下React中的事件处理为什么要bind this? 答: 好的,比如说我写了一个类组件,有个onClick属性 ,onClick={ this.fun },如果不bind ...
- 使用React.Fragment替代render函数中div的包裹
1.在 React 中,render 函数中 return 的内容只能有一个根节点,如果多个元素嵌套,需要用一个标签元素包裹 这个包裹的标签通常用 div,示例如下: class App extend ...
- React在Render中使用bind可能导致的问题
因为bind在render的时候会重现生成,这样会导致props每次都不同, puremixin的插件也会失效. 所以需要将bind的结果缓存下来,或者直接在constructor里做这个事情 con ...
- 为什么React事件处理函数必须使用Function.bind()绑定this?
最近在React官网学习Handling Events这一章时,有一处不是很明白.代码如下: class Toggle extends React.Component { constructor(pr ...
- react props与render成员函数
props是组件固有的属性集合,其数据由外部传入,一般在整个组件的生命周期中都是只读的,React的API顶层设计也决定了这一点.属性初值通常由React.createElement函数或者JSX中标 ...
- react初学之render返回加括号的问题
刚在学习react的初始阶段,跑了一段代码 var Mydom = React.createClass({ render:function(){ return <div> <inp ...
- React 的 server render 初步学习
所谓server render 即服务端渲染,这是为了解决现代前端框架下的单页应用在SEO方面不友好的问题. react 的SSR主要思路就是 1.将应用的根组件导出 如 <App /> ...
- [React] Use a Render Porp
More detail check LInk. Render Prop vs HOC: HOC version for withMouse: import React from 'react' imp ...
- [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 ...
随机推荐
- 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 ...
- 高性能MySQL(第三版)
一.MySQL架构与历史 1.2.2 锁粒度 表锁:写锁的优先级高于读锁:写锁的请求可以插入到读锁的前面,但读锁的请求却不能插入到写锁的前面: 行级锁:行级锁只在存储引擎层实现,在服务器层没有实现: ...
- Mac下Python和Pycharm之virtualenv
一.python如何配置virtualenv 1.安装virtualenv pip3 install virtualenvpip install -i https://pypi.tuna.tsin ...
- python 三——列表、字典、元祖、字符串、set
本节内容 1.列表 2.元祖 3.字典 4.字符串 不可变类型:整型.字符串.元组tuple 可变类型:列表list.字典dict 1.列表 >>> names ['Alex', ' ...
- 【03】图解原型和原型链by魔芋
[03]图解原型和原型链 一图胜前言 请先结合图解原型和原型链这张图. 可以分为4种情况. 情况1: Object有: constructor:是Function. __pro ...
- SQL Server on Red Hat Enterprise Linux
本文从零开始一步一步介绍如何在Red Hat Enterprise Linux上搭建SQL Server 2017,包括安装系统.安装SQL等相关步骤和方法(仅供测试学习之用,基础篇). 一. 创 ...
- 九度oj 题目1031:xxx定律 题目1033:继续xxx定律
题目描述: 对于一个数n,如果是偶数,就把n砍掉一半:如果是奇数,把n变成 3*n+ 1后砍掉一半,直到该数变为1为止. 请计算需要经过几步才能将n变到1,具体可见样例. 输入: ...
- 查询UNDO使用情况
查看UNDO事务占用情况 SELECT s.username, s.sid, pr.PID, s.OSUSER, s.MACHINE, s.PROGRAM, rs.segment_id, r.usn, ...
- Oracle 数据库有五个必需的后台进程,DBWR,LGWR,CKPT,SMON,PMON
SMON 是系统监视器(System Monitor)的缩写.如果Oracle实例失败,则在SGA中的任何没有写到磁盘中的数据都会丢失.有许多情况可能引起Oracle实例失败,例如,操作系统的崩溃就会 ...
- POJ 2154 Color ——Burnside引理
[题目分析] 数据范围有些大. 然后遍求欧拉函数,遍求和就好了,注意取模. [代码] #include <cstdio> #include <cstring> #include ...