react实现pure render时bind(this)隐患需注意!

pure render 我就不多说了，附上我另一片文章链接 react如何性能达到最大化(前传)

不论你用不用immutable，只要你想达到pure render，下面值得你注意！

一天我和往常一样，开开心心得写着react，用着@pureRender，

export default class extends Component {
...
 render() {
  const {name,age} =this.state;
  return (
   <div>
    <Person name={name} age={age} onClick={this._handleClick.bind(this)}></Person>//bug 所在
   </div>
  )
 }
...
}

发现一个问题，对于Person这个子组件来说，在父组件re－render的时候，即使Person得前后两个props都没改变，它依旧会re－render，即使用immutable.js也不好使。

原来啊，父组件每次render，_handleClick都会执行bind(this) 这样_handleClick的引用每次都会改，所以Person前后两次props其实是不一样的。

那怎么办？把bind（this）去掉？不行 还必须得用

真正的答案是 让父组件每次render 不执行bind（this），直接提前在constructor执行好，修改之后

export default class extends Component {
 constructor(props){
  super(props)
  this._handleClick=this._handleClick.bind(this)//改成这样
 }
 render() {
  const {name,age} =this.state;
  return (
   <div>
    <Person name={name} age={age} onClick={this._handleClick}></Person>
   </div>
  )
 }
...
}

参考：React.js pure render performance anti-pattern

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS中改变this指向的方法(call和apply、bind)

    this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);

  • 分享一道关于闭包、bind和this的面试题

    要解决的问题是针对下面这个ul,为每一个li添加一个点击事件,弹出对应的index <ul id="text"> <li>这是第一个li</li> <li>这是第二个li</li> <li>这是第三个li</li> </ul> 解答一:bind,将当前匿名函数指向this,将i当参数传入 var init = function(){ var obj = document.getElement

  • 浅谈JavaScript中的apply/call/bind和this的使用

    fun.apply(context,[argsArray]) 立即调用fun,同时将fun函数原来的this指向传入的新context对象,实现同一个方法在不同对象上重复使用. context:传入的对象,替代fun函数原来的this: argsArray:一个数组或者类数组对象,其中的数组参数会被展开作为单独的实参传给 fun 函数,需要注意参数的顺序. fun.call(context,[arg1],[arg2],[-]) 同apply,只是参数列表不同,call的参数需要分开一个一个传入.

  • react实现pure render时bind(this)隐患需注意!

    pure render 我就不多说了,附上我另一片文章链接 react如何性能达到最大化(前传) 不论你用不用immutable,只要你想达到pure render,下面值得你注意! 一天我和往常一样,开开心心得写着react,用着@pureRender, export default class extends Component { ... render() { const {name,age} =this.state; return ( <div> <Person name={na

  • React中的render何时执行过程

    我们都知道Render在组件实例化和存在期时都会被执行.实例化在componentWillMount执行完成后就会被执行,这个没什么好说的.在这里我们主要分析存在期组件更新时的执行. 存在期的方法包含: - componentWillReceiveProps - shouldComponentUpdate - componentWillUpdate - render - componentDidUpdate 这些方法会在组件的状态或者属性发生发生变化时被执行,如果我们使用了Redux,那么就只有

  • React中使用collections时key的重要性详解

    React中使用collections时key的重要性详解

    前言 大家应该都知道,在 React 中 render collections 的 items 时, Keys 扮演着重要的角色, 它直接决定接下来的 rendered 和 re-rendered,下面话不多说,来一起看看详细的介绍: React 不会 render 重复的 keys 为了彻底明白这个, 我们来声明一个这样的数组 const nums = [1, 2, 3, 5, 2]; // 它有两个元素的值是相等的 现在, 我们在 react 中来 render <ul> {nums.ma

  • React中关于render()的用法及说明

    目录 React中的render() 1.render() 2.当 render 被调用时 3.render() 函数应该为纯函数 4.如需与浏览器进行交互 5.在React.Component类 6.在react中触发render的有4条路径 7.生命周期流程图(来源于官网) React render在什么时候会被触发? 总结 React中的render() 1.render() 是 class 组件中唯一必须实现的方法 2.当 render 被调用时 它会检查 this.props 和 th

  • 谈谈React中的Render Props模式

    概述 Render Props模式是一种非常灵活复用性非常高的模式,它可以把特定行为或功能封装成一个组件,提供给其他组件使用让其他组件拥有这样的能力,接下来我们一步一步来看React组件中如何实现这样的功能. 简要介绍:分离UI与业务的方法一直在演进,从早期的mixins,到HOC,再到Render Prop,本文主要对比HOC,谈谈Render Props 1 . 早期的mixins 早期复用业务通过mixins来实现,比如组件A和组件B中,有一些公用函数,通过mixins剥离这些公用部分,并

  • react脚手架如何配置less和ant按需加载的方法步骤

    前言 create-react-app是由React官方提供并推荐使用构建新的React单页面应用程序的最佳方式,其构建的项目默认是不支持less的,需要我们手动集成 一.react脚手架搭建 1.先全局安装create-react-app(提前需要安装node) npm install -g create-react-app 2.然后通过create-react-app创建项目my-app create-react-app my-app 3.最后通过cd进入项目文件夹并启动 cd my-app

  • React组件中的this的具体使用

    React组件的this是什么 通过编写一个简单组件,并渲染出来,分别打印出自定义函数和render中的this: import React from 'react'; const STR = '被调用,this指向:'; class App extends React.Component{ constructor(){ super() } //测试函数 handler() { console.log(`handler ${STR}`,this); } render(){ console.log

  • 详解react关于事件绑定this的四种方式

    在react组件中,每个方法的上下文都会指向该组件的实例,即自动绑定this为当前组件,而且react还会对这种引用进行缓存,以达到cpu和内存的最大化.在使用了es6 class或者纯函数时,这种自动绑定就不复存在了,我们需要手动实现this的绑定 React事件绑定类似于DOM事件绑定,区别如下: 1.React事件的用驼峰法命名,DOM事件事件命名是小写 2.通过jsx,传递一个函数作为event handler,而不是一个字符串. 3.React事件不能通过返回false来阻止默认事件,

  • React.js绑定this的5种方法(小结)

    this在javascript中已经相当灵活,把它放到React中给我们的选择就更加困惑了.下面一起来看看React this的5种绑定方法. 1.使用React.createClass 如果你使用的是React 15及以下的版本,你可能使用过React.createClass函数来创建一个组件.你在里面创建的所有函数的this将会自动绑定到组件上. const App = React.createClass({ handleClick() { console.log('this > ', th

  • 100行代码理解和分析vue2.0响应式架构

    100行代码理解和分析vue2.0响应式架构

    分享前啰嗦 我之前介绍过vue1.0如何实现observer和watcher.本想继续写下去,可是vue2.0横空出世..所以直接看vue2.0吧.这篇文章在公司分享过,终于写出来了.我们采用用最精简的代码,还原vue2.0响应式架构实现. 以前写的那篇 vue 源码分析之如何实现 observer 和 watcher可以作为本次分享的参考. 不过不看也没关系,但是最好了解下Object.defineProperty 本文分享什么 理解vue2.0的响应式架构,就是下面这张图 顺带介绍他比rea

随机推荐