function logProps(WrappedComponent) { return class extends React.Component { componentWillReceiveProps(nextProps) { console.log('Current props: ', this.props); console.log('Next props: ', nextProps); } render() { // Wraps the input component in a container, without mutating it. Good! return <WrappedComponent {...this.props} />; } } }
这个新的logProps与旧的logProps有相同的功能，同时新的logProps避免了潜在的冲突。对class类型的组件和函数类型额组件同样适用。
2.不要在render方法中使用HOCs
React的diff算法使用组件的身份去决定是应该更新已存在的子树还是拆除旧的子树并装载一个新的，如果从render方法中返回的组件与之前渲染的组件恒等(===)，那么React会通过diff算法更新之前渲染的组件，如果不相等，之前渲染的子树会完全卸载。
render() { // A new version of EnhancedComponent is created on every render // EnhancedComponent1 !== EnhancedComponent2 const EnhancedComponent = enhance(MyComponent); // That causes the entire subtree to unmount/remount each time! return <EnhancedComponent />; }
在组件定义的外部使用HOCs，以至于结果组件只被创建一次。在少数情况下，你需要动态的应用HOCs，你该在生命周期函数或者构造函数中做这件事
3.静态方法必须手动复制
有的时候在React组件上定义静态方法是非常有用的。当你给某个组件应用HOCs，虽然原始组件被包裹在容器组件里，但是返回的新组件不会有任何原始组件的静态方法。
// Define a static method WrappedComponent.staticMethod = function() {/*...*/} // Now apply an HOC const EnhancedComponent = enhance(WrappedComponent); // The enhanced component has no static method typeof EnhancedComponent.staticMethod === 'undefined' // true
为了让返回的组件有原始组件的静态方法，就要在函数内部将原始组件的静态方法复制给新的组件。
function enhance(WrappedComponent) { class Enhance extends React.Component {/*...*/} // Must know exactly which method(s) to copy :( // 你也能够借助第三方工具 Enhance.staticMethod = WrappedComponent.staticMethod; return Enhance; }
4.容器组件上的ref不会传递给wrapped component
虽然容器组件上的props可以很简单的传递给wrapped component，但是容器组件上的ref不会传递到wrapped component。如果你给通过HOCs返回的组件设置了ref，这个ref引用的是最外层容器组件，而非wrapped 组件