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 ...
随机推荐
- leepcode(斐波那契数列与float("inf")无穷大)解析
12.加一 给定一个由整数组成的非空数组所表示的非负整数,在该数的基础上加一. 最高位数字存放在数组的首位, 数组中每个元素只存储一个数字. 你可以假设除了整数 0 之外,这个整数不会以零开头. 示例 ...
- eclipse代码格式化快捷键无法使用
[产生原因] Ctrl+Shift+F快捷键组合被其他应用占有,如输入法. [解决方案] 关闭或更换其他应用快捷键或更换eclipse对应的快捷键组合.
- Android自动化测试Uiautomator--UiObject接口简介
UiObject可以理解为控件的对象,主要对对象进行操作.按照一定条件(UiSelector)获取UiObject对象,之后对对象进行相应的操作,如下图所示. 对于对象的操作主要有点击/长按.拖动/滑 ...
- ASP.NET MVC 通用角色权限管理系统
RightControl 介绍 .NET 通用后台角色权限管理系统,已完成.项目地址:http://106.14.77.184/Admin/Login 码云地址:https://gitee.com/L ...
- 二分查找与 bisect 模块
Python 的列表(list)内部实现是一个数组,也就是一个线性表.在列表中查找元素可以使用 list.index() 方法,其时间复杂度为O(n).对于大数据量,则可以用二分查找进行优化.二分查找 ...
- Hibernate框架的主键生成策略
在Hibernate中,id元素的<generator>子元素用于生成持久化类的对象的唯一标识符,也就是主键.Hibernate框架中定义了许多主键生成策略类,也叫生成器类.所有的生成器类 ...
- 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 ...
- iOS控件-3级城市列表-plist版
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...
- spring之lazy-init
lazy-init:延迟实例化 ApplicationContext实现的默认行为就是在启动服务器时将所有singleton bean提前进行实例化.提前实例化意味着作为初始化过程的一部分,appli ...
- Hubtown
Hubtown 时间限制: 10 Sec 内存限制: 256 MB 题目描述 Hubtown is a large Nordic city which is home to n citizens. ...