【react】12.React 高阶组件、Render props、hooks 有什么区别？

wangky57

已于 2023-02-25 21:37:09 修改

阅读量629

点赞数 1

分类专栏： react 文章标签： react.js javascript 前端

于 2022-08-09 17:59:16 首次发布

本文链接：https://blog.csdn.net/weixin_45390249/article/details/126252502

版权

这三者是目前 react 解决代码复用的主要方式：

高阶组件(hoc)

官方解释: 高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

简言之，HOC 是一种组件的设计模式，HOC 接受一个组件和额外的参数（如果需要），返回一个新的组件。HOC 是纯函数，没有副作用。

// hoc的定义
function withSubscription(WrappedComponent, selectData) {
   
  return class extends React.Component {
   
    constructor(props) {
   
      super(props);
      this.state = {
   
        data: selectData(DataSource, props)
      };
    }