【React深入】从Mixin到HOC再到Hook(10)

如果原组件有非常多的静态属性，这个过程是非常痛苦的，而且你需要去了解需要增强的所有组件的静态属性是什么，我们可以使用hoist-non-react-statics来帮助我们解决这个问题，它可以自动帮我们拷贝所有非React的静态方法，使用方式如下：

import hoistNonReactStatic from 'hoist-non-react-statics';  
function proxyHOC(WrappedComponent) {  
  class HOCComponent extends Component {  
    render() {  
      return <WrappedComponent {...this.props} />;  
    }  
  }  
  hoistNonReactStatic(HOCComponent,WrappedComponent);  
  return HOCComponent;  
} 

告诫—传递refs

使用高阶组件后，获取到的ref实际上是最外层的容器组件，而非原组件，但是很多情况下我们需要用到原组件的ref。

高阶组件并不能像透传props那样将refs透传，我们可以用一个回调函数来完成ref的传递：

function hoc(WrappedComponent) {  
  return class extends Component {  
    getWrappedRef = () => this.wrappedRef;  
    render() {  
      return <WrappedComponent ref={ref => { this.wrappedRef = ref }} {...this.props} />;  
    }  
  }  
}  
@hoc  
class Input extends Component {  
  render() { return <input></input> }  
}  
class App extends Component {  
  render() {  
    return (  
      <Input ref={ref => { this.inpitRef = ref.getWrappedRef() }} ></Input>  
    );  
  }  
} 

React 16.3版本提供了一个forwardRef API来帮助我们进行refs传递，这样我们在高阶组件上获取的ref就是原组件的ref了，而不需要再手动传递，如果你的React版本大于16.3，可以使用下面的方式:

function hoc(WrappedComponent) {  
  class HOC extends Component {  
    render() {  
      const { forwardedRef, ...props } = this.props;  
      return <WrappedComponent ref={forwardedRef} {...props} />;  
    }  
  }  
  return React.forwardRef((props, ref) => {  
    return <HOC forwardedRef={ref} {...props} />;  
  });  
} 

告诫—不要在render方法内使用高阶组件

React Diff算法的原则是：

•  使用组件标识确定是卸载还是更新组件
•  如果组件的和前一次渲染时标识是相同的，递归更新子组件
•  如果标识不同卸载组件重新挂载新组件

每次调用高阶组件生成的都是是一个全新的组件，组件的唯一标识响应的也会改变，如果在render方法调用了高阶组件，这会导致组件每次都会被卸载后重新挂载。

约定-不要改变原始组件

官方文档对高阶组件的说明：

高阶组件就是一个没有副作用的纯函数。

我们再来看看纯函数的定义：

如果函数的调用参数相同，则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化，必须只依赖于其输入参数。

该函数不会产生任何可观察的副作用，例如网络请求，输入和输出设备或数据突变。

（编辑：ASP站长网）