Web性能优化:缓存React事件来提高性能
发布时间:2019-03-22 15:13:52 所属栏目:建站 来源:前端小智
导读:副标题#e# JavaScript中一个不被重视的概念是对象和函数是如何引用的,并且直接影响 React性能。 如果创建两个完全相同的函数,它们仍然不相等,试试下面的例子: constfunctionOne=function(){alert('Helloworld!');}; constfunctionTwo=function(){alert(
每次渲染时,都会在内存中创建一个新函数(因为它是在 render 函数中创建的),并将对内存中新地址的新引用传递给 修复如果函数不依赖于的组件(没有 this 上下文),则可以在组件外部定义它。 组件的所有实例都将使用相同的函数引用,因为该函数在所有情况下都是相同的。
和前面的例子相反,createAlertBox 在每次渲染中仍然有着有相同的引用,因此按钮就不会重新渲染了。 虽然 Button 是一个小型,快速渲染的组件,但你可能会在大型,复杂,渲染速度慢的组件上看到这些内联定义,它可能会让你的 React 应用程序陷入囧境,所以最好不要在 render 方法中定义这些函数。 如果函数确实依赖于组件,以至于无法在组件外部定义它,你可以将组件的方法作为事件处理传递过去:
(编辑:惠州站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |