React进阶篇(十)性能优化
时间:2022-07-25
本文章向大家介绍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'}
})
- mysql密码遗忘和登陆报错问题
- 新一轮发展趋势:城市智能化已经势不可挡
- Enterprise Library 4.1学习笔记2----数据访问程序块
- 微信小程序中用户唯一ID的获取
- Mysql备份系列(2)--mysqldump备份(全量+增量)方案操作记录
- Enterprise Library 4.1学习笔记1----配置应用程序块(c/s和b/s均适用)
- 简单账本-用完即走的微信小程序
- 新技术革命和新产业变革正进行 “互联网+大数据+人工智能+”时代正到来
- 微信小程序开发及相关设置小结
- gitlab两种连接方式:ssh和http配置介绍
- C#实现微信AES-128-CBC加密数据的解密
- UrlReferrer为空的问题?
- DeepMind发文回顾2017:AlphaGo团队已迎战下一个重大挑战
- [你必须知道的.Net]读书笔记--浅clone与深clone
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法