9个最好的React应用程序的最佳优化技术

大多数前端开发人员都喜欢上react本机开发, 因为它简化了执行UI更新的过程, 但是无论大小大小有时都会变得滞后, 仍然有一些React应用程序。不幸的是, 通过添加像React这样的前端库并不能立即提高应用程序性能。为此, 你必须正确配置React。

当你知道如何有效地衡量和优化应用程序组件时, 你可以对React应用程序的执行速度进行重大改进。在本文中, 我们将介绍如何优化React, 以及提供一些JavaScript最佳实践来交付更多流畅的用户。让我们从一些基本概念开始。

React如何工作？

React是流行的前端JavaScript库, 开发人员可以使用它来构建和比较虚拟DOM, 这是Vue.js等其他库中的常见功能。所有react应用都具有一个根组件, 该根组件以树状形式分支, 负责呈现UI。

之后, React记录用户交互和其他请求的轨迹, 以虚拟地重新渲染UI。因此, React使用一种”差异”算法来协调当前用户界面和新用户界面之间的差异, 该算法仅允许根据用户看到的内容进行必要的更改, 而无需从头开始重新加载。

如何优化React？

在对应用程序进行任何更改之前, 必须执行一些测量。如果你怀疑一小段代码会拖慢一切, 那么你可能会想立即解决它, 但要利用React性能测量工具。它可以帮助你量化进度, 让你知道优化工作的重点。

＃1使用不可变数据结构

如果你想让React.PureComponents自动检查在复杂阶段更改发生的位置, 则必须通过复制具有数据更改的对象而不是直接更改对象来建立不可变的数据结构。这样, 你可以简化检测更改的过程, 从而可以帮助你优化速度。

＃2利用React.PureComponents

所有仅包含原始数据的组件, 都可以通过使其成为一个React.PureComponent来执行浅表比较, 该React.PureComponent自动实现一个名为shouldComponentUpdate()的函数。通过使用它, 它可以通过优化常规组件来加快React的重新渲染过程。

＃3消除不必要的源代码

当开发人员的部分代码导致错误和错误, 从而降低应用程序性能时, React会自动警告开发人员。我们有办法解决。如果你深入研究React的源代码, 请抓住(process.env.NODE_ENV！=’production’)行, 该行负责发送这些错误警告。

删除源代码时请格外小心, 因为对代码进行一次较小的更改可能会导致应用程序崩溃。如果你使用create-react-app来开发项目, 则只需运行给定的代码即可获得生产版本, 而无需额外的代码：

npm run build

＃4更多使用Constant和Inline元素

React常量元素将JSX元素视为值, 并通过减少对React.createClass的调用将其移至更高的范围。与此类似, React Inline Elements通过返回JSX元素将其转换为对象文字来实现相同的目标。只需配置你的packahe.json文件即可进行设置：

"babel": {
    "env": {
        "production": {
            "plugins": ["transform-react-constant-elements", "transform-react-inline-elements"]
        }
    }
}

＃5拆分拆分和拆分

大多数开发人员喜欢将前端Javascript代码捆绑到一个缩小文件中时显得笨拙, 这似乎是小型React应用程序的最佳选择。但是, 随着项目的发展, 将捆绑的JavaScript文件传送到用户的浏览器的过程可能会更加耗时。因此, Webpack用户可以利用内置的代码拆分功能将其JavaSCript代码拆分为多个块, 然后可以根据需要将这些块交付给浏览器。

＃6 Gzip和Brotli压缩

使JS文件加载越来越快的另一种方法是在Web服务器上启用Gzip和Brotli, 因为它们可以通过大大缩短渲染时间来帮助减少客户端的数据使用量。此外, 始终尝试选择将支持和缓存Brotli压缩资产的CDN。

＃7使用react插件-Eslint

如果你还没有真正开始使用ESLint插件, 那么这是你所有JavaScript项目的最佳时机。 eslint-plugin-react通过执行最佳实践来帮助新手编码, 从长远来看, 它也可以提高你的编码技能。

＃8调用高阶组件

React中的Recompose库包括几个高阶组件, 可以调用它们来限制所有不必要的渲染。例如, 输入给定的设置以仅在props更改时使组件重新渲染：

@pure 
class MyComponent extends Component { 
    render() {
        //
    }
}

让我们说一下, 如果你要在prop 1和prop 2更改时重新渲染组件, 而在prop 3更改时不更改。为了这：

@onlyUpdateForKeys(['prop1', 'prop2'])
class MyComponent extends Component { 
    render() {
        /// ...
    }
}

＃9尝试使用Connect()

使用Redux时, 可以使用更高阶的组件connect()来简化工作。仅当指定值发生更改时, 所有连接的组件才会重新渲染。例如, 给定的代码片段可确保仅在prop1更改时重新渲染组件：

connect(state => ({
    prop1: state.prop1
}))(SomeComponent)

如果mapStateToProps函数执行计算, 则它实际上可以触发重新渲染。

connect(state => ({
    computedData: {
        height: state.height, width: state.width
    }
}))(SomeComponent)

要解决此问题, 请使用重新选择功能将依赖项声明为派生状态：

import { createSelector } from "reselect";

const selectComputedData = createSelector(
    state => state.height, state => state.width, (height, width) => ({
        height, width
    })
)

connect(state => ({
    computedData: selectComputedData(state)
}))(SomeComponent)

包起来！

React应用程序准确工作的关键在于确保组件可以在绝对需要时进行更新。你还可以使用其他一些工具, 例如”为什么要更新”库, React Developer Tools扩展或Chrome DevTools性能时间表来提高性能。为了跟踪进度, 在更改代码前后, 请不要忘记运行基准测试。保持学习！