react 高阶组件的代理模式

说明

• react 理解装饰器
• react 写一个预加载数据的装饰器
• 看了以前的装饰器的理解和预加载数据的装饰器一定有疑问，为什么这么写装饰器。来看看下面的文章描述：

react 高阶组件

• 在目前的前端社区，『推崇组合，不推荐继承（prefer composition than inheritance）』

什么是高阶组件？

• 一个高阶组件只是一个包装了另外一个组件的 react 组件。
• 通常这是一个函数，本质上是一个类工厂函数(class factoy)

理解一个函数

hocFactory:: W: React.Component => E: React.Component

这里 W（WrappedComponent） 指被包装的 React.Component，E（Enhanced Component） 指返回的新的高阶 React 组件。

• 包装
  • 1、属性代理(props proxy): 高阶组件操控传递给 wrappedComponent 的 props
  • 2、反向代理(inheritance inversion): 高阶组件继承(extends)

高阶组件用在什么地方？

• 代码复用，逻辑抽象，抽离底层准备（bootstrap）代码
• 渲染劫持
• State 抽象和更改
• Props 更改

可用的地方非常多，下面我们先来实现一个高阶组件

高阶组件的实现

• 当然其中实现的方法主流的包括我们上面提到的，属性代理和反向继承两种方法。
• 这两种方法中又包括了几种包装 WrappedComponent 的方法

Props Proxy(属性代理 PP)

function ppHOC(WrappedComponent) {
  return class PP extends React.Component {
    render() {
      return <WrappedComponent {...this.props}/>
    }
  }
}

复制代码

可以看到，这里高阶组件的 render 方法返回了一个 type 为 WrappedComponent 的 React Element（也就是被包装的那个组件），我们把高阶组件收到的 props 传递给它，因此得名 Props Proxy。

未完待续

• 高阶组件有很多知识点，后续补上，本次为了给前面两篇文章的装饰器用到的高阶组件做解释。