美文网首页
React性能优化

React性能优化

作者: 真的稻城 | 来源:发表于2019-02-18 21:49 被阅读0次

1:不要在JSX中写内联函数,这样性能有所损耗。比如

//No
<SotpButton
    onClick={()=>{this._onClick()}}
/>
//YES
constructor(){
    this._onClick = this._onClick.bind(this) //或者使用bind operator(版本稳定的话), thsi.onClick = :: this.onClick
}
_onClick(){

}
render(){
    return (
        <SotpButton
            onClick={this._onClick}
        />
    )
}

原因有二:

  • 每一次渲染这段JSX,都会产生新的函数对象
  • 每一次传给SotpButton的props都是新的,这样SotpButton无法通过shouldComponentUpdate对props的检查来避免re-render

2:聪明组件和傻瓜组件

软件设计有一个原则,叫做“责任分离”,就是一个模块的责任尽量小,如果一个模块的功能过多,就分拆成多个模块,让一个模块专注于一个功能。

根据 UI = f(data) 公式。使用React做UI界面,无非是获取驱动界面的数据,然后进行数据渲染界面。把获取和管理数据的逻辑放在父组件,即聪明组件;把渲染界面的逻辑放在子组件,即傻瓜组件。这样的好处是如果管理数据的方式需要从redux改成mobx,那只需要修改聪明组件即可。

3:PureComponent结合immutable.js

PureComponent是在内部封装了shouldComponentUpdate的方法,每次组件的state或者props发生变化时,render都会重新执行。shouldComponentUpdate会在render函数执行之前被调用,如果返回true,就继续,如果返回false,渲染过程就立刻停止。

但是PureComponent和shouldComponentUpdate都对props做浅比较,不是深比较,所以props是一个深层对象的话,就容易产生问题。比如两次渲染传入的是同一个对象,只是对象中的某个属性值不同。但是在PureComponent和shouldComponentUpdate看来,props没有发生变化,所以不会重新渲染,这就尴尬了。这就可以使用immutable.js(like Flow or TypeScript)来解决这个问题。

reactjs.org关于react性能优化的docs https://reactjs.org/docs/optimizing-performance.html

4:React.memo()

虽然shouldComponentUpdate能够避免重复渲染,提高性能,但是如果子组件是一个纯函数呢?不继承React.Component,不是class, 那么它也就没有shouldComponentUpdate。So,React16.6.0版本更新了一个重要的功能React.memo()。

React.memo()是一个高阶组件,它类似于PureComponent功能组件而不是class。React.memo()通过记忆化将函数返回结果存储起来,以提高性能。

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

维基百科: 在计算机领域,记忆化是一种主要用来提升计算机程序速度的优化技术方案。它将开销较大的函数调用的返回结果存储起来,当同样的输入再次发生时,则返回缓存好的数据,以此提升运算效率。

相关文章

  • 【React.js 20】React性能优化

    React性能优化 React性能优化主要分三块: React 组件性能优化 属性传递优化针对单组件性能优化,很多...

  • 深入浅出React和Redux学习笔记(五)

    React组建的性能优化 性能优化的方法: 单个React组件的性能优化; 多个React组件的性能优化; 利用r...

  • Redux源码剖析

    前面写了《React组件性能优化》《Redux性能优化》《React-Redux性能优化》,但是都没有从这些框架的...

  • react性能优化

    React 性能优化 React 性能优化 | 包括原理、技巧、Demo、工具使用[https://juejin....

  • React-Redux性能优化

    前面写了两篇文章《React组件性能优化》《Redux性能优化》,分别针对React和Redux在使用上的性能优化...

  • react 框架性能优化

    react 框架性能优化 前端性能监控利器 1.Google Performance工具 2.react 性能查看...

  • React 性能优化

    React 性能优化 简单的 todo-list-demo 讲 React 性能优化不能光靠嘴说,得有一个 dem...

  • React性能优化方案

    React 性能优化 简单的 todo-list-demo 讲 React 性能优化不能光靠嘴说,得有一个 dem...

  • React 组件性能优化

    React 组件性能优化最佳实践 React 组件性能优化的核心是减少渲染真实 DOM 节点的频率,减少 Virt...

  • 05|React组件的性能优化

    本文主要是针对性能优化做介绍,对应的React本身性能就比较不错!要介绍的点如下: 单个React组件的性能优化 ...

网友评论

      本文标题:React性能优化

      本文链接:https://www.haomeiwen.com/subject/kqttyqtx.html