React高阶组件探究（译文）

强调: 这篇文章是翻译自 Medium 上的一篇文章(2016,1.13), 原文入口。如有不当和任何建议, 请联系我。

摘要

这篇文章是给想使用 Higher Order Components (高阶组件,本文将使用简写 HOC) 模式的进阶用户. 如果你对 React 还不熟悉, 你可能需要从 React 的官方文档开始。

在很多 React 库的使用中, HOC已经证明了它的价值。这篇文章我们将详细的讲讲什么是 HOC, 你可以用它来做什么, 它的局限以及怎么实践它。

在附录中我们回顾一些对学习 HOC 不那么核心的,但我想我们应该涉及到的一些概念。

这篇文章需要一些 ES6 的知识。

Let’ go!

什么是高阶组件 ?

一个高阶组件仅仅是封装了另一个 React.Component 的 React.Component 组件。

这种模式通常通过一个函数来实现, 其实也就是像下面用 haskell 伪代码所表达的一个类工厂。

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

W (WrappedComponent) 是被封装的 React.Component, E (Enhanced Component) 是所返回的新的, HOC的 React.Component。

我们有意的模糊了封装部分的定义, 因为它有两种表示。

Props Proxy : HOC 可以操作传给 WrappedComponent W 的 props。
Inheritance Inversion : HOC 可以拓展 WrappedComponent W。

我们将详细探索这两种模式。

我们可以用 HOC 来做什么?

一个高级的 HOC 可以让你:

重用代码, 逻辑和样式抽象
拦截 Render 方法
State 抽象和操作
Props 操作

后面我们将深入探究这些部分, 现在, 我们得先学学如何实现 HOCs, 因为如何实现 HOC 将影响我们到底有什么能做, 有什么不能做。

HOC 工厂实现方式

这个部分我们将学习在 React 中实现 HOCs 的两个重要实现方法: Props Proxy (PP) 和 Inheritance Inversion (II)。两个都可以通过各自的方式来操作 WrappedComponent。

Props Proxy

下面可以简单的实现 Props Proxy (PP):

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

注意这里重要的是 HOC 的 render 方法返回一个类型是 React Element 的 WrappedComponent。我们也将 HOC 收到的 props 传递给它。这也是为什么叫 Props Proxy。

注意:

1
2
3

<WrappedComponent {...this.props}/>
// is equivalent to
React.createElement(WrappedComponent, this.props, null)

上面两种方式都创建了一个描述了在 React reconciliation 过程中如何 render 的 React Element, 关于 React Element VS Components 更多的信息, 可以看这里

Props Proxy 可以做什么

操作 props
通过 Refs 访问实例
抽象 State
用其他的 elements 封装 WrappedComponent

操作 props

你可以读取,添加,修改和删除要传递给 WrappedComponent 的props。

当删除和修改重要props时要小心操作, 你最好给你的高阶 props加上命名空间,以防止破坏 WrappedComponent

Example: 添加新的props。在 WrappedComponent中可以通过 this.props.user 来访问 user的 currentLoggedInUser 方法。

function ppHOC(WrappedComponent) {
    return class PP extends React.Component {
        return() {
            const newProps = {
                user: currentLoggedInUser
            }
            return <WrappedComponent {...this.props} {...newProps} />
        }
    }
}

通过 Refs 访问实例对象

你可以通过 ref 来访问 this( WrappedComponent 的实例对象),但是你需要一个完全的 WrappedComponent 初始普通的 render 过程来保证 ref被计算,这以为着你需要在 HOC 的render方法中返回 WrappedComponent 元素, 让 React 来做他的 reconciliation 过程，只有这样你才能有个指向 WrappedComponent 实例对象的 ref

Example: 在下面例子中, 我们探索了怎样通过 refs 去访问实例方法和 WrappedComponent 的实例本身。

TODO: 测试

function refsHOC(WrappedComponent) {
    return class RefsHOC extends React.Component {
        proc(WrappedComponentInstance){
            WrappedComponentInstance.method();
        }
        render(){
            const props = Object.assign({},this.props, {ref:this.proc.bind(this)})
            return <WrappedComponent {...this.props}/>
        }
    }
}

state 抽象

你可以通过提供 props 和 callbacks 给 WrappedComponent 来抽象它的 state。对比

Example: 例子中, 我们简单的抽象了 名字输入框 的 value 和 onChange 处理方法。虽然这种方式不常见,但是它很好的说明了 state 抽象这点。

function ppHOC(WrappedComponent){
    return class PP extends React.Component {
        constructor(props){
            super(props)
            this.state = {
                name: ''
            }
            this.onNameChange = this.onNameChange.bind(this)
        }
        onNameChange(event) {
            this.setState({
                name: event.target.value
            });
        }
        render() {
            const newProps = {
                name: {
                    value: this.state.value,
                    onChange: this.onNameChange
                }
            }
            return <WrappedComponent {...this.props} {...this.newProps} />
        }
    }
}

你可以这样来使用:

@ppHOC
class Example extends React.Component {
    render() {
        return <input name='name' {...this.props.name} />
    }
}

这个 input 将自动变成一个受控的 input

更普遍的数据绑定 HOC 方法戳这里

用其他元素来封装 WrappedComponent

我们可以用其他的组件或者元素来封装 WrappedComponent, 从而达到一些样式布局目的。有些基本的用处可以由常规的父组件来实现(附录 B),但是用 HOC 可以更加的灵活。

Example: 样式封装

function ppHOC(WrappedComponent) {
    return class PP extends React.Component {
        return (
            <div style={{display:'block'}}>
                <WrappedComponent {...this.props} />
            </div>
        )
    }
}

Inheritance Inversion (反演继承)

Inheritance Inversion (II) 可以这样简单的实现

function iiHOC(WrappedComponent) {
    return class Enhanced extends WrappedComponent {
        render() {
            return super.render()
        }
    }
}

如你所见, 返回的 HOC 类 (Enhanced) 拓展了 WrappedComponent。叫做反演继承是因为,不同与 WrappedComponent 拓展一些别的增强器, 它自己被动的被增强器拓展了。这两种拓展之间的关系是相反。

Inheritance Inversion 允许 HOC 通过 this 来访问 WrappedComponent 的实例对象, 这以为这它可以访问 state, props, 组件生命周期 hooks 和 render method。

这里不会讲太多关于生命周期 hooks，因为它不属于 HOC 讨论范围而属于 React。但是注意用 II 你可以给 WrappedComponent 创建新的生命周期 hooks。不过要记得总是调用 super.[lifecycleHook], 以免破坏 WrappedComponent。

Reconciliation Process

开始之前我们先总结一些概念。

React Element 描述了当 React 运行他的 reconciliation 过程时它该怎样被 render。

React Element 可以有两种类型: String 和 Function String 类型的 React Element(STRE) 相当于 DOM 节点, 而 Function 类型的 React Element(FTRE) 相当于创建一个拓展了 React.Component 的组件。关于更多的 Elements 和 Components 戳这里
r
FTRE 将在 React 的 reconciliation 过程中被分解成完全的 STRE 树（最终的结果总是 DOM 元素)

这是非常重要的, 这意味着 Inheritance Inversion HOC 不能保证它所有的子树会被完全的分解。

Inheritance Inversion High Order Components don’t have a guaranty > of having the full children tree resolved.

当我们学习 render 拦截是会感受到它的重要性

我们可以用 Inheritance Inversion 来做什么

render 拦截 (Render Highjacking)
操作 state

Render Highjacking

叫做 render 拦截是因为 HOCs 控制了 WrappedComponent 的 render 方法的输出。
在 Render Highjacking 中你可以:

读取，添加，修改和移除任何 React Elements render 方法中输出的props(指 WrappedComponent 传给它子组件的 props)
通过 render 来读取修改 render 方法中输出的 React Elements tree
条件的显示 elements tree
封装 element 树的样式

render 指 WrappedComponent.render 方法

你不能修改或者创建 WrappedComponent 实例中的 props,因为一个 React 组件
不能修改它所接收到 props, 但是你可以修改 render 方法中输出的 elements 的 > props。

就像我们之前讲到的一样, II HOCs不保证所以的子树被分解, 这表示 Render Highjacking 技术有它的局限。我们的规则是:在 Render Highjacking 中你可以操作部分 WrappedComponent render 方法中输出的 element 树。如果一个 element 树包含了一个函数类型的 React 组件(FTRE), 那么你不能操作那个组件的子树。(在 reconciliation 过程中他们将推迟到真正显示在屏幕上的时候) — ？？？

Example 1: 传统的 rendering。HOC 将 render WrappedComponent render 的东旭,除非 this.props.loggedIn 不为真。 (HOC 会接受到 loggedIn prop)

function iiHOC(WrappedComponent) {
    return class Enhanced extends WrappedComponent {
        render() {
            if (this.props.loggedIn) {
                return super.render()
            } else {
                return null
            }
        }
    }
}

Example 2: 修改 render 输出的 React Elements 树

function iiHOC(WrappedComponent) {
    return class Enhanced extends WrappedComponent {
        render() {
            const elementsTree = super.render()
            let newProps = {};
            if (elementsTree && elementsTree.type === 'input') {
                newProps = {value: 'may the force be with you'}
            }
            const props = Object.assign({},elementsTree.props,newProps)
            const newElementsTree = React.cloneElement(elementsTree, props, elementsTree.props.children)
            return newElementsTree;
        }
    }
}

在这个例子中，如果 WrappedComponent 的 render 输出中有一个 input 作为它的顶级元素，那么我们将改变它的 value 为 ‘may .. with you’。

你可以在这里做各种各样的事情，你可以检索整个 elements 树，并且可以改变树种任意元素的 props。

注意: 你不能通过 Props Proxy 来做 Render Highjacking
尽管你可以通过 WrappedComponent.prototype.render 来访问它的 render 方法, 但你必须要模拟 WrappedComponent 实例和它的 props,并且潜在的处理它的组件生命周期, 而不是交给 React 来做。记住 React 内在的处理组件实例，你处理实例的唯一方法就是通过 this 或者 refs。

操作 state

HOC 可以读取，修改和删除 WrappedComponent 实例的 state，如果你想，你也可以添加更多的 state。但是你将会把 WrappedComponent 的 state 弄得很混乱，可能会让你破坏一些东西。一般来说 HOC 应该有限制去读取或者添加 state，而且对于后者应该有个命名空间来保证不会和 WrappedComponent 的 state 混在一起。

Example: 测试访问 WrappedComponent 的 props 和 state。

export function IIHOCDEBUGGER(WrappedComponent) {
    return class II extends WrappedComponent {
        render() {
            return (
                <div>
                    <h2>HOC Debugger Component</h2>
                    <p>Props</p> <pre>{JSON.stringify(this.props, null, 2)}</pre>
                    <p>State</p><pre>{JSON.stringify(this.state, null, 2)}</pre>
                    {super.render()}
                </div>
            )
        }
    }
}

这个 HOC 用其他的元素封装了 WrappedComponent, 并且显示了 WrappedComponent 实例的 state 和 props。完整的测试例子在这里

命名

当你用 HOC 封装一个组件时，你就丢失了 WrappedComponent 最初的名字，这可能会影响你开发和调试。

常用的解决方法是通过在 WrappedComponent 名字的前面加一些东西来定制 HOC 的名字。下面是 React-Redux 的做法

HOC.displayName = `HOC(${getDisplayName(WrappedComponent)})`
//or
class HOC extends ... {
  static displayName = `HOC(${getDisplayName(WrappedComponent)})`
  ...
  }

getDisplayName 这样定义:

1
2
3

function getDisplayName(WrappedComponent) {
    return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}

可以看看这个库的做法，入口

附录A: HOC 和它的参数

有时候我们需要在 HOCs 中用到参数。

Example: 简单的 PP HOC 参数。

function HOCFactoryFactory(...params){
    //do something with params
    return function HOCFactory(WrappedComponent){
        return class HOC extends WrappedComponent {
            render() {
                return <WrappedComponent {...this.props}/>
            }
        }
    }
}

这样用

HOCFactoryFactory(params)(WrappedComponent)
//or
@HOCFactoryFactory(params)
class WrappedComponent extends React.Component{}

摘要