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

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

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

每次渲染时,都会在内存中创建一个新函数(因为它是在 render 函数中创建的),并将对内存中新地址的新引用传递给<Button />,虽然输入完全没有变化,该 Button 组件还是会重新渲染。

修复

如果函数不依赖于的组件(没有 this 上下文),则可以在组件外部定义它。 组件的所有实例都将使用相同的函数引用,因为该函数在所有情况下都是相同的。

  1. const createAlertBox = () => alert('!'); 
  2.  
  3. class SomeComponent extends React.PureComponent { 
  4.  
  5.   get instructions() { 
  6.     if (this.props.do) { 
  7.       return 'Click the button: '; 
  8.     } 
  9.     return 'Do NOT click the button: '; 
  10.   } 
  11.  
  12.   render() { 
  13.     return ( 
  14.       <div> 
  15.         {this.instructions} 
  16.         <Button onClick={createAlertBox} /> 
  17.       </div> 
  18.     ); 
  19.   } 

和前面的例子相反,createAlertBox 在每次渲染中仍然有着有相同的引用,因此按钮就不会重新渲染了。

虽然 Button 是一个小型,快速渲染的组件,但你可能会在大型,复杂,渲染速度慢的组件上看到这些内联定义,它可能会让你的 React 应用程序陷入囧境,所以最好不要在 render 方法中定义这些函数。

如果函数确实依赖于组件,以至于无法在组件外部定义它,你可以将组件的方法作为事件处理传递过去:

  1. class SomeComponent extends React.PureComponent { 
  2.  
  3.   createAlertBox = () => { 
  4.     alert(this.props.message); 
  5.   }; 
  6.  
  7.   get instructions() { 
  8.     if (this.props.do) { 
  9.       return 'Click the button: '; 
  10.     } 
  11.     return 'Do NOT click the button: '; 
  12.   } 
  13.  
  14.   render() { 
  15.     return ( 
  16.       <div> 
  17.         {this.instructions} 
  18.         <Button onClick={this.createAlertBox} /> 
  19.       </div> 
  20.     ); 
  21.   } 

(编辑:惠州站长网)

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

推荐文章
    热点阅读