使用Pure Component

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
• @abhiaiyer/top-5-recompose-hocs-1a4c9cc4566">Top 5 Recompose HOCs