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 ...
随机推荐
- mysql 面安装配置
解压MySQL压缩包 将以下载的MySQL压缩包解压到自定义目录下,我的解压目录是: "D:\Program Files\MySQL\mysql-5.6.13-win32&quo ...
- MySQL 2003 [ERROR] /usr/sbin/mysqld: Incorrect key file for table './keyword_search/keyword.MYI'; try to repair it
今天对一个有四百多万数据的表增加一个功能时,当做数据插入时,显示没有插入,到Linux的log下面查看了发现下面这条错误信息 在stacOver上面找到这句: 存储引擎(MyISAM)支持修复表.你应 ...
- Educational Codeforces Round 26
Educational Codeforces Round 26 困到不行的场,等着中午显示器到了就可以美滋滋了 A. Text Volume time limit per test 1 second ...
- 【java基础 7】java内存区域分析及常见异常
本篇博客,主要是读书笔记总结,还有就是结合培训分享的总结,没有太多的技术含量! java 的自动内存管理机制,使得程序员不用为每一个new惭怍的对象写配对的delete/ free代码(回想起C++的 ...
- Android刷新页面
代码改变世界 Android刷新页面 继承 extends Activity /*** 调用onCreate(), 目的是刷新数据, 从另一activity界面返回到该activity界面时, 此方 ...
- 【bzoj3956】Count 单调栈+可持久化线段树
题目描述 输入 输出 样例输入 3 2 0 2 1 2 1 1 1 3 样例输出 0 3 题解 单调栈+可持久化线段树 本题是 bzoj4826 的弱化版(我为什么做题总喜欢先挑难的做QAQ) $k$ ...
- 【Luogu】P1312Mayan游戏(暴搜)
题目链接 由于是暴搜题,所以这篇博客只讲怎么优化剪枝,以及一些细节. 模拟消除思路:因为消除可以拆分成小的横条或竖条,而这些条的长度至少为三,所以一块可消除的区域至少会有一个中心点.这里的中心点可以不 ...
- HDU——1242Rescue(BFS+优先队列求点图最短路)
Rescue Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...
- 转载自CSDN,结论:windows下按ENTER键应该是\r\n ascii码为 13 10
记得在Windows下学X86汇编语言时,用0DH(\r)和0AH(\n)来输出回车(跳到下一行的开始处).问题来了,在Windows下是 先回车再换行呢还是先换行再回车呢?在Unix系统下换行只有\ ...
- pl/sql小技巧
更正方法: 然后把Automatic statistics的勾选去掉,点击apply即可