大幅提升 React 性能的6个建议

Yu_Huang 发布于2019-08-21 11:22 / 3174人阅读

摘要：在不做任何优化的情况下性能也非常好，然而通过一些小小的优化，可以让性能进一步提升，通过以下这条建议，可以数十倍加快渲染速度设置为在开发环境下，有完整的警告和错误检查，但它们不是为生产环境准备的，如果你看过的源码，你会看到很多，这些代码对于最

React 在不做任何优化的情况下性能也非常好，然而通过一些小小的优化，可以让性能进一步提升，通过以下这6条建议，可以数十倍加快渲染速度

设置 NODE_ENV 为 Production

React 在开发环境下，有完整的警告和错误检查，但它们不是为生产环境准备的，如果你看过 React 的源码，你会看到很多 if (process.env.NODE_ENV != "production")，这些代码对于最终用户是不需要的，而且访问 process.env.NODE_ENV 会非常慢，对于生产环境而言，完全可以移除这些代码

如果你使用 Webpack，你可以使用 DefinePlugin 来替换 process.env.NODE_ENV 为 "production"，然后使用 UglifyJsPlugin 移除这些不会执行的代码

// webpack.config.js
...
plugins: [
    new webpack.DefinePlugin({
        "process.env.NODE_ENV": JSON.stringify("production")
    }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    })
]
...

React 15 的渲染速度比 0.14 快约 25%

在 React 15 的更新中非常重要的一项是，使用在现代化浏览器中性能更好的 document.createElement 替换 innerHTML，这一改动也意味着 React 将不再支持 IE8

Babel Constant 和 Inline Elements 转换

Babel 为开发者们提供了 React Constant Elements 和 React Inline Elements，这两款插件能够在编译阶段将代码转换成更高效的形式，注意仅将它们用于生产环境

封装集合渲染为独立组件

这一点在循环渲染集合组件时尤其重要，React 在渲染大型集合是性能十分糟糕，原因是 React 会在每次更新中全部重新渲染，因此建议将渲染集合的部分装为独立的组件渲染

// Bad
class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (
            {user.name}
            
                {todos.map(todo => )}
            
        )
    }
}

// Good
// 当 user.name 更新时，列表不会重新渲染
class MyComponent extends Component {
    render() {
        const {todos, user} = this.props;
        return (
            {user.name}
            
        )
    }
}

class TodosView extends Component {
    render() {
        const {todos} = this.props;
        return (
            {todos.map(todo => )}
        )
    }
}

尽早绑定方法

在 render() 中绑定的方法应该尽早声明，而不是在渲染时定义

// Bad
render() {
    return  { alert(this.state.text) }} />
}

// Good
constructor() {
    this.handleClick = this.handleClick.bind(this);
}

handleClick() {
    alert(this.state.text);
}

render() {
    return 
}

不变组件禁用更新

对于不需要更新的组件，可以在 shouldComponentUpdate() 中 return false，或者使用 Stateless Component

// Bad
class Logo extends Component {
    render() {
        return ;
    }
}

// Good
class Logo extends Component {
    shouldComponentUpdate() {
        return false;
    }

    render() {
        return ;
    }
}

// or Stateless Component
const Logo = () => 
;

参考文章

React performance

How to Make Your React Apps 15x Faster

Avoid bind when passing props

Optimizing rendering React components

原文地址: http://t.cn/RIOBUe4

云服务器 GPU云服务器 6个机柜的机房大概需要多少钱性能提升提升性能方案提升区块链性能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86633.html

前端每周清单第 34 期：Vue 现状盘点与 3.0 展望，React 代码迁移与优化，图片优化详论

摘要：工程实践立足实践，提示实际水平内联函数与性能很多关于性能优化的文章都会谈及内联函数，其也是常见的被诟病为拖慢性能表现的元凶之一不过本文却是打破砂锅问到底，论证了内联函数并不一定就会拖慢性能，过度的性能优化反而会有损于应用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

CoderStudy 2019-08-21 16:56 评论0 收藏0
前端每周清单第 43 期：2017 JavaScript 回顾、Rust 与 WebAssembly

摘要：杨冀龙是安全焦点民间白帽黑客组织核心成员，被浪潮之巅评为中国新一代黑客领军人物之一他在本文中依次分享了对于黑客的定义如何从黑客成为一名安全创业者技术创业踩过的坑给技术创业者建议等内容。 showImg(https://segmentfault.com/img/remote/1460000012377230?w=1240&h=796); 前端每周清单专注前端领域内容，以对外文资料的搜集为...

xorpay 2019-08-22 11:15 评论0 收藏0
高性能迷你React框架 anu1.2 发布，支持React16的三大特性

摘要：支持的三大特征，组件支持返回数组，传送门与错误边界。下面是新支持的特性的第一个参数可以是数组，字符串，数字，。有了它，成为对错误处理最完善的框架。虚拟的结构发生变化，每个节点都有等描述自己位置的属性。 anu已经有两个月没有发布了，经过1.1.5-pre, 1.1.5-pre2, 1.1.5-pre3, 1.1.5-pre4, 1.1.5-pre5, 1.1.5-pre6, 最终放弃了...

whidy 2019-08-22 11:19 评论0 收藏0
WebAssembly 系列（六）WebAssembly 的现在与未来

摘要：目前正在开发两个编译器系统。这就意味着有很多功能还在襁褓之中，没有经过彻底思考以及实际验证。这些特性叫做未来特性。实现这一功能将会使用中的，而这一功能的实现将会提高程序执行的效率。目前浏览器在逐渐支持用标记来加载模块。作者：Lin Clark 编译：胡子大哈翻译原文：http://huziketang.com/blog/posts/detail?postId=58ce7fd3a6...

mcterry 2019-08-20 15:09 评论0 收藏0
图说 WebAssembly（五）：高性能原因

摘要：本文是图说系列文章的第五篇。这样的话，使用的开发者也不需要做任何适配，但是它们却能获得更高性能。该图并不是用来准确的衡量其性能的。运行编写出高性能的代码是可能的。这种清理工作由引擎自动进行，称为垃圾回收。本文是图说 WebAssembly 系列文章的第五篇。如果您还未阅读之前的文章，建议您从第一篇入手。在上一篇文章中，我们说到了使用 WebAssembly 和 JavaScript...

seal_de 2019-08-22 16:59 评论0 收藏0