高阶组件

Higher Order Components

  • 高阶组件 HOC 是 React 中用于复用组件逻辑的一种高级技巧

  • HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式

  • 具体来说，高阶组件是参数为组件，返回值为新组件的函数

  • 组件是将 props 转换为 UI，高阶组件是将组件转换为另一个组件

使用 HOC 解决横切关系点问题

  • 组件是 React 中代码复用的基本单元，但你会发现某些模式并不适合传统组件

```jsx harmony

class CommentList extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.state = { // 假设 DataSource 是个全局范围内的数据源变量 comments: DataSource.getComments() } }

componentDidMount() {
    // 订阅更改
    DataSource.addChangeListener(this.handleChange);
}

componentWillUnmount() {
    // 清除订阅
    DataSource.removeChangeLister(this.handleChange);
}

handleChange() {
    // 当数据源更新时，更新组件状态
    this.setState({
        comments: DataSource.getComments()
    })
}

render() {
    return (
        <div>
            {this.state.comments.map((comment) => (
                <Comment comment={comment} key={comment.id} />
            ))}
        </div>
    )
}

}

class BlogPost extends React.Component { constructor(props) { super(props) this.handleChange = this.handleChange.bind(this); this.state = { blogPost: DataSource.getBlogPost(props.id) } }

componentDidMount() {
    DataSource.addChangeListener(this.handleChange)
}

componentWillUnmount() {
    DataSource.removeChangeListener(this.handleChange);
}

handleChange() {
    this.setState({
        blogPost: DataSource.getBlogPost(this.props.id)
    })
}

render() {
    return <TextBlock text={this.state.blogPost} />
}

}

* 上面的两个组件不同
    * 它们在 DataSource 上调用不同的方法，且渲染不同的结果
    * 但它们的大部分实现都是一样的
        * 在挂载时，向 DataSource 添加一个更改监听器
        * 在监听器内部，当数据源发生改变时，调用 setState
        * 在卸载时，删除监听器

* 你可以想象，在一个大型应用程序中，这种订阅 DataSource 和调用 setState 的模式将一次又一次地发生
* 我们需要一个抽象，允许我们在一个地方定义这个逻辑，并在许多组件之间共享它，这正是高阶组件擅长的地方

* 我们可以编写一个创建组件函数，该函数将接受一个子组件作为它的其中一个参数，该子组件将订阅数据作为 prop
* 第一个参数是被包装组件，第二个参数通过 DataSource 和当前的 props 返回我们需要的数据

```jsx harmony

// 函数接收一个组件
function withSubscription(WrappedComponent, selectData) {
    // ...并返回另一个组件...
    return class extends React.Component {
        constructor(props) {
            super(props);
            this.handleChange = this.handleChange.bind(this);
            this.state = {
                data: selectData(DataSource, props)
            }
        }

        componentDidMount() {
            // 负责订阅相关的操作
            DataSource.addChangeListener(this.handleChange);
        }

        componentWillUnmount() {
            DataSource.removeChangeListener(this.handleChange);
        }

        handleChange() {
            this.setState({
                data: selectData(DataSource, this.props)
            })
        }

        render() {
            // ... 并使用新数据渲染被包装的组件
            // 请注意，我们可能还会传递其他属性
            return <WrappedComponent data={this.state.data} {...this.props} />
        }
    }
}

const CommentListWithSubscription = withSubscription(
    CommentList,
    (DataSource) => DataSource.getComments()
);

const BlogPostWithSubscription = withSubscription(
    BlogPost,
    (DataSource, props) => DataSource.getBlobPost(props.id)
)

  • HOC 不会修改传入的组件，也不会使用继承来复制其行为。

  • 相反，HOC 通过将组件包装在容器组件中来组成新组件

  • HOC 是纯函数，没有副作用

  • 被包装组件接收来自容器组件的所有 prop，同时也接收一个新的用于 render 的 data prop

    • HOC 不需要关心数据的使用方式或原因

    • 被包装组件也不需要关心数据是怎么来的

  • 与组件一样， withSubscription 和包装组件之间的契约完全基于之间传递的 props

    • 这种依赖方式使替换 HOC 变得容易，只要它们为包装的组件提供相同的 prop 即可

不要改变原始组件 使用组合

  • 不要试图在 HOC 中修改组件原型 或 以其他方式改变它

    ```jsx harmony

function logProps(InputComponent) { InputComponent.prototype.componentDidUpdate = function (prevProps) { console.log('Current props: ', this.props); console.log('Previous props: ', prevProps); } // 返回原始的 input 组件，暗示它已经被修改 }

// 每次调用 logProps 时，增强组件都会有 log 输出 const EnhanedComponent = logProps(InputComponent);

* 这样做会导致一些不良后果
    * 输入组件再也无法像 HOC 增强之前那样使用了
    * 更严重的是：如果你再用另一个同样会修改 componentDidUpdate 的 HOC 增强它，那么前面的 HOC 就会失效
    * 同时，这个 HOC 也无法应用于没有生命周期的函数组件

* 修改传入组件的 HOC 是一种糟糕的抽象方式，调用者必须知道它们是如何实现的，才能避免与其他 HOC 发生冲突

* HOC 应该使用组合的方式，通过将组件包装在容器组件中实现功能
```jsx harmony

function logProps(WrappedComponent) {
    return class extends React.Component {
        componentDidUpdate(prevProps, prevState, snapshot) {
            console.log('Current props: ', this.props);
            console.log('Previous props: ', prevProps);
        }

        render() {
            return <WrappedComponent {...this.props}/>
        }
    }
}

  • 该 HOC 与上文中修改传入组件的 HOC 功能相同，同时避免了出现冲突的情况

  • HOC 与 容器组件模式之间有相似之处，容器组件担任分离将高层和低层关注的责任，由容器管理订阅和状态，并将 prop 传递给处理渲染的 UI

  • HOC 使用容器作为其实现的一部分，你可以将 HOC 视为参数化容器组件

约定：将不相关的 props 传递给被包裹的组件

  • HOC 为组件添加特性，自身不应该大幅改变约定，HOC 返回的组件与原组件应保持类似的接口

  • HOC 应该透传与自身无关的 props

  • 保证了 HOC 的灵活性以及可复用性

    ```jsx harmony

render () { // 过滤掉非此 HOC 额外的 props，且不要进行透传 const { extraProp, ...passThroughProps } = this.props;

    // 将 props 注入到被包装的组件中
    // 通常为 state 的值或者实例方法
    const injectedProp = someStateOrInstanceMethod;

    // 将 props 传递给被包装组件
    return (
        <WrappendComponent
            injectedProp={injectedProp}
            {...passThroughProps}
        />
    )
}
## 约定：最大化可组合性

```jsx harmony

// React Redux 的 connect 函数
const ConnectedComment = connect(commentSelector, commentActions)(CommentList);

// connect 是一个函数，它的返回值为另一个函数
const enhance = connect(CommentSelector, commentActions);
// 返回值为 HOC，它会返回已连接 Redux store 的组件
const ConnectedComment = enhance(CommentList);

  • connect 是一个返回高阶组件的高阶函数

  • connect 函数返回的单参数 HOC 具有签名 Component => Component

  • 输出类型与输入类型相同的函数很容易组合在一起

约定：包装显示名称以便轻松调试

  • 最常见的方法使用 HOC 包住被包装组件的显示名称

  • 比如：高阶组件名称为 withSubscription，被包装组件的显示名称为 CommentList，显示名称应该为 WithSubscription(CommentList)

    ```jsx harmony

function withSubscription(WrappedComponent) { class WithSubscription extends React.Component {/ ... /} WithSubscription.displayName = WithSubscription(${getDisplayName(WrappedComponent)}); return WithSubscription; }

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

## 注意事项

### 不要再 render 方法中使用 HOC
* React 的 diff 算法 称为协调 使用组件标识来确定它是应该更新现有子树还是将其丢弃并挂载新子树
* 如果 render 返回的组件与之前一个渲染中的组件相同 === ，则 React 通过将子树与新子树进行区分来递归更新子树，
* 如果它们完全不相等，则完全卸载前一个子树

* 这对 HOC 很重要，因为如果你在 render 中使用了 HOC ，将导致子树每次渲染都会进行卸载，和重新挂载的操作
* 这不仅是性能问题 - 重新挂载组件会导致该组件及其所有子组件的状态丢失
* 在极少数的情况下，你需要动态调用 HOC，你可以在组件的生命周期方法或其他构造函数中进行调用

### 务必复制静态方法
* 当你将 HOC 应用于组件时，原始组件将使用容器组件进行包装，这意味着新组件没有原始组件的任何静态方法
```jsx harmony

// 定义静态函数
WrappedComponent.staticMethod = function () { /*...*/ }
// 现在使用 HOC
const EnhancedComponent = enhance(WrappedComponent);
// 增强组件没有 staticMthod
typeof EnhancedComponent.staticMethod === 'undefined' // true

  • 为了解决这个问题，你可以在返回之前把这些方法拷贝到容器组件上

    ```jsx harmony

function enhance(WrappedComponent) { class Enhance extends React.Component { /.../ } // 必须准确知道应该拷贝哪些方法 Enhance.staticMethod = WrappedComponent.staticMethod; return Enhance; }

* 但要这样做，你需要知道哪些方法应该被拷贝，你可以使用 hoist-non-react-statics 自动拷贝所有非 React 静态方法
```jsx harmony

import hoistNonReactStatic from 'hoist-non-react-statics';
function enhance(WrappedComponent) {
  class Enhance extends React.Component {/*...*/}
  hoistNonReactStatic(Enhance, WrappedComponent);
  return Enhance;
}

Refs 不会被传递

  • 虽然高阶组件约定将所有 props 传递给被包装组件，但这对 refs 并不适用

  • ref 实际上并不是一个 prop - 就像 key 一样，它是由 React 专门处理的

  • 如果将 ref 添加到 HOC 的返回组件中，则 ref 引用指向容器组件，而不是被包装组件

上一页Fragments下一页与第三方库协同

最后更新于