实用React.memo来阻止函数式组件不必要更新

发表于 | 分类于 | 评论数： | 阅读次数：

对于一个函数组件来说,props和state的变化都会引起组件的重新渲染,如果我们只关心props变化,而组件内部state变化我们不想此组件重新渲染,可以使用React.memo,它类似于class组件中的生命周期shouldComponentUpdate,但是它不是一个hook.

1
2
3
const Button = React.memo((props) => {
  // 你的组件
});

这不是一个 Hook 因为它的写法和 Hook 不同。React.memo 等效于 PureComponent，但它只比较 props。（你也可以通过第二个参数指定一个自定义的比较函数来比较新旧 props。如果函数返回 true，就会跳过更新。）

React.memo 不比较 state，因为没有单一的 state 对象可供比较。但你也可以让子节点变为纯组件，或者 用 useMemo 优化每一个具体的子节点。

1
2
3
4
5
React.memo(function MyComponent (props) {

  return <div>{ "My Component " + props.value }</div>;

})
1
2
3
4
5
6
7
8
9
10
11
12
function SomeComp({prop1, prop2}) {
    return(
        ..
    )

}
React.memo(SomeComp, (props, nextProps)=> {
    if(props.prop1 === nextProps.prop1) {
        // don't re-render/update
        return true
    }
})

React.memo的第二个参数可以传入一个函数来比较新旧props,函数返回为true时,会跳过更新.

thank u !