【React】memo为函数组件创造shouldComponentUpdate

React v16.6.0出了一些新的包装函数(wrapped functions),一种用于函数组件PureComponent / shouldComponentUpdate形式的React.memo()

React.memo()是一个高阶函数,它与 React.PureComponent类似,但是一个函数组件而非一个类。

利用memo我们就能函数组件创造为Purecomponent

总之就是, 在今天,我们也能为函数组件做性能优化了, 就让我们来演示下具体如何使用

先创建一个普通的函数组件

这是一个最普通的函数组件, 接收一个nameprops参数

1
2
3
4
5
// 创建一个函数组件
function Child({ name }) {
console.log('I am rendering')
return <div>Memo组件 name => { name }</div>
}

显式地shouldComponentUpdate

然后我们为其量身定制一个shouldComponentUpdate

1
2
3
4
5
6
7
function areEqual(prevProps, nextProps) {
if( prevProps.name == nextProps.name ) {
return true
} else {
return false
}
}

产生出一个新组件

利用memo这个高阶函数,我们创造出一个新的组件,这将会是个拥有shouldComponentUpdate的函数组件

1
2
import React, { memo, Component } from 'react'
const DemoComponent = memo(Child, areEqual)

查看结果

最后我们将其放入render函数, 让它渲染出来, 并传入刚刚设定的name参数

1
2
3
4
5
6
7
8
9
10
11

export default class Menotest extends Component {
render() {
return (
<div>
{/* seconds作为Props传入 */}
<DemoComponent name="小明" />
</div>
)
}
}

结果如下:
2019-04-12-22-30-31


完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import React, { memo, Component } from 'react'

// 创建一个函数组件
function Child({ name }) {
console.log('I am rendering')
return <div>Memo组件 name => { name }</div>
}
// 注意 函数组件没有state , 显式的shouldComponentUpdate
function areEqual(prevProps, nextProps) {
if( prevProps.name == nextProps.name ) {
return true
} else {
return false
}
}
const DemoComponent = memo(Child, areEqual)

export default class Menotest extends Component {
render() {
return (
<div>
{/* seconds作为Props传入 */}
<DemoComponent name="小明" />
</div>
)
}
}
你的支持将鼓励我继续创作