「react进阶」年终送给react开发者的八条优化建议(篇幅较长，占用20-30分钟)
笔者是一个 react 重度爱好者，在工做之余，也看了很多的 react 文章, 写了不少 react 项目 ,接下来笔者讨论一下 React 性能优化的主要方向和一些工做中的小技巧。送人玫瑰，手留余香，阅读的朋友能够给笔者点赞，关注一波 。 陆续更新前端文章。css
本文篇幅较长，将从 编译阶段 -> 路由阶段 -> 渲染阶段 -> 细节优化 -> 状态管理 -> 海量数据源，长列表渲染
方向分别加以探讨。前端
一 不能输在起跑线上，优化babel配置,webpack配置为项
1 真实项目中痛点
当咱们用create-react-app或者webpack构建react工程的时候，有没有想过一个问题，咱们的配置可否让咱们的项目更快的构建速度，更小的项目体积，更简洁清晰的项目结构。 随着咱们的项目越作越大，项目依赖愈来愈多，项目结构愈来愈来复杂，项目体积就会愈来愈大，构建时间愈来愈长，长此以往就会成了一个又大又重的项目，因此说咱们要学会适当的为项目‘减负’，让项目不能输在起跑线上。vue
2 一个老项目
拿咱们以前接触过的一个react老项目为例。咱们没有用dva,umi快速搭建react，而是用react老版本脚手架构建的，这对这种老的react项目，上述的问题都会存在，下面让咱们一块儿来看看。node
咱们首先看一下项目结构。 
react
再看看构建时间。webpack
为了方便你们看构建时间，我简单写了一个webpack，plugin ConsolePlugin ,记录了webpack在一次compilation所用的时间。web
const chalk = require('chalk') /* console 颜色 */
var slog = require('single-line-log'); /* 单行打印 console */
class ConsolePlugin {
constructor(options){
this.options = options
}
apply(compiler){
/** * Monitor file change 记录当前改动文件 */
compiler.hooks.watchRun.tap('ConsolePlugin', (watching) => {
const changeFiles = watching.watchFileSystem.watcher.mtimes
for(let file in changeFiles){
console.log(chalk.green('当前改动文件：'+ file))
}
})
/** * before a new compilation is created. 开始 compilation 编译 。 */
compiler.hooks.compile.tap('ConsolePlugin',()=>{
this.beginCompile()
})
/** * Executed when the compilation has completed. 一次 compilation 完成。 */
compiler.hooks.done.tap('ConsolePlugin',()=>{
this.timer && clearInterval( this.timer )
const endTime = new Date().getTime()
const time = (endTime - this.starTime) / 1000
console.log( chalk.yellow(' 编译完成') )
console.log( chalk.yellow('编译用时：' + time + '秒' ) )
})
}
beginCompile(){
const lineSlog = slog.stdout
let text = '开始编译：'
/* 记录开始时间 */
this.starTime = new Date().getTime()
this.timer = setInterval(()=>{
text += '█'
lineSlog( chalk.green(text))
},50)
}
}
复制代码
构建时间以下：ajax
打包后的体积：算法
3 翻新老项目
针对上面这个react老项目，咱们开始针对性的优化。因为本文主要讲的是react，因此咱们不把太多篇幅给webpack优化上。redux
① include 或 exclude 限制 loader 范围。
{
test: /\.jsx?$/,
exclude: /node_modules/,
include: path.resolve(__dirname, '../src'),
use:['happypack/loader?id=babel']
// loader: 'babel-loader'
}
复制代码
② happypack多进程编译
除了上述改动以外，在plugin中
/* 多线程编译 */
new HappyPack({
id:'babel',
loaders:['babel-loader?cacheDirectory=true']
})
复制代码
③缓存babel编译过的文件
loaders:['babel-loader?cacheDirectory=true']
复制代码
④tree Shaking 删除冗余代码
⑤按需加载，按需引入。
优化后项目结构
优化构建时间以下：
一次 compilation 时间 从23秒优化到了4.89秒
优化打包后的体积：
因而可知，若是咱们的react是本身徒手搭建的，一些优化技巧显得格外重要。
关于相似antd UI库的瘦身思考
咱们在作react项目的时候，会用到antd之类的ui库，值得思考的一件事是，若是咱们只是用到了antd中的个别组件，好比<Button /> ,就要把整个样式库引进来，打包就会发现，体积由于引入了整个样式大了不少。咱们能够经过.babelrc实现按需引入。
瘦身前
.babelrc 增长对 antd 样式按需引入。
["import", {
"libraryName":
"antd",
"libraryDirectory": "es",
"style": true
}]
复制代码
瘦身后
总结
若是想要优化react项目，从构建开始是必不可少的。咱们要重视从构建到打包上线的每个环节。
二 路由懒加载，路由监听器
react路由懒加载，是笔者看完dva源码中的 dynamic异步加载组件总结出来的，针对大型项目有不少页面，在配置路由的时候，若是没有对路由进行处理，一次性会加载大量路由，这对页面初始化很不友好，会延长页面初始化时间，因此咱们想这用asyncRouter来按需加载页面路由。
传统路由
若是咱们没有用umi等框架，须要手动配置路由的时候，也许路由会这样配置。
<Switch>
<Route path={'/index'} component={Index} ></Route>
<Route path={'/list'} component={List} ></Route>
<Route path={'/detail'} component={ Detail } ></Route>
<Redirect from='/*' to='/index' />
</Switch>
复制代码
或者用list保存路由信息，方便在进行路由拦截，或者配置路由菜单等。
const router = [
{
'path': '/index',
'component': Index
},
{
'path': '/list'', 'component': List }, { 'path': '/detail', 'component': Detail }, ] 复制代码
asyncRouter懒加载路由,并实现路由监听
咱们今天讲的这种react路由懒加载是基于import 函数路由懒加载， 众所周知 ，import 执行会返回一个Promise做为异步加载的手段。咱们能够利用这点来实现react异步加载路由
好的一言不合上代码。。。
代码
const routerObserveQueue = [] /* 存放路由卫视钩子 */
/* 懒加载路由卫士钩子 */
export const RouterHooks = {
/* 路由组件加载以前 */
beforeRouterComponentLoad: function(callback) {
routerObserveQueue.push({
type: 'before',
callback
})
},
/* 路由组件加载以后 */
afterRouterComponentDidLoaded(callback) {
routerObserveQueue.push({
type: 'after',
callback
})
}
}
/* 路由懒加载HOC */
export default function AsyncRouter(loadRouter) {
return class Content extends React.Component {
constructor(props) {
super(props)
/* 触发每一个路由加载以前钩子函数 */
this.dispatchRouterQueue('before')
}
state = {Component: null}
dispatchRouterQueue(type) {
const {history} = this.props
routerObserveQueue.forEach(item => {
if (item.type === type) item.callback(history)
})
}
componentDidMount() {
if (this.state.Component) return
loadRouter()
.then(module => module.default)
.then(Component => this.setState({Component},
() => {
/* 触发每一个路由加载以后钩子函数 */
this.dispatchRouterQueue('after')
}))
}
render() {
const {Component} = this.state
return Component ? <Component { ...this.props } /> : null
}
}
}
复制代码
asyncRouter实际就是一个高级组件,将()=>import()做为加载函数传进来，而后当外部Route加载当前组件的时候，在componentDidMount生命周期函数，加载真实的组件，并渲染组件，咱们还能够写针对路由懒加载状态定制属于本身的路由监听器beforeRouterComponentLoad和afterRouterComponentDidLoaded，相似vue中 watch $route 功能。接下来咱们看看如何使用。
使用
import AsyncRouter ,{ RouterHooks } from './asyncRouter.js'
const { beforeRouterComponentLoad} = RouterHooks
const Index = AsyncRouter(()=>import('../src/page/home/index'))
const List = AsyncRouter(()=>import('../src/page/list'))
const Detail = AsyncRouter(()=>import('../src/page/detail'))
const index = () => {
useEffect(()=>{
/* 增长监听函数 */
beforeRouterComponentLoad((history)=>{
console.log('当前激活的路由是',history.location.pathname)
})
},[])
return <div > <div > <Router > <Meuns/> <Switch> <Route path={'/index'} component={Index} ></Route> <Route path={'/list'} component={List} ></Route> <Route path={'/detail'} component={ Detail } ></Route> <Redirect from='/*' to='/index' /> </Switch> </Router> </div> </div>
}
复制代码
效果
这样一来，咱们既作到了路由的懒加载，又弥补了react-router没有监听当前路由变化的监听函数的缺陷。
三 受控性组件颗粒化 ，独立请求服务渲染单元
可控性组件颗粒化，独立请求服务渲染单元是笔者在实际工做总结出来的经验。目的就是避免因自身的渲染更新或是反作用带来的全局从新渲染。
1 颗粒化控制可控性组件
可控性组件和非可控性的区别就是dom元素值是否与受到react数据状态state控制。一旦由react的state控制数据状态，好比input输入框的值，就会形成这样一个场景，为了使input值实时变化，会不断setState，就会不断触发render函数，若是父组件内容简单还好，若是父组件比较复杂，会形成牵一发动全身，若是其余的子组件中componentWillReceiveProps这种带有反作用的钩子，那么引起的蝴蝶效应不敢想象。好比以下demo。
class index extends React.Component<any,any>{
constructor(props){
super(props)
this.state={
inputValue:''
}
}
handerChange=(e)=> this.setState({ inputValue:e.target.value })
render(){
const { inputValue } = this.state
return <div> { /* 咱们增长三个子组件 */ } <ComA /> <ComB /> <ComC /> <div className="box" > <Input value={inputValue} onChange={ (e)=> this.handerChange(e) } /> </div> {/* 咱们首先来一个列表循环 */} { new Array(10).fill(0).map((item,index)=>{ console.log('列表循环了' ) return <div key={index} >{item}</div> }) } { /* 这里多是更复杂的结构 */ /* ------------------ */ } </div>
}
}
复制代码
组件A
function index(){
console.log('组件A渲染')
return <div>我是组件A</div>
}
复制代码
组件B，有一个componentWillReceiveProps钩子
class Index extends React.Component{
constructor(props){
super(props)
}
componentWillReceiveProps(){
console.log('componentWillReceiveProps执行')
/* 可能作一些骚操做 wu lian */
}
render(){
console.log('组件B渲染')
return <div> 我是组件B </div>
}
}
复制代码
组件C有一个列表循环
class Index extends React.Component{
constructor(props){
super(props)
}
render(){
console.log('组件c渲染')
return <div> 我是组件c { new Array(10).fill(0).map((item,index)=>{ console.log('组件C列表循环了' ) return <div key={index} >{item}</div> }) } </div>
}
}
复制代码
效果
当咱们在input输入内容的时候。就会形成如上的现象，全部的不应从新更新的地方，所有从新执行了一遍，这无疑是巨大的性能损耗。这个一个setState触发带来的一股巨大的由此组件到子组件可能更深的更新流，带来的反作用是不可估量的。因此咱们能够思考一下，是否将这种受控性组件颗粒化，让本身更新 -> 渲染过程由自身调度。
说干就干，咱们对上面的input表单单独颗粒化处理。
const ComponentInput = memo(function({ notifyFatherChange }:any){
const [ inputValue , setInputValue ] = useState('')
const handerChange = useMemo(() => (e) => {
setInputValue(e.target.value)
notifyFatherChange && notifyFatherChange(e.target.value)
},[])
return <Input value={inputValue} onChange={ handerChange } />
})
复制代码
此时的组件更新由组件单元自行控制，不须要父组件的更新，因此不须要父组件设置独立state保留状态。只须要绑定到this上便可。不是全部状态都应该放在组件的 state 中. 例如缓存数据。若是须要组件响应它的变更, 或者须要渲染到视图中的数据才应该放到 state 中。这样能够避免没必要要的数据变更致使组件从新渲染.
class index extends React.Component<any,any>{
formData :any = {}
render(){
return <div> { /* 咱们增长三个子组件 */ } <ComA /> <ComB /> <ComC /> <div className="box" > <ComponentInput notifyFatherChange={ (value)=>{ this.formData.inputValue = value } } /> <Button onClick={()=> console.log(this.formData)} >打印数据</Button> </div> {/* 咱们首先来一个列表循环 */} { new Array(10).fill(0).map((item,index)=>{ console.log('列表循环了' ) return <div key={index} >{item}</div> }) } { /* 这里多是更复杂的结构 */ /* ------------------ */ } </div>
}
}
复制代码
效果
这样除了当前组件外，其余地方没有收到任何渲染波动，达到了咱们想要的目的。
2 创建独立的请求渲染单元
创建独立的请求渲染单元，直接理解就是，若是咱们把页面，分为请求数据展现部分(经过调用后端接口，获取数据)，和基础部分(不须要请求数据，已经直接写好的)，对于一些逻辑交互不是很复杂的数据展现部分，我推荐用一种独立组件，独立请求数据，独立控制渲染的模式。至于为何咱们能够慢慢分析。
首先咱们看一下传统的页面模式。
页面有三个展现区域分别，作了三次请求，触发了三次setState,渲染三次页面，即便用Promise.all等方法，可是也不保证接下来交互中，会有部分展现区从新拉取数据的可能。一旦有一个区域从新拉取数据，另外两个区域也会说、受到牵连，这种效应是不可避免的，即使react有很好的ddiff算法去调协相同的节点，可是好比长列表等状况，循环在所不免。
class Index extends React.Component{
state :any={
dataA:null,
dataB:null,
dataC:null
}
async componentDidMount(){
/* 获取A区域数据 */
const dataA = await getDataA()
this.setState({ dataA })
/* 获取B区域数据 */
const dataB = await getDataB()
this.setState({ dataB })
/* 获取C区域数据 */
const dataC = await getDataC()
this.setState({ dataC })
}
render(){
const { dataA , dataB , dataC } = this.state
console.log(dataA,dataB,dataC)
return <div> <div> { /* 用 dataA 数据作展现渲染 */ } </div> <div> { /* 用 dataB 数据作展现渲染 */ } </div> <div> { /* 用 dataC 数据作展现渲染 */ } </div> </div>
}
}
复制代码
接下来咱们，把每一部分抽取出来，造成独立的渲染单元，每一个组件都独立数据请求到独立渲染。
function ComponentA(){
const [ dataA, setDataA ] = useState(null)
useEffect(()=>{
getDataA().then(res=> setDataA(res.data) )
},[])
return <div> { /* 用 dataA 数据作展现渲染 */ } </div>
}
function ComponentB(){
const [ dataB, setDataB ] = useState(null)
useEffect(()=>{
getDataB().then(res=> setDataB(res.data) )
},[])
return <div> { /* 用 dataB 数据作展现渲染 */ } </div>
}
function ComponentC(){
const [ dataC, setDataC ] = useState(null)
useEffect(()=>{
getDataC().then(res=> setDataC(res.data) )
},[])
return <div> { /* 用 dataC 数据作展现渲染 */ } </div>
}
function Index (){
return <div> <ComponentA /> <ComponentB /> <ComponentC /> </div>
}
复制代码
这样一来，彼此的数据更新都不会相互影响。
总结
拆分须要单独调用后端接口的细小组件，创建独立的数据请求和渲染，这种依赖数据更新 -> 视图渲染的组件，能从整个体系中抽离出来 ，好处我总结有如下几个方面。
1 能够避免父组件的冗余渲染 ，react的数据驱动，依赖于 state 和 props 的改变，改变state 必然会对组件 render 函数调用，若是父组件中的子组件过于复杂，一个自组件的 state 改变，就会牵一发动全身，必然影响性能，因此若是把不少依赖请求的组件抽离出来，能够直接减小渲染次数。
2 能够优化组件自身性能，不管从class声明的有状态组件仍是fun声明的无状态，都有一套自身优化机制，不管是用shouldupdate 仍是用 hooks中 useMemo useCallback ，均可以根据自身状况，定制符合场景的渲条 件，使得依赖数据请求组件造成本身一个小的，适合自身的渲染环境。
3 可以和redux ,以及redux衍生出来 redux-action , dva,更加契合的工做，用 connect 包裹的组件，就能经过制定好的契约，根据所需求的数据更新，而更新自身，而把这种模式用在这种小的，须要数据驱动的组件上，就会起到物尽其用的效果。
四 shouldComponentUpdate ,PureComponent 和 React.memo ,immetable.js 助力性能调优
在这里咱们拿immetable.js为例，讲最传统的限制更新方法，第六部分将要将一些避免从新渲染的细节。
1 PureComponent 和 React.memo
React.PureComponent 与 React.Component 用法差很少 ,但 React.PureComponent 经过props和state的浅对比来实现 shouldComponentUpate()。若是对象包含复杂的数据结构(好比对象和数组)，他会浅比较，若是深层次的改变，是没法做出判断的，React.PureComponent 认为没有变化，而没有渲染试图。
如这个例子
class Text extends React.PureComponent<any,any>{
render(){
console.log(this.props)
return <div>hello,wrold</div>
}
}
class Index extends React.Component<any,any>{
state={
data:{ a : 1 , b : 2 }
}
handerClick=()=>{
const { data } = this.state
data.a++
this.setState({ data })
}
render(){
const { data } = this.state
return <div> <button onClick={ this.handerClick } >点击</button> <Text data={data} /> </div>
}
}
复制代码
效果
咱们点击按钮，发现 <Text /> 根本没有从新更新。这里虽然改了data可是只是改变了data下的属性，因此 PureComponent 进行浅比较不会update。
想要解决这个问题实际也很容易。
<Text data={{ ...data }} />
复制代码
不管组件是不是 PureComponent，若是定义了 shouldComponentUpdate()，那么会调用它并以它的执行结果来判断是否 update。在组件未定义 shouldComponentUpdate() 的状况下，会判断该组件是不是 PureComponent，若是是的话，会对新旧 props、state 进行 shallowEqual 比较，一旦新旧不一致，会触发渲染更新。
react.memo 和 PureComponent 功能相似 ，react.memo 做为第一个高阶组件，第二个参数 能够对props 进行比较 ，和shouldComponentUpdate不一样的, 当第二个参数返回 true 的时候，证实props没有改变，不渲染组件，反之渲染组件。
2 shouldComponentUpdate
使用 shouldComponentUpdate() 以让React知道当state或props的改变是否影响组件的从新render，默认返回ture，返回false时不会从新渲染更新，并且该方法并不会在初始化渲染或当使用 forceUpdate() 时被调用，一般一个shouldComponentUpdate 应用是这么写的。
控制状态
shouldComponentUpdate(nextProps, nextState) {
/* 当 state 中 data1 发生改变的时候，从新更新组件 */
return nextState.data1 !== this.state.data1
}
复制代码
这个的意思就是 仅当state 中 data1 发生改变的时候，从新更新组件。 控制prop属性
shouldComponentUpdate(nextProps, nextState) {
/* 当 props 中 data2发生改变的时候，从新更新组件 */
return nextProps.data2 !== this.props.data2
}
复制代码
这个的意思就是 仅当props 中 data2 发生改变的时候，从新更新组件。
3 immetable.js
immetable.js 是Facebook 开发的一个js库，能够提升对象的比较性能，像以前所说的pureComponent 只能对对象进行浅比较，,对于对象的数据类型,却一筹莫展,因此咱们能够用 immetable.js 配合 shouldComponentUpdate 或者 react.memo来使用。immutable 中
咱们用react-redux来简单举一个例子，以下所示 数据都已经被 immetable.js处理。
import { is } from 'immutable'
const GoodItems = connect(state =>
({ GoodItems: filter(state.getIn(['Items', 'payload', 'list']), state.getIn(['customItems', 'payload', 'list'])) || Immutable.List(), })
/* 此处省略不少代码～～～～～～ */
)(memo(({ Items, dispatch, setSeivceId }) => {
/* */
}, (pre, next) => is(pre.Items, next.Items)))
复制代码
经过 is 方法来判断，先后Items(对象数据类型)是否发生变化。
五 规范写法，合理处理细节问题
有的时候，咱们在敲代码的时候，稍微注意如下，就能避免性能的开销。也许只是稍加改动，就能其余优化性能的效果。
①绑定事件尽可能不要使用箭头函数
面临问题
众所周知，react更新来大部分状况自于props的改变(被动渲染)，和state改变(主动渲染)。当咱们给未加任何更新限定条件子组件绑定事件的时候，或者是PureComponent 纯组件， 若是咱们箭头函数使用的话。
<ChildComponent handerClick={()=>{ console.log(666) }} />
复制代码
每次渲染时都会建立一个新的事件处理器，这会致使 ChildComponent 每次都会被渲染。
即使咱们用箭头函数绑定给dom元素。
<div onClick={ ()=>{ console.log(777) } } >hello,world</div>
复制代码
每次react合成事件事件的时候，也都会从新声明一个新事件。
解决问题
解决这个问题事件很简单，分为无状态组件和有状态组件。
有状态组件
class index extends React.Component{
handerClick=()=>{
console.log(666)
}
handerClick1=()=>{
console.log(777)
}
render(){
return <div> <ChildComponent handerClick={ this.handerClick } /> <div onClick={ this.handerClick1 } >hello,world</div> </div>
}
}
复制代码
无状态组件
function index(){
const handerClick1 = useMemo(()=>()=>{
console.log(777)
},[]) /* [] 存在当前 handerClick1 的依赖项*/
const handerClick = useCallback(()=>{ console.log(666) },[]) /* [] 存在当前 handerClick 的依赖项*/
return <div> <ChildComponent handerClick={ handerClick } /> <div onClick={ handerClick1 } >hello,world</div> </div>
}
复制代码
对于dom，若是咱们须要传递参数。咱们能够这么写。
function index(){
const handerClick1 = useMemo(()=>(event)=>{
const mes = event.currentTarget.dataset.mes
console.log(mes) /* hello,world */
},[])
return <div> <div data-mes={ 'hello,world' } onClick={ handerClick1 } >hello,world</div> </div>
}
复制代码
②循环正确使用key
不管是react 和 vue,正确使用key,目的就是在一次循环中，找到与新节点对应的老节点，复用节点，节省开销。想深刻理解的同窗能够看一下笔者的另一篇文章 全面解析 vue3.0 diff算法 里面有对key详细说明。咱们今天来看如下key正确用法,和错误用法。
1 错误用法
错误用法一：用index作key
function index(){
const list = [ { id:1 , name:'哈哈' } , { id:2, name:'嘿嘿' } ,{ id:3 , name:'嘻嘻' } ]
return <div> <ul> { list.map((item,index)=><li key={index} >{ item.name }</li>) } </ul> </div>
}
复制代码
这种加key的性能,实际和不加key效果差很少，每次仍是从头至尾diff。
错误用法二:用index拼接其余的字段
function index(){
const list = [ { id:1 , name:'哈哈' } , { id:2, name:'嘿嘿' } ,{ id:3 , name:'嘻嘻' } ]
return <div> <ul> { list.map((item,index)=><li key={index + item.name } >{ item.name }</li>) } </ul> </div>
}
复制代码
若是有元素移动或者删除，那么就失去了一一对应关系，剩下的节点都不能有效复用。
2 正确用法
正确用法：用惟一id做为key
function index(){
const list = [ { id:1 , name:'哈哈' } , { id:2, name:'嘿嘿' } ,{ id:3 , name:'嘻嘻' } ]
return <div> <ul> { list.map((item,index)=><li key={ item.id } >{ item.name }</li>) } </ul> </div>
}
复制代码
用惟一的健id做为key,可以作到有效复用元素节点。
③无状态组件hooks-useMemo 避免重复声明。
对于无状态组件，数据更新就等于函数上下文的重复执行。那么函数里面的变量，方法就会从新声明。好比以下状况。
function Index(){
const [ number , setNumber ] = useState(0)
const handerClick1 = ()=>{
/* 一些操做 */
}
const handerClick2 = ()=>{
/* 一些操做 */
}
const handerClick3 = ()=>{
/* 一些操做 */
}
return <div> <a onClick={ handerClick1 } >点我有惊喜1</a> <a onClick={ handerClick2 } >点我有惊喜2</a> <a onClick={ handerClick3 } >点我有惊喜3</a> <button onClick={ ()=> setNumber(number+1) } > 点击 { number } </button> </div>
}
复制代码
每次点击button的时候,都会执行Index函数。handerClick1 , handerClick2,handerClick3都会从新声明。为了不这个状况的发生，咱们能够用 useMemo 作缓存，咱们能够改为以下。
function Index(){
const [ number , setNumber ] = useState(0)
const [ handerClick1 , handerClick2 ,handerClick3] = useMemo(()=>{
const fn1 = ()=>{
/* 一些操做 */
}
const fn2 = ()=>{
/* 一些操做 */
}
const fn3= ()=>{
/* 一些操做 */
}
return [fn1 , fn2 ,fn3]
},[]) /* 只有当数据里面的依赖项，发生改变的时候，才会从新声明函数。 */
return <div> <a onClick={ handerClick1 } >点我有惊喜1</a> <a onClick={ handerClick2 } >点我有惊喜2</a> <a onClick={ handerClick3 } >点我有惊喜3</a> <button onClick={ ()=> setNumber(number+1) } > 点击 { number } </button> </div>
}
复制代码
以下改变以后，handerClick1 , handerClick2,handerClick3 会被缓存下来。
④懒加载 Suspense 和 lazy
Suspense 和 lazy 能够实现 dynamic import 懒加载效果，原理和上述的路由懒加载差很少。在 React 中的使用方法是在 Suspense 组件中使用 <LazyComponent> 组件。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function demo () {
return (
<div> <Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </Suspense> </div>
)
}
复制代码
LazyComponent 是经过懒加载加载进来的，因此渲染页面的时候可能会有延迟，但使用了 Suspense 以后，在加载状态下，能够用<div>Loading...</div>做为loading效果。
Suspense 能够包裹多个懒加载组件。
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
<LazyComponent1 />
</Suspense>
复制代码
六 多种方式避免重复渲染
避免重复渲染,是react性能优化的重要方向。若是想全力以赴处理好react项目每个细节，那么就要从每一行代码开始，从每一组件开始。正所谓不积硅步无以致千里。
① 学会使用的批量更新
批量更新
此次讲的批量更新的概念，实际主要是针对无状态组件和hooks中useState,和 class有状态组件中的this.setState，两种方法已经作了批量更新的处理。好比以下例子
一次更新中
class index extends React.Component{
constructor(prop){
super(prop)
this.state = {
a:1,
b:2,
c:3,
}
}
handerClick=()=>{
const { a,b,c } :any = this.state
this.setState({ a:a+1 })
this.setState({ b:b+1 })
this.setState({ c:c+1 })
}
render= () => <div onClick={this.handerClick} />
}
复制代码
点击事件发生以后，会触发三次 setState,可是不会渲染三次，由于有一个批量更新batchUpdate批量更新的概念。三次setState最后被合成相似以下样子
this.setState({
a:a+1 ,
b:b+1 ,
c:c+1
})
复制代码
无状态组件中
const [ a , setA ] = useState(1)
const [ b , setB ] = useState({})
const [ c , setC ] = useState(1)
const handerClick = () => {
setB( { ...b } )
setC( c+1 )
setA( a+1 )
}
复制代码
批量更新失效
当咱们针对上述两种状况加以以下处理以后。
handerClick=()=>{
setTimeout(() => {
this.setState({ a:a+1 })
this.setState({ b:b+1 })
this.setState({ c:c+1 })
}, 0)
}
复制代码
const handerClick = () => {
Promise.resolve().then(()=>{
setB( { ...b } )
setC( c+1 )
setA( a+1 )
})
}
复制代码
咱们会发现，上述两种状况 ，组件都更新渲染了三次 ，此时的批量更新失效了。这种状况在react-hooks中也广泛存在，这种状况甚至在hooks中更加明显，由于咱们都知道hooks中每一个useState保存了一个状态，并非让class声明组件中，能够经过this.state统一协调状态，再一次异步函数中，好比说一次ajax请求后，想经过多个useState改变状态，会形成屡次渲染页面，为了解决这个问题，咱们能够手动批量更新。
手动批量更新
react-dom 中提供了unstable_batchedUpdates方法进行手动批量更新。这个api更契合react-hooks，咱们能够这样作。
const handerClick = () => {
Promise.resolve().then(()=>{
unstable_batchedUpdates(()=>{
setB( { ...b } )
setC( c+1 )
setA( a+1 )
})
})
}
复制代码
这样三次更新，就会合并成一次。一样达到了批量更新的效果。
② 合并state
class类组件(有状态组件)
合并state这种，是一种咱们在react项目开发中要养成的习惯。我看过有些同窗的代码中可能会这么写(以下demo是模拟的状况，实际要比这复杂的多)。
class Index extends React.Component<any , any>{
state = {
loading:false /* 用来模拟loading效果 */,
list:[],
}
componentDidMount(){
/* 模拟一个异步请求数据场景 */
this.setState({ loading : true }) /* 开启loading效果 */
Promise.resolve().then(()=>{
const list = [ { id:1 , name: 'xixi' } ,{ id:2 , name: 'haha' },{ id:3 , name: 'heihei' } ]
this.setState({ loading : false },()=>{
this.setState({
list:list.map(item=>({
...item,
name:item.name.toLocaleUpperCase()
}))
})
})
})
}
render(){
const { list } = this.state
return <div>{ list.map(item=><div key={item.id} >{ item.name }</div>) }</div>
}
}
复制代码
分别用两次this.state第一次解除loading状态，第二次格式化数据列表。这另两次更新彻底没有必要，能够用一次setState更新完美解决。不这样作的缘由是，对于像demo这样的简单结构还好，对于复杂的结构，一次更新可能都是宝贵的，因此咱们应该学会去合并state。将上述demo这样修改。
this.setState({
loading : false,
list:list.map(item=>({
...item,
name:item.name.toLocaleUpperCase()
}))
})
复制代码
函数组件(无状态组件)
对于无状态组件，咱们能够经过一个useState保存多个状态，没有必要每个状态都用一个useState。
对于这样的状况。
const [ a ,setA ] = useState(1)
const [ b ,setB ] = useState(2)
复制代码
咱们彻底能够一个state搞定。
const [ numberState , setNumberState ] = useState({ a:1 , b :2})
复制代码
可是要注意，若是咱们的state已经成为 useEffect , useCallback , useMemo依赖项，请慎用如上方法。
③ useMemo React.memo隔离单元
react正常的更新流，就像利剑一下，从父组件项子组件穿透，为了不这些重复的更新渲染，shouldComponentUpdate , React.memo等api也应运而生。可是有的状况下，多余的更新在所不免，好比以下这种状况。这种更新会由父组件 -> 子组件 传递下去。
function ChildrenComponent(){
console.log(2222)
return <div>hello,world</div>
}
function Index (){
const [ list ] = useState([ { id:1 , name: 'xixi' } ,{ id:2 , name: 'haha' },{ id:3 , name: 'heihei' } ])
const [ number , setNumber ] = useState(0)
return <div> <span>{ number }</span> <button onClick={ ()=> setNumber(number + 1) } >点击</button> <ul> { list.map(item=>{ console.log(1111) return <li key={ item.id } >{ item.name }</li> }) } </ul> <ChildrenComponent /> </div>
}
复制代码
效果
针对这一现象，咱们能够经过使用useMemo进行隔离，造成独立的渲染单元，每次更新上一个状态会被缓存，循环不会再执行，子组件也不会再次被渲染,咱们能够这么作。
function Index (){
const [ list ] = useState([ { id:1 , name: 'xixi' } ,{ id:2 , name: 'haha' },{ id:3 , name: 'heihei' } ])
const [ number , setNumber ] = useState(0)
return <div> <span>{ number }</span> <button onClick={ ()=> setNumber(number + 1) } >点击</button> <ul> { useMemo(()=>(list.map(item=>{ console.log(1111) return <li key={ item.id } >{ item.name }</li> })),[ list ]) } </ul> { useMemo(()=> <ChildrenComponent />,[]) } </div>
}
复制代码
有状态组件
在class声明的组件中，没有像 useMemo 的API ，可是也并不等于一筹莫展，咱们能够经过 react.memo 来阻拦来自组件自己的更新。咱们能够写一个组件，来控制react 组件更新的方向。咱们经过一个 <NotUpdate> 组件来阻断更新流。
/* 控制更新 ,第二个参数能够做为组件更新的依赖 ， 这里设置为 ()=> true 只渲染一次 */
const NotUpdate = React.memo(({ children }:any)=> typeof children === 'function' ? children() : children ,()=>true)
class Index extends React.Component<any,any>{
constructor(prop){
super(prop)
this.state = {
list: [ { id:1 , name: 'xixi' } ,{ id:2 , name: 'haha' },{ id:3 , name: 'heihei' } ],
number:0,
}
}
handerClick = ()=>{
this.setState({ number:this.state.number + 1 })
}
render(){
const { list }:any = this.state
return <div> <button onClick={ this.handerClick } >点击</button> <NotUpdate> {()=>(<ul> { list.map(item=>{ console.log(1111) return <li key={ item.id } >{ item.name }</li> }) } </ul>)} </NotUpdate> <NotUpdate> <ChildrenComponent /> </NotUpdate> </div>
}
}
复制代码
const NotUpdate = React.memo(({ children }:any)=> typeof children === 'function' ? children() : children ,()=>true)
复制代码
没错，用的就是 React.memo，生成了阻断更新的隔离单元，若是咱们想要控制更新，能够对 React.memo 第二个参数入手， demo项目中彻底阻断的更新。
④ ‘取缔’state，学会使用缓存。
这里的取缔state，并彻底不使用state来管理数据，而是善于使用state,知道何时使用,怎么使用。react 并不像 vue 那样响应式数据流。 在 vue中 有专门的dep作依赖收集，能够自动收集字符串模版的依赖项，只要没有引用的data数据， 经过 this.aaa = bbb ,在vue中是不会更新渲染的。由于 aaa 的dep没有收集渲染watcher依赖项。在react中，咱们触发this.setState 或者 useState，只会关心两次state值是否相同，来触发渲染，根本不会在意jsx语法中是否真正的引入了正确的值。
没有更新做用的state
有状态组件中
class Demo extends React.Component{
state={ text:111 }
componentDidMount(){
const { a } = this.props
/* 咱们只是但愿在初始化,用text记录 props中 a 的值 */
this.setState({
text:a
})
}
render(){
/* 没有引入text */
return <div>{'hello,world'}</div>
}
}
复制代码
如上例子中,render函数中并无引入text ,咱们只是但愿在初始化的时候，用 text 记录 props 中 a 的值。咱们却用 setState 触发了一次无用的更新。无状态组件中状况也同样存在，具体以下。
无状态组件中
function Demo ({ a }){
const [text , setText] = useState(111)
useEffect(()=>{
setText(a)
},[])
return <div> {'hello,world'} </div>
}
复制代码
改成缓存
有状态组件中
在class声明组件中，咱们能够直接把数据绑定给this上，来做为数据缓存。
class Demo extends React.Component{
text = 111
componentDidMount(){
const { a } = this.props
/* 数据直接保存在text上 */
this.text = a
}
render(){
/* 没有引入text */
return <div>{'hello,world'}</div>
}
}
复制代码
无状态组件中
在无状态组件中, 咱们不能往问this,可是咱们能够用useRef来解决问题。
function Demo ({ a }){
const text = useRef(111)
useEffect(()=>{
text.current = a
},[])
return <div> {'hello,world'} </div>
}
复制代码
⑤ useCallback回调
useCallback 的真正目的仍是在于缓存了每次渲染时 inline callback 的实例，这样方便配合上子组件的 shouldComponentUpdate 或者 React.memo 起到减小没必要要的渲染的做用。对子组件的渲染限定来源与，对子组件props比较，可是若是对父组件的callback作比较，无状态组件每次渲染执行，都会造成新的callback ,是没法比较，因此须要对callback作一个 memoize 记忆功能，咱们能够理解为useCallback就是 callback加了一个memoize。咱们接着往下看👇👇👇。
function demo (){
const [ number , setNumber ] = useState(0)
return <div> <DemoComponent handerChange={ ()=>{ setNumber(number+1) } } /> </div>
}
复制代码
或着
function demo (){
const [ number , setNumber ] = useState(0)
const handerChange = ()=>{
setNumber(number+1)
}
return <div> <DemoComponent handerChange={ handerChange } /> </div>
}
复制代码
不管是上述那种方式，pureComponent 和 react.memo 经过浅比较方式，只能判断每次更新都是新的callback，而后触发渲染更新。useCallback给加了一个记忆功能，告诉咱们子组件，两次是相同的 callback无需从新更新页面。至于何时callback更改，就要取决于 useCallback 第二个参数。好的，将上述demo咱们用 useCallback 重写。
function demo (){
const [ number , setNumber ] = useState(0)
const handerChange = useCallback( ()=>{
setNumber(number+1)
},[])
return <div> <DemoComponent handerChange={ handerChange } /> </div>
}
复制代码
这样 pureComponent 和 react.memo 能够直接判断是callback没有改变，防止了没必要要渲染。
七 中规中矩的使用状态管理
不管咱们使用的是redux仍是说 redux 衍生出来的 dva ,redux-saga等,或者是mobx，都要遵循必定'使用规则'，首先让我想到的是，何时用状态管理，怎么合理的应用状态管理，接下来咱们来分析一下。
何时使用状态管理
要问我何时适合使用状态状态管理。我必定会这么分析，首先状态管理是为了解决什么问题，状态管理可以解决的问题主要分为两个方面，一 就是解决跨层级组件通讯问题 。二 就是对一些全局公共状态的缓存。
咱们那redux系列的状态管理为例子。
我见过又同窗这么写的
滥用状态管理
/* 和 store下面text模块的list列表，创建起依赖关系，list更新，组件从新渲染 */
@connect((store)=>({ list:store.text.list }))
class Text extends React.Component{
constructor(prop){
super(prop)
}
componentDidMount(){
/* 初始化请求数据 */
this.getList()
}
getList=()=>{
const { dispatch } = this.props
/* 获取数据 */
dispatch({ type:'text/getDataList' })
}
render(){
const { list } = this.props
return <div> { list.map(item=><div key={ item.id } > { /* 作一些渲染页面的操做.... */ } </div>) } <button onClick={ ()=>this.getList() } >从新获取列表</button> </div>
}
}
复制代码
这样页面请求数据，到数据更新，所有在当前组件发生，这个写法我不推荐，此时的数据走了一遍状态管理,最终仍是回到了组件自己，显得很鸡肋，并无发挥什么做用。在性能优化上到不如直接在组件内部请求数据。
不会合理使用状态管理
还有的同窗可能这么写。
class Text extends React.Component{
constructor(prop){
super(prop)
this.state={
list:[],
}
}
async componentDidMount(){
const { data , code } = await getList()
if(code === 200){
/* 获取的数据有多是不常变的，多个页面须要的数据 */
this.setState({
list:data
})
}
}
render(){
const { list } = this.state
return <div> { /* 下拉框 */ } <select> { list.map(item=><option key={ item.id } >{ item.name }</option>) } </select> </div>
}
}
复制代码
对于不变的数据，多个页面或组件须要的数据，为了不重复请求,咱们能够将数据放在状态管理里面。
如何使用状态管理
分析结构
咱们要学会分析页面，那些数据是不变的，那些是随时变更的，用如下demo页面为例子：
如上 红色区域，是基本不变的数据，多个页面可能须要的数据，咱们能够统一放在状态管理中，蓝色区域是随时更新的数据，直接请求接口就好。
总结
不变的数据，多个页面可能须要的数据，放在状态管理中，对于时常变化的数据，咱们能够直接请求接口
八 海量数据优化-时间分片，虚拟列表
时间分片
时间分片的概念，就是一次性渲染大量数据，初始化的时候会出现卡顿等现象。咱们必需要明白的一个道理，js执行永远要比dom渲染快的多。 ，因此对于大量的数据，一次性渲染，容易形成卡顿，卡死的状况。咱们先来看一下例子
class Index extends React.Component<any,any>{
state={
list: []
}
handerClick=()=>{
let starTime = new Date().getTime()
this.setState({
list: new Array(40000).fill(0)
},()=>{
const end = new Date().getTime()
console.log( (end - starTime ) / 1000 + '秒')
})
}
render(){
const { list } = this.state
console.log(list)
return <div> <button onClick={ this.handerClick } >点击</button> { list.map((item,index)=><li className="list" key={index} > { item + '' + index } Item </li>) } </div>
}
}
复制代码
咱们模拟一次性渲染 40000 个数据的列表，看一下须要多长时间。
咱们看到 40000 个 简单列表渲染了，将近5秒的时间。为了解决一次性加载大量数据的问题。咱们引出了时间分片的概念，就是用setTimeout把任务分割，分红若干次来渲染。一共40000个数据，咱们能够每次渲染100个， 分次400渲染。
class Index extends React.Component<any,any>{
state={
list: []
}
handerClick=()=>{
this.sliceTime(new Array(40000).fill(0), 0)
}
sliceTime=(list,times)=>{
if(times === 400) return
setTimeout(() => {
const newList = list.slice( times , (times + 1) * 100 ) /* 每次截取 100 个 */
this.setState({
list: this.state.list.concat(newList)
})
this.sliceTime( list ,times + 1 )
}, 0)
}
render(){
const { list } = this.state
return <div> <button onClick={ this.handerClick } >点击</button> { list.map((item,index)=><li className="list" key={index} > { item + '' + index } Item </li>) } </div>
}
}
复制代码
效果
setTimeout 能够用 window.requestAnimationFrame() 代替，会有更好的渲染效果。 咱们demo使用列表作的，实际对于列表来讲，最佳方案是虚拟列表，而时间分片，更适合热力图，地图点位比较多的状况。
虚拟列表
笔者在最近在作小程序商城项目，有长列表的状况， 但是确定说 虚拟列表 是解决长列表渲染的最佳方案。不管是小程序，或者是h5 ，随着 dom元素愈来愈多，页面会愈来愈卡顿,这种状况在小程序更加明显 。稍后，笔者讲专门写一篇小程序长列表渲染缓存方案的文章，感兴趣的同窗能够关注一下笔者。
虚拟列表是按需显示的一种技术，能够根据用户的滚动，没必要渲染全部列表项，而只是渲染可视区域内的一部分列表元素的技术。正常的虚拟列表分为 渲染区，缓冲区 ，虚拟列表区。
以下图所示。
为了防止大量dom存在影响性能，咱们只对，渲染区和缓冲区的数据作渲染，，虚拟列表区 没有真实的dom存在。 缓冲区的做用就是防止快速下滑或者上滑过程当中，会有空白的现象。
react-tiny-virtual-list
react-tiny-virtual-list 是一个较为轻量的实现虚拟列表的组件。这是官方文档。
import React from 'react';
import {render} from 'react-dom';
import VirtualList from 'react-tiny-virtual-list';
const data = ['A', 'B', 'C', 'D', 'E', 'F', ...];
render(
<VirtualList width='100%' height={600} itemCount={data.length} itemSize={50} // Also supports variable heights (array or function getter) renderItem={({index, style}) => <div key={index} style={style}> // The style property contains the item's absolute position Letter: {data[index]}, Row: #{index} </div> } />,
document.getElementById('root')
);
复制代码
手写一个react虚拟列表
let num = 0
class Index extends React.Component<any, any>{
state = {
list: new Array(9999).fill(0).map(() =>{
num++
return num
}),
scorllBoxHeight: 500, /* 容器高度(初始化高度) */
renderList: [], /* 渲染列表 */
itemHeight: 60, /* 每个列表高度 */
bufferCount: 8, /* 缓冲个数 上下四个 */
renderCount: 0, /* 渲染数量 */
start: 0, /* 起始索引 */
end: 0 /* 终止索引 */
}
listBox: any = null
scrollBox : any = null
scrollContent:any = null
componentDidMount() {
const { itemHeight, bufferCount } = this.state
/* 计算容器高度 */
const scorllBoxHeight = this.listBox.offsetHeight
const renderCount = Math.ceil(scorllBoxHeight / itemHeight) + bufferCount
const end = renderCount + 1
this.setState({
scorllBoxHeight,
end,
renderCount,
})
}
/* 处理滚动效果 */
handerScroll=()=>{
const { scrollTop } :any = this.scrollBox
const { itemHeight , renderCount } = this.state
const currentOffset = scrollTop - (scrollTop % itemHeight)
/* translate3d 开启css cpu 加速 */
this.scrollContent.style.transform = `translate3d(0, ${currentOffset}px, 0)`
const start = Math.floor(scrollTop / itemHeight)
const end = Math.floor(scrollTop / itemHeight + renderCount + 1)
this.setState({
start,
end,
})
}
/* 性能优化：只有在列表start 和 end 改变的时候在渲染列表 */
shouldComponentUpdate(_nextProps, _nextState){
const { start , end } = _nextState
return start !== this.state.start || end !==this.state.end
}
/* 处理滚动效果 */
render() {
console.log(1111)
const { list, scorllBoxHeight, itemHeight ,start ,end } = this.state
const renderList = list.slice(start,end)
return <div className="list_box" ref={(node) => this.listBox = node} > <div style={{ height: scorllBoxHeight, overflow: 'scroll', position: 'relative' }} ref={ (node)=> this.scrollBox = node } onScroll={ this.handerScroll } > { /* 占位做用 */} <div style={{ height: `${list.length * itemHeight}px`, position: 'absolute', left: 0, top: 0, right: 0 }} /> { /* 显然区 */ } <div ref={(node) => this.scrollContent = node} style={{ position: 'relative', left: 0, top: 0, right: 0 }} > { renderList.map((item, index) => ( <div className="list" key={index} > {item + '' } Item </div> )) } </div> </div> </div>
}
}
复制代码
效果
具体思路
① 初始化计算容器的高度。截取初始化列表长度。这里咱们须要div占位,撑起滚动条。
② 经过监听滚动容器的 onScroll事件,根据 scrollTop 来计算渲染区域向上偏移量, 咱们要注意的是，当咱们向下滑动的时候，为了渲染区域，能在可视区域内，可视区域要向上的滚动; 咱们向上滑动的时候，可视区域要向下的滚动。
③ 经过从新计算的 end 和 start 来从新渲染列表。
性能优化点
① 对于移动视图区域，咱们能够用 transform 来代替改变 top值。
② 虚拟列表实际状况，是有 start 或者 end 改变的时候，在从新渲染列表，因此咱们能够用以前 shouldComponentUpdate 来调优，避免重复渲染。
总结
react 性能优化是一个攻坚战，须要付出不少努力，将咱们的项目作的更完美，但愿看完这片文章的朋友们能找到react优化的方向，让咱们的react项目飞起来。
感受有用的朋友能够关注笔者公众号 前端Sharing 持续更新好文章。