使用Pure Component
优质
小牛编辑
126浏览
2023-12-01
Pure Component默认会在shouldComponentUpdate
方法中做浅比较. 这种实现可以避免可以避免发生在state或者props没有真正改变的重新渲染.
Recompose提供了一个叫pure
的高阶组件来实现这个功能, React在v15.3.0中正式加入了React.PureComponent
.
坏实践
export default (props, context) => {
// ... do expensive compute on props ...
return <SomeComponent {...props} />
}
好实践
import { pure } from 'recompose';
// This won't be called when the props DONT change
export default pure((props, context) => {
// ... do expensive compute on props ...
return <SomeComponent someProp={props.someProp}/>
})
更好的写法
// This is better mainly because it uses no external dependencies.
import { PureComponent } from 'react';
export default class Example extends PureComponent {
// This won't re-render when the props DONT change
render() {
// ... do expensive compute on props ...
return <SomeComponent someProp={props.someProp}/>
}
}
})
参考资料:
- Recompose
- Higher Order Components with Functional Patterns Using Recompose
- React: PureComponent
- Pure Components
- <a href="https://medium.com/@abhiaiyer/top-5-recompose-hocs-1a4c9cc4566">Top 5 Recompose HOCs