说明
- 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。
未完待续
- 高阶组件有很多知识点,后续补上,本次为了给前面两篇文章的装饰器用到的高阶组件做解释。