加入收藏 | 设为首页 | 会员中心 | 我要投稿 惠州站长网 (https://www.0752zz.com.cn/)- 办公协同、云通信、物联设备、操作系统、高性能计算!
当前位置: 首页 > 建站 > 正文

Web性能优化:缓存React事件来提高性能

发布时间:2019-03-22 15:13:52 所属栏目:建站 来源:前端小智
导读:副标题#e# JavaScript中一个不被重视的概念是对象和函数是如何引用的,并且直接影响 React性能。 如果创建两个完全相同的函数,它们仍然不相等,试试下面的例子: constfunctionOne=function(){alert('Helloworld!');}; constfunctionTwo=function(){alert(

在这种情况下,SomeComponent 的每个实例都有一个不同的警告框。 Button 的click事件侦听器需要独立于 SomeComponent。 通过传递 createAlertBox 方法,它就和 SomeComponent 重新渲染无关了,甚至和 message 这个属性是否修改也没有关系。createAlertBox 内存中的地址不会改变,这意味着 Button 不需要重新渲染,节省了处理时间并提高了应用程序的渲染速度

但如果函数是动态的呢?

修复(高级)

这里有个非常常见的使用情况,在简单的组件里面,有很多独立的动态事件监听器,例如在遍历数组的时候:

  1. class SomeComponent extends React.PureComponent { 
  2.   render() { 
  3.     return ( 
  4.       <ul> 
  5.         {this.props.list.map(listItem => 
  6.           <li key={listItem.text}> 
  7.             <Button onClick={() => alert(listItem.text)} /> 
  8.           </li> 
  9.         )} 
  10.       </ul> 
  11.     ); 
  12.   } 

在本例中,有一个可变数量的按钮,生成一个可变数量的事件监听器,每个监听器都有一个独特的函数,在创建 SomeComponent 时不可能知道它是什么。怎样才能解决这个难题呢?

输入记忆,或者简单地称为缓存。 对于每个唯一值,创建并缓存一个函数; 对于将来对该唯一值的所有引用,返回先前缓存的函数。

(编辑:惠州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读