React 中性能优化、 memo、 PureComponent、shouldComponentUpdate 的使用
场景
React
是一个用于构建用户界面的JavaScript
库,主要负责将数据转换为视图,要保证数据和视图的统一,react
通过 重新render
来保证数据和视图的统一,但当数据没有变化时,视图重新渲染,就会造成不必要的性能浪费
看下面这个例子,
import React from 'react'
class Children extends React.Component {
render () {
console.log(' Children render ')
return (<div>Children Component </div>)
}
}
export default class Parnet extends React.Component {
state = {
count: 0
}
render () {
return (
<div>
<button onClick={
() => {
this.setState({
count: this.state.count + 1})}}>button</button>
<Children></Children>
count: {
this.state.count }
</div>
)
}
}
这个例子主要是用两个组件,一个 Parent
组件 和 一个 Children
组件,当我们在修改 Parent
组件的 count
时, Parent
组件应该重新渲染,保持数据 和 视图的统一,而 Children
组件 这个时候应不应该重新渲染呢,按道理,不会重新渲染,因为他本身的数据没有变,但当我们点击按钮的时候,发现 每次 count
改变, Children
组件都会重新渲染一次,这明显存在问题,而 react
提供了几种方案,供我们解决这种问题
shouldComponentUpdate
生命周期 shouldComponentUpdate
如果返回 false
,该组件就不会重新渲染,我们认为,只要 Children
组件当前的 name
和 下一次 更新的值 相等,那么 Children
组件就没必要重新渲染,shouldComponentUpdate
函数 接受两个参数,第一个是 下一次更新的 porps
值,第二个 是 下一次 更新的 state
值, 只需要当 nextProps.name === this.props.name
时,return false,Children
就不会重新渲染
import React from 'react'
class Children extends React.Component {
// 利用生命周期 shouldComponentUpdate 对 xia
shouldComponentUpdate (nextProps, nextState) {
if (nextProps.name === this.props.name) return false
return true
}
render () {
console.log(' Children render ')
return (<div>Children Component name {
this.props.name }</div>)
}
}
export default class Parnet extends React.Component {
state = {
count: 0
}
render () {
return (
<div>