React 中 的 9 种优化技术

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

谷歌的数据表明,一个有 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

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

              如何让你的 JS 写得更漂亮?

              网上有不少关于JS编写优化建议,这里我根据自己的经验提出一些比较有用的意见。1. 按强类型风格写代码,JS是弱类型的,但是写代码的时候不能太随意,写得太随意也体现了编码风格不好。下面分点说明:

              首页白屏优化实践

              自从前端三大框架React、Vue、Angular面世以来,前端开发逐渐趋向规范化、统一化,大多数时候新建前端项目,首先想到使用的技术一定是三大框架之一,框架给前端开发带来了极大的便利和规范,但是由于这三大框架都是JS驱动

              如何提升网站访问速度?

              但网站打开速度变的不可科学的时候,怎么检测打开速度是多少?检测网站是否被劫持、域名是否被墙、DNS污染检测、网站打开速度检测等信息。如果你是网站使用者,你可以通过升级宽带、光纤、升级CPU内存

              Web前端性能优化

              web性能优化,主要分为前端和后台两个部分性能优化,后台性能优化决定了web能不能用,前端优化决定了其好不好用,也就是牵涉到前端用户体验和web易用性等情况,所以前端性能与用户体验是有着极大的关联的。

              webpack构建速度常规优化方法

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

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

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

              如何设置网站的robots.txt?

              做过网站优化的朋友都知道,搜索引擎蜘蛛爬行抓取网站时首先会去访问根目录下的robots.txt文件,如果robots文件存在,则会根据robots文件内设置的规则进行爬行抓取,如果文件不存在则会顺着首页进行抓取,那么robots文件的工作原理是什么呢?

              Webpack 打包后代码执行时机分析与优化

              代码执行时机将决定着是否能够正常执行,当依赖文件没加载完成就开始执行、使用对应模块,那么将会导致执行异常。这在“ 存在资源加载失败时,加载重试影响原来文件的执行顺序 ”的场景下尤为常见。

              运用meta标签进行网站优化

              Set-Cookie(cookie设定)说明:如果网页过期,存盘的cookie将会被删除(必须是GMT的时间格式); Window-target(显示窗口的设定)说明:强制页面在当前窗口以独立页面显示----用来防止别人在框架里面调用你的页面

              网站优化重点注意事项

              可能很多的小白还不清楚,网站优化的重点在哪里,到底是站内优化重要还是站外优化重要,要知道的是,百度除了相关说明的,外链对网站的帮助已经越来越小,但是并不是代表就可以不去做

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

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

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