关于React的性能优化
一、React的diff算法
1.1 React更新机制
首先看一下Raect的渲染流程：
再看一下React的更新流程：
1.2 React更新流程
React在state或props发生改变时，调用render函数，渲染一颗新的虚拟DOM树；
React需要基于这两颗不同的树之间的差异来判别如何有效的更新UI：
- 同层之间相互比较，不会跨节点比较；
- 不同类型的节点，产生不同的树结构（如果以div标签为根的树改为了p标签，那div的所有子元素都重新渲染，产生p为根的树）；
- 开发中，可以通过key来指定哪些节点在不同的渲染下保持稳定；
如图所示，只会进行同层之间的比较
tip：为什么不建议使用index作为key？
在列表渲染时，使用index作为key是没有性能提升的，因为diff算法在对key进行比较时，如果key为index索引，那么在列表中间插入一个值时，后面的所有index都会发生改变，原来元素的index和新的元素的index自然就会不同，即使他们是同一个元素，但是key为index，index不一致就会进行重渲染而不是移动原来的元素到新的位置。
二、SCU
在render函数执行时存在这么一个问题：
每当调用setState进行数据更新时，就会执行render函数来重新渲染我们的DOM结构，如果我们只更新了父组件中的数据，但是子组件内依赖的props并没有发生改变，只要调用render，就都会重新渲染，即使子组件的数据没有发生改变，这就会导致性能低下。
shouldComponentUpdate生命周期
React提供了一个生命周期方法 shouldComponentUpdate（简称为SCU），这个方法接受参数，并且要有返回值：
该方法有两个参数：
- 参数一：nextProps：props修改之后新的props属性；
- 参数二：nextState：state修改之后新的state属性。
这个生命周期函数可以决定render函数是否执行，返回值是一个boolean类型：
- 如果它返回的是一个true，就执行render；
- 如果返回的是false，那render不会执行，就不会重新渲染DOM。
- 默认返回的是true，也就是说只要state发生改变，就会调用render函数来重新渲染DOM
PrueComponent
但是如果每次都在组件内部使用 shouldComponentUpdate， 那么开发起来真的是好麻烦啊；
- 而使用shouldComponentUpdate的目的不外乎是当state中的数据发生改变时，来决定 shouldComponentUpdate 返回的是true还是false，来决定组件要不要重新渲染。
- React已经提供了一个方法实现这点，只需要将class组件继承自 PureComponent类就好了。
demo如下：App组件有Home和Banner两个子组件，Home有App传递的props，Banner没有porps
import React, { PureComponent } from 'react'
import Home from './Home'
import Banner from './Banner'
export class App extends PureComponent {
constructor() {
super()
this.state = {
message: "Hello World"
}
}
chanegText() {
this.setState({
message: "你好,世界"
})
}
render() {
console.log("App render")
const { message } = this.state
return (
<div>
<h2>{message}</h2>
<button onClick={e => this.chanegText()}>修改文本</button>
<Home message={message} />
<Banner />
</div>
)
}
}
export default App
import React, { PureComponent } from 'react'
export class Home extends PureComponent {
constructor(props) {
super(props)
}
render() {
console.log("Home render")
const { message } = this.props
return (
<div>
<h2>Home</h2>
<div>{message}</div>
</div>
)
}
}
export default Home
import React, { PureComponent } from 'react'
export class Banner extends PureComponent {
constructor() {
super()
}
render() {
console.log("Banner render")
return (
<div>Banner</div>
)
}
}
export default Banner
memo 高阶组件
函数式组件如何实现PrueComponent那样在props没有改变时，不要重新渲染DOM树呢？；
只需要使用高阶组件memo就可以了：
import { memo } from "react"
const PreFile = memo(function() {
return (
<div>
PreFile
</div>
)
})
export default PreFile
React官网：zh-hans.react.dev/reference/r…