是什么
高阶组件是一个函数, 能够接受一个组件并返回一个新的组件. 没有任何副作用.
为什么用
封装并抽离组件的通用逻辑, 让此部分逻辑在组件间更好地被复用.
如何用
- //hoc 为我们的高阶组件, 可以使用 es7 装饰器语法来使用高阶组件
- // 当然也可以不用 es7, 如: let hocHello = hoc(Hello), 只是 es7 的语法更优雅一些.
- // 高阶组件可以叠加使用, 可以对一个组件使用多个高阶组件
- @hoc
- class Hello extends React.Component {
- //
- }
如何实现
属性代理
下面的例子是最简单的一个实现
- function hoc(ImportComponent) {
- return class Hoc extends React.Component {
- static displayName = `Hoc(${getDisplayName(ImportComponent)})` //displayName 是设置高阶组件的显示名称
- render() {
- return <ImportComponent {...this.props} />
- }
- }
- }
- function getDisplayName(Component) {
- return Component.displayName || Component.name || "Component"
- }
作用: 操作 prop,refs 获取组件实例
注意事项: 静态方法无法传递, 必须手动复制; refs 无法传递.
反向继承
下面的例子是最简单的一个实现
- export function hoc(ImportComponent) {
- return class Hoc extends ImportComponent {
- static displayName = `Hoc(${getDisplayName(ImportComponent)})`
- render() {
- return super.render()
- }
- }
- }
作用: 操作 state; 渲染劫持 (操作它的 render 函数)
注意事项: 通过继承 ImportComponent, 除了一些静态方法, 包括生命周期, state, 各种 function, 我们都可以得到.
原则
不要修改原组件, 高阶组件只是通过组合的方式将子组件包装在容器组件中, 是一个无副作用的纯函数.
不要在 render 方法内部使用高阶组件.
高阶组件可以向组件添加功能, 但是不应该大幅度地改变功能.
为了方便调试, 选择一个显示名称, 表示它是高阶组件的结果.
来源: http://www.jianshu.com/p/bd22c0a479c5