使用Pure Component

优质
小牛编辑
126浏览
2023-12-01

Pure Component默认会在shouldComponentUpdate方法中做浅比较. 这种实现可以避免可以避免发生在state或者props没有真正改变的重新渲染.

Recompose提供了一个叫pure的高阶组件来实现这个功能, React在v15.3.0中正式加入了React.PureComponent.

坏实践

  1. export default (props, context) => {
  2. // ... do expensive compute on props ...
  3. return <SomeComponent {...props} />
  4. }

好实践

  1. import { pure } from 'recompose';
  2. // This won't be called when the props DONT change
  3. export default pure((props, context) => {
  4. // ... do expensive compute on props ...
  5. return <SomeComponent someProp={props.someProp}/>
  6. })

更好的写法

  1. // This is better mainly because it uses no external dependencies.
  2. import { PureComponent } from 'react';
  3. export default class Example extends PureComponent {
  4. // This won't re-render when the props DONT change
  5. render() {
  6. // ... do expensive compute on props ...
  7. return <SomeComponent someProp={props.someProp}/>
  8. }
  9. }
  10. })

参考资料: