React 中 的 9 种优化技术

时间: 2019-09-07阅读: 611标签: 优化

谷歌的数据表明,一个有 10 条数据 0.4 秒可以加载完的页面,在变成 30 条数据加载时间为 0.9 秒后,流量和广告收入减少了 20%。当谷歌地图的首页文件大小从 100kb 减少到 70~80kb 时,流量在第一周涨了 10%,接下来的三周涨了 25%。

腾讯的前端工程师根据长期的数据监控也发现页面的一秒钟延迟会造成 9.4% 的 PV 的下降,8.3% 跳出率的增加以及 3.5% 转化率的下降。

可以看出,性能优化商业上来说很重要。

但是,更重要的还是屏幕前我们的用户,让用户在使用产品时有更快更舒适的浏览体验,这算是一种前端工程师的自我修养。

所以今天就分享一下如何去优化我们的 react 项目,进而提升用户体验。


1使用react.Fragment 来避免向 DOM 添加额外的节点

我们在写 react 代码时,会经常遇到返回一组元素的情况,代码像这样:

    class Parent extends react.Component {
        render() {
            return (
                <h1>Hello there!</h1>
                <h1>Hello there again!</h1>
            )
        }
    }
    如果我们写成这样,控制台会报错误:jsX parent expressions must have> ,告诉我们只能返回一个元素,所以我们通常会在最外层包裹一个 div 元素,如下所示:
      class Parent extends react.Component {
          render() {
              return (
                <div>
                  <h1>Hello there!</h1>
                  <h1>Hello there again!</h1>
                </div>
              )
          }
      }
      这样做虽然能正常执行,但是会额外创建不必要的 DOM 节点,这可能会导致创建许多无用的元素,并且在我们的渲染数据来自特定顺序的子组件时,某些情况下也会生成许多无效的节点。请考虑以下代码
      class Table extends react.Component {
        render() {
          return (
            <table>
              <tr>
                <Columns />
              </tr>
            </table>
          );
        }
      }
      
      class Columns extends react.Component {
        render() {
          return (
            <div>
              <td>column one</td>
              <td>column two</td>
            </div>
          );
        }
      }
      上面的代码将在我们的组件中呈现以下内容:
        <table>
          <tr>
            <div>
              <td>column one</td>
              <td>column two</td>
            </div>
          </tr>
        </table>
        这显然不是我们想看到的,react 为我们提供了 Fragments,Fragments 允许我们将子列表分组,而无需向 DOM 添加额外节点。我们可以将组件重新编写为:
          class Columns extends react.Component {
            render() {
              return (
                <react.Fragment>
                  <td>column one</td>
                  <td>column two</td>
                </React.Fragment>
              );
            }
          }



          2使用 React.Lazy 延迟加载组件

          有时我们只想在请求时加载部分组件,例如,仅在单击购物车图标时加载购物车数据,在用户滚动到该点时在长图像列表的底部加载图像等。

          React.Lazy 帮助我们按需加载组件,从而减少我们应用程序的加载时间,因为只加载我们所需的组件。

          React.lazy 接受一个函数,这个函数需要动态调用 import()。它必须返回一个 Promise,该 Promise 需要 resolve 一个 defalut export 的 React 组件。如下所示:

          class MyComponent extends Component{
              render() {
                  return (<div>MyComponent</div>)
              }
          }
          const MyComponent = React.lazy(()=>import('./MyComponent.js'))
          function App() {
              return (<div><MyComponent /></div>)
          }
          在编译时,使用 webpack 解析到该语法时,它会自动地开始进行代码分割。最终,我们的应用程序将会被分成含有多个 UI 片段的包,这些 UI 片段将在需要时加载,如果你使用 Create React App,该功能已配置好,你能立刻使用这个特性。Next.js 也已支持该特性而无需再配置。


          3使用React.Suspense

          在交换组件时,会出现一个小的时间延迟,例如在 MyComponent 组件渲染完成后,包含 OtherComponent 的模块还没有被加载完成,这可能就会出现白屏的情况,我们可以使用加载指示器为此组件做优雅降级,这里我们使用 Suspense 组件来解决。

          React.Suspense 用于包装延迟组件以在加载组件时显示后备内容。

          // MyComponent.js
          const Mycomponent = React.lazy(()=>import('./component.js'))
          function App() {
              return (
              <div>
                  <Suspense fallback={<div>loading ..</div>}>
                      <MyComponent />
                  </Suspense>
              </div>)
          }

          上面的代码中,fallback 属性接受任何在组件加载过程中你想展示的 React 元素。

          你可以将 Suspense 组件置于懒加载组件之上的任何位置,你甚至可以用一个 Suspense 组件包裹多个懒加载组件。

          const OtherComponent = React.lazy(() => import('./OtherComponent'));
          const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
          
          function MyComponent() {
            return (
              <div>
                <Suspense fallback={<div>Loading...</div>}>
                  <section>
                    <OtherComponent />
                    <AnotherComponent />
                  </section>
                </Suspense>
              </div>
            );
          }


          5使用 shouldComponentUpdate() 防止不必要的重新渲染

          当一个组件的 props 或 state 变更,React 会将最新返回的元素与之前渲染的元素进行对比,以此决定是否有必要更新真实的 DOM,当它们不相同时 React 会更新该 DOM。

          即使 React 只更新改变了的 DOM 节点,重新渲染仍然花费了一些时间。在大部分情况下它并不是问题,但是如果渲染的组件非常多时,就会浮现性能上的问题,我们可以通过覆盖生命周期方法 shouldComponentUpdate 来进行提速。

          shouldComponentUpdate 方法会在重新渲染前被触发。其默认实现总是返回 true,如果组件不需要更新,可以在 shouldComponentUpdate 中返回 false 来跳过整个渲染过程。其包括该组件的 render 调用以及之后的操作。

          shouldComponentUpdate(nextProps, nextState) {
             return nextProps.next !== this.props.next  
          }


          6使用React.PureComponent 

          React.PureComponent 与 React.Component 很相似。两者的区别在于 React.Component并未实现 shouldComponentUpdate(),而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数

          如果赋予 React 组件相同的 props 和 state,render() 函数会渲染相同的内容,那么在某些情况下使用 React.PureComponent 可提高性能。

          // 使用 React.PureComponent
          class MyComponent extends React.PureComponent {
              render() {
                  return (<div>MyComponent</div>)
              }
          }
          
          class MyComponent extends React.Component {
              render() {
                  return (<div>MyComponent</div>)
              }
          }

          React.PureComponent 中的 shouldComponentUpdate() 仅作对象的浅层比较。如果对象中包含复杂的数据结构,则有可能因为无法检查深层的差别,产生错误的比对结果。仅在你的 props 和 state 较为简单时,才使用 React.PureComponent,或者在深层数据结构发生变化时调用 forceUpdate() 来确保组件被正确地更新。你也可以考虑使用 immutable 对象加速嵌套数据的比较。


          7使用 React.memo 来缓存组件

          React.memo 使用了缓存,缓存技术用于通过存储昂贵的函数调用的结果来加速程序,并在再次发生相同的输入时返回缓存的结果。

          如果你的函数组件在给定相同 props 的情况下渲染相同的结果,那么你可以通过将其包装在 React.memo 中调用,以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下,React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。
          默认情况下其只会对复杂对象做浅层对比,如果你想要控制对比过程,那么请将自定义的比较函数通过第二个参数传入来实现。
            const MyComponent = ({user}) =>{
                const {name, occupation} = user;
                return (
                    <div>
                        <h4>{name}</h4>
                        <p>{occupation}</p>
                    </div>
                )
            }
            // 比较函数
            function areEqual(prevProps, nextProps) {
              /*
              如果把 nextProps 传入 render 方法的返回结果与
              将 prevProps 传入 render 方法的返回结果一致则返回 true,
              否则返回 false
              */
            }
            export default React.memo(MyComponent, areEqual);


            8使用 ComponentDidUnmount() 删除未使用的DOM 元素 

            有些时候,存在一些未使用的代码会导致内存泄漏的问题,React 通过向我们提供componentWillUnmount 方法来解决这个问题。

            componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作,例如,清除 定时器,取消网络请求或清除在 componentDidMount() 中创建的订阅等。

            例如,我们可以在组件销毁之前,清除一些事件处理程序:

              componentWillUnmount() {
                 document.removeEventListener("click", this.closeMenu);
              }

              componentWillUnmount() 中不应调用 setState(),因为该组件将永远不会重新渲染。组件实例卸载后,将永远不会再挂载它。


              9其他优化技术

              虚拟化长列表
              如果你的应用渲染了长列表(上百甚至上千的数据),我们推荐使用“虚拟滚动”技术。这项技术会在有限的时间内仅渲染有限的内容,并奇迹般地降低重新渲染组件消耗的时间,以及创建 DOM 节点的数量。

              react-window 和 react-virtualized 是热门的虚拟滚动库。它们提供了多种可复用的组件,用于展示列表、网格和表格数据。如果你想要一些针对你的应用做定制优化,你也可以创建你自己的虚拟滚动组件,就像 Twitter 所做的。


              使用 Chrome Performance 标签分析组件

              在开发模式下,你可以通过支持的浏览器可视化地了解组件是如何 挂载、更新以及卸载的。例如:


              在 Chrome 中进行如下操作:

              1. 临时禁用所有的 Chrome 扩展,尤其是 React 开发者工具。他们会严重干扰度量结果!
              2. 确保你是在 React 的开发模式下运行应用。
              3. 打开 Chrome 开发者工具的 Performance 标签并按下 Record。
              4. 对你想分析的行为进行复现。尽量在 20 秒内完成以避免 Chrome 卡住。
              5. 停止记录。
              6. 在 User Timing 标签下会显示 React 归类好的事件。


              最后,我们探索了一些可以优化 React 应用程序的一些提高性能的方法,不局限于此。我们应该根据需要有针对性的优化应用程序,因为在某些简单的场景中,过度的优化,可能会得不偿失。

              来自:https://mp.weixin.qq.com/s/R2oGuX-WT8Muwiur8vo0qw

              站长推荐

              1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

              2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

              链接: http://www.fly63.com/article/detial/5253

              关闭

              JS性能优化之文档片段createDocumentFragment

              DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到DOM树。在DOM树中,文档片段被其所有的子元素所代替。因为文档片段存在于内存中,并不在DOM树中

              js的防抖节流优化高频触发

              js的防抖就是比如一个水龙头坏了一直在滴水,我们为了节约用水,那么我们会想办法让他不再滴的那么快,这就是防抖。常见的比如scroll,onresize这些高频触发的情况。

              Vue代码优化之mixins 混合器的使用

              主要抽离组件共用的代码,如各个页面中分页组件的data、methods,和ui原型中统一的confirm和alert弹窗以及加载的进度条等

              移动 H5 首屏加速、优化方案

              随着移动设备性能不断增强,web 页面的性能体验逐渐变得可以接受,又因为 web 开发模式的诸多好处(跨平台,动态更新,减体积,无限扩展)

              客户端内H5页面的首屏性能优化

              性能优化是前端开发中不可避免的一个话题。本文将记录一次客户端内H5页面首屏性能优化的项目。信息流App是当下最流行的产品之一,如今日头条等。我所在的团队也是在做这样一款信息流App

              react性能优化之bind(this)

              bind在react组件中使用不当也会影响性能,bind在render里面直接onClick = this.onClick.bind(this),这样写的话,render每次都会执行这段

              webpack常用构建优化总览

              读了《深入浅出webpack》总结一下常用的webpack的构建优化策略,可通过以下手段来提升项目构建时的速度,理论上我们项目的第三方依赖均应在自己的工程的node_modules下,所以我们可以设置查找目录

              webpack构建速度常规优化方法

              使用webpack.DllPlugin优化,其实并没有优化速度,只是把一些不需要经常变更的部分提前构建,之后只需要构建变更的部分就可以了,确实优化了时间,使用external,不构建基础脚本,使用外部脚本引入,确实减少了时间

              网站性能优化实战

              读取缓存→DNS查询→TCP链接→发起请求→接收响应→处理HTML元素→加载完成。CSS属性读写分离:浏览器每次对元素样式进行读操作时,都必须进行一次重新渲染(重排 + 重绘)

              前端性能优化之重排和重绘

              浏览器下载完页面所有的资源后,就要开始构建DOM树,于此同时还会构建渲染树(Render Tree)。(其实在构建渲染树之前,和DOM树同期会构建Style Tree。DOM树与Style Tree合并为渲染树)

              点击更多...

              内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

              文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

              小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广