您好,欢迎来到12图资源库!分享精神,快乐你我!我们只是素材的搬运工!!
  • 首 页
  • 当前位置:首页 > 开发 > WEB开发 >
    React功用优化总结(2)
    时间:2021-08-27 21:06 来源:网络整理 作者:网络 浏览:收藏 挑错 推荐 打印

    按照 React 团队的说法,shouldComponentUpdate是保证功用的紧急出口,既然是紧急出口,那就意味着我们随便用不到它。但既然有这样一个紧急出口,那阐明有时分它还是很有必要的。所以我们要搞清楚究竟什么时分才需求运用这个紧急出口。

    运用准绳

    当你觉得,被改动的state或许props,不需求更新视图时,你就应该思索要不要运用它。

    需求留意的一个中央是:改动之后,又不需求更新视图的形状,也不应该放在state中。

    shouldComponentUpdate的运用,也是有代价的。假设处置得不好,甚至比多render一次更消耗功用,另外也会使组件的复杂度增大,普通状况下运用PureComponent即可;

    React.memo

    假设你的组件在相反 props 的状况下渲染相反的结果,那么你可以经过将其包装在 React.memo 中调用,以此经过记忆组件渲染结果的方式来提高组件的功用表现。这意味着在这种状况下,React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。

    React.memo 仅反省 props 变更 。假设函数组件被 React.memo 包裹,且其完成中拥有 useState,useReducer 或 useContext 的 Hook,当 state 或 context 发作变化时,它仍会重新渲染。

    默许状况下其只会对复杂对象做浅层比照,假设你想要控制比照进程,那么请将自定义的比较函数经过第二个参数传入来完成。

    function MyComponent(props) { 

      /* 运用 props 渲染 */ 

    function areEqual(prevProps, nextProps) { 

      /* 

      假设把 nextProps 传入 render 办法的前往结果与 

      将 prevProps 传入 render 办法的前往结果分歧则前往 true, 

      否则前往 false 

      */ 

    export default React.memo(MyComponent, areEqual); 

    留意

    与 class 组件中 shouldComponentUpdate() 办法不同的是,假设 props 相等,areEqual 会前往 true;假设 props 不相等,则前往 false。这与 shouldComponentUpdate 办法的前往值相反。

    合理运用Context

    Context 提供了一个无需为每层组件手动添加 props,就能在组件树间停止数据传递的办法。正是由于其这个特点,它是可以穿透React.memo或许shouldComponentUpdate的比对的,也就是说,一旦 Context 的 Value 变动,一切依赖该 Context 的组件会全部 forceUpdate.这个和 Mobx 和 Vue 的照应式系统不同,Context API 并不能细粒度地检测哪些组件依赖哪些形状。

    准绳

    Context中只定义被大少数组件所共用的属性,例如以后用户的信息、主题或许选择的言语。

    避免运用匿名函数

    首先来看下下面这段代码

    const MenuContainer = ({ list }) => ( 

      <Menu> 

        {list.map((i) => ( 

          <MenuItem key={i.id} onClick={() => handleClick(i.id)} value={i.value} /> 

        ))} 

      </Menu> 

    ); 

    下面这个写法看起来是比较繁复,但是有一个潜在成绩是匿名函数在每次渲染时都会有不同的援用,这样就会招致Menu组件会出现重复渲染的成绩;可以运用useCallback来停止优化:

    const MenuContainer = ({ list }) => { 

      const handleClick = useCallback( 

        (id) => () => { 

          // ... 

        }, 

        [], 

      ); 

     

      return ( 

        <Menu> 

          {list.map((i) => ( 

            <MenuItem key={i.id} id={i.id} onClick={handleClick(i.id)} value={i.value} /> 

          ))} 

        </Menu> 

      ); 

    }; 

    增加渲染的节点 组件懒加载

    组件懒加载可以让react运用在真正需求展现这个组件的时分再去展现,可以比较有效的增加渲染的节点数提高页面的加载速度

    React官方在16.6版本后引入了新的特性:React.lazy 和 React.Suspense,这两个组件的配合运用可以比较方便停止组件懒加载的完成;

    React.lazy

    该办法主要的作用就是可以定义一个静态加载的组件,这可以直接缩减打包后bundle的体积,并且可以延迟加载在初次渲染时不需求渲染的组件,代码示例如下:

    运用之前

    import SomeComponent from './SomeComponent'

    运用之后

    const SomeComponent = React.lazy(() => import('./SomeComponent')); 

    运用 React.lazy 的静态引入特性需求 JS 环境支持 Promise。在 IE11 及以下版本的阅读器中需求经过引入 polyfill 来运用该特性。

    React.Suspense

    该组件目前主要的作用就是配合渲染lazy组件,这样就可以在等候加载lazy组件时展现loading元素,不至于直接空白,提升用户体验;

    Suspense组件中的 fallback 属性接受任何在组件加载进程中你想展现的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置,你甚至可以用一个 Suspense 组件包裹多个懒加载组件。

    代码示例如下:

    import React, { Suspense } from 'react'

     

    const OtherComponent = React.lazy(() => import('./OtherComponent')); 

    (责任编辑:admin)