【React深入】从Mixin到HOC再到Hook

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方法调用了高阶组件，这会导致组件每次都会被卸载后重新挂载。

约定-不要改变原始组件

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

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

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

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

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

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!