react 实现pure render的时候，bind(this)隐患

LiveVideoStack 发布于2019-08-19 17:23 / 1424人阅读

摘要：即使用也不好使。。。原来啊，父组件每次，都会执行这样的引用每次都会改。。所以前后两次其实是不一样的。。那怎么办把去掉不行还必须得用真正的答案是让父组件每次不执行，直接提前在执行好，修改之后改成这样参考。。

pure render 我就不多说了，附上我另一片文章链接 react如何性能达到最大化(前传)
不论你用不用immutable，只要你想达到pure render，下面值得你注意！！！
一天我和往常一样，开开心心得写着react，用着@pureRender，

export default class  extends Component {
...
  render() {
    const {name,age} =this.state;
    return (
      
        //bug 所在
      
    )
  }
...
}

发现一个问题，对于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 (
      
        
      
    )
  }
...
}

参考。。React.js pure render performance anti-pattern（抽空翻译）

GPU云服务器云服务器 react实现轮播图代理服务器的隐患 Pure linux 关闭防火墙的隐患

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78493.html

react如何性能达到最大化(前传)，暨react为啥非得使用immutable.js

摘要：主要讲述我一步一步优化性能的过程。。才能将的性能发挥到极致要是各位看官用过一段时间的，而没有用那么本文非常适合你。那么多么浪费性能，好。。下一篇我讲写，，如何用一行代码胜过千言万语。。这篇文章呢。。主要讲述我一步一步优化react性能的过程。。为啥要用immutable.js呢。毫不夸张的说。有了immutable.js（当然也有其他实现库）。。才能将react的性能发挥到极致！要是...

jubincn 2019-08-19 17:22 评论0 收藏0
React组内开发规范

摘要：部门组件开发规范适用范围部门所有基于开发的包含组件，欢迎提意见。必须书写，规定每个可接受属性的类型，并对加以说明。更多的通用组件规范基本的书写规范基础上，更多的通用的组件开发规范。可以提供与组件内部数据结构紧密相关的操作方法。下面是我们部门总结的内部开发规范（试行版本），欢迎提意见。部门FE React 组件开发规范适用范围部门FE 所有基于React开发的（包含fcui2）组...

Paul_King 2019-08-19 17:53 评论0 收藏0
vue2.0源码分析之理解响应式架构

摘要：分享前啰嗦我之前介绍过如何实现和。我们采用用最精简的代码，还原响应式架构实现以前写的那篇源码分析之如何实现和可以作为本次分享的参考。到现在为止，我们再看那张图是不是就清楚很多了总结我非常喜欢，以上代码为了好展示，都采用最简单的方式呈现。分享前啰嗦我之前介绍过vue1.0如何实现observer和watcher。本想继续写下去，可是vue2.0横空出世..所以直接看vue2.0吧...

chenatu 2019-08-20 11:57 评论0 收藏0
React-Redux源码剖析

摘要：为了能够更好的使用这个工具，今天就对它进行一下源码剖析。它内部的关键代码是在不指定的时候等于，这就意味着的源码剖析到此结束，谢谢观看当然如果指定了剖析就还得继续。好了，源码剖析到此结束，谢谢观看 React-Redux是用在连接React和Redux上的。如果你想同时用这两个框架，那么React-Redux基本就是必须的了。为了能够更好的使用这个工具，今天就对它进行一下源码剖析。 Pr...

Shimmer 2019-08-20 10:11 评论0 收藏0
React学习之漫谈React

摘要：事件系统合成事件的绑定方式合成事件的实现机制事件委派和自动绑定。高阶组件如果已经理解高阶函数，那么理解高阶组件也很容易的。例如我们常见的方法等都是高阶函数。对测试群众来说，从质量保证的角度出发，单元测试覆盖率是事件系统合成事件的绑定方式 `Test` 合成事件的实现机制：事件委派和自动绑定。 React合成事件系统的委托机制，在合成事件内部仅仅是对最外层的容器进行了绑定，并且依赖...

darkbug 2019-08-23 18:38 评论0 收藏0