【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要领挪用了高阶组件，这会导致组件每次城市被卸载后从头挂载。

约定-不要改变原始组件

官方文档对高阶组件的声名：

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

我们再来看看纯函数的界说：

假如函数的挪用参数沟通，则永久返回沟通的功效。它不依靠于措施执行时代函数外部任何状态或数据的变革，必需只依靠于其输入参数。

该函数不会发生任何可调查的副浸染，譬喻收集哀求，输入和输出装备或数据突变。

（编辑：湖南网）

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