专栏首页娜姐聊前端React进阶篇(十)性能优化

React进阶篇(十)性能优化

在整个流程上的优化

  • 在 HTML 内实现 Loading 态或者骨架屏;
  • 去掉外联 css;
  • 缓存基础框架 - HTTP 缓存资源;
  • 使用动态 polyfill;
  • 使用 SplitChunksPlugin 拆分公共代码;
  • 正确地使用 Webpack 4.0 的 Tree Shaking - 在引入这个模块,却没有使用它时,webpack 会自动把它 Tree Shaking 丢掉;
  • 使用动态 import,切分页面代码,减小首屏 JS 体积;
    • React Loadable 是一个专门用于动态 import 的 React 高阶组件,你可以把任何组件改写为支持动态 import 的形式。
  • 编译到 ES2015+,提高代码运行效率,减小体积;
  • 使用 lazyload 和 placeholder 提升加载体验。

代码上的优化

  • 列表项定义key属性
    • 不推荐用索引作为key,因为一旦列表中的数据发生重排,数据的索引也会发生变化
    • key只要不在当前列表中重复即可
  • 组件的属性值尽量不要用内联函数,如<Com1 action={()=>doSomething()}/>

尽量把style提到组件之外,不要直接写在JSX里面。因为如果style里直接定义样式对象,会导致组件每次渲染都要创建一个新的style对象。

// bad
render(){
  return (<div style={{color: 'red'}}>hello</div>)
}
// good
const style = {color: 'red'}
...
render(){
  return (<div>hello</div>)
}

函数组件可以利用React.memo实现shouldComponentUpdate优化,同样是浅比较。

利用shouldComponentUpdate优化更新条件

适当时使用React.PureComponent,其自带shouldComponentUpdate优化,会对props进行浅比较。

const MyComponent = React.memo(props => {
  /* render using props */
  return (
    <div>{props.name}</div>
  );
});

函数组件可以利用React.memo实现shouldComponentUpdate优化,同样是浅比较。

class Comp extends React.Component {
    render(){
        return (<div>{this.props.name}</div>)
    }
}

利用useMemo缓存复杂计算的值,利用useCallback缓存函数

// useMemo
// 使用useMemo来执行昂贵的计算,然后将计算值返回,并且将count作为依赖值传递进去。
// 这样,就只会在count改变的时候触发expensive执行,在修改val的时候,返回上一次缓存的值。
export default function WithMemo() {
    const [count, setCount] = useState(1);
    const [val, setValue] = useState('');
    const expensive = useMemo(() => {
        console.log('compute');
        let sum = 0;
        for (let i = 0; i < count * 100; i++) {
            sum += i;
        }
        return sum;
    }, [count]);

    return <div>
        <h4>{count}-{expensive}</h4>
        {val}
        <div>
            <button onClick={() => setCount(count + 1)}>+c1</button>
            <input value={val} onChange={event => setValue(event.target.value)}/>
        </div>
    </div>;
}

// useCallback
// 借助useCallback来返回函数,然后把这个函数作为props传递给子组件;
// 这样,子组件就能避免不必要的更新。
import React, { useState, useCallback, useEffect } from 'react';
function Parent() {
    const [count, setCount] = useState(1);
    const [val, setVal] = useState('');

    const callback = useCallback(() => {
        return count;
    }, [count]);
    return <div>
        <h4>{count}</h4>
        <Child callback={callback}/>
        <div>
            <button onClick={() => setCount(count + 1)}>+</button>
            <input value={val} onChange={event => setVal(event.target.value)}/>
        </div>
    </div>;
}

function Child({ callback }) {
    const [count, setCount] = useState(() => callback());
    useEffect(() => {
        setCount(callback());
    }, [callback]);
    return <div>
        {count}
    </div>
}

React官方建议把state当作不可变对象。当组件的状态都是不可变对象时,shouldComponentUpdate只需浅比较就可以判断状态是否真的改变,从而避免不必要的render调用。

状态类型是array,创建新的数组返回(concat, slice, filter, map 会返回一个新数组):

// add
this.setState({
    books: [...preState.books, 'New book']
})
// remove
this.setState({
    books: preState.books.slice(1, 3)
})
// filter
this.setState({
    books: preState.books.filter(item=>item !== 'React)
})

状态类型是不可变类型 - number, string, boolean, null, undefined

状态类型是object,创建新的对象返回(Object.assign,对象扩展语法,或者Immutable库)

this.setState({
   owner: Object.assgin({}, preState.owner, {name: 'Jason'})
})

 this.setState({
     owner: {...preState.owner, name: 'Jason'}
 })

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端工程化脑图

    前端工程化是一套流程和规范,可以指导快速迭代和更合理的在前后台分离环境下进行合作,开发。

    娜姐
  • ECMAScript6基础学习教程(五)对象

    当属性名和属性值变量同名时,ES6允许在对象中只写属性名,不写属性。 关键点有两个:

    娜姐
  • React进阶篇(七)React 同构

    同构,就是一套React代码在服务器上运行一遍,到达浏览器又运行一遍。服务端渲染完成页面结构,浏览器端渲染完成事件绑定。

    娜姐
  • 只要200行JavaScript代码,就能把特斯拉汽车带到您身边

    Jerry的前一篇文章 如何使用JavaScript开发AR(增强现实)移动应用 (一) 介绍了用React-Native + ViroReact开发增强现实应...

    Jerry Wang
  • Leetcode 74. Search a 2D Matrix

    版权声明:博客文章都是作者辛苦整理的,转载请注明出处,谢谢! https://blog.csdn....

    Tyan
  • Rotate Image

    问题:矩阵顺时针旋转90度 class Solution { public: bool dfs(vector<vector<int> > &matrix...

    用户1624346
  • Search a 2D Matrix

    问题:二维数组中是否存在一个数 class Solution { public: bool dfs(vector<vector<int> > &matr...

    用户1624346
  • Netty 之 NioSocketChannel 源码分析

    从上面代码中可以看出 NioSocketChannel 封装了 Nio 中的 SocketChannel。 SocketChannel 是通过 Selecto...

    java404
  • LeetCode 387. 字符串中的第一个唯一字符

    给定一个字符串,找到它的第一个不重复的字符,并返回它的索引。如果不存在,则返回 -1。

    freesan44
  • Leetcode 387:字符串中的第一个唯一字符

    和出现次数有关的,不要犹豫,hash 具体思路:首先用字典统计每个字符出现的频率,然后顺序遍历字符串,并在字典中进行查找,出现频率为1,返回。 时间复杂度O(n...

    故事尾音

扫码关注云+社区

领取腾讯云代金券