React中的高阶组件

时间  2021-01-15
标签 html react git github 算法 编程 设计模式 数组 babel 闭包 栏目 React 繁體版
原文   原文链接

React中的高阶组件

高阶组件HOC即Higher Order Component是React中用于复用组件逻辑的一种高级技巧，HOC自身不是React API的一部分，它是一种基于React的组合特性而造成的设计模式。html

描述

高阶组件从名字上就透漏出高级的气息，实际上这个概念应该是源自于JavaScript的高阶函数，高阶函数就是接受函数做为输入或者输出的函数，能够想到柯里化就是一种高阶函数，一样在React文档上也给出了高阶组件的定义，高阶组件是接收组件并返回新组件的函数。react

A higher-order component is a function that takes a component and returns a new component.

具体而言，高阶组件是参数为组件，返回值为新组件的函数，组件是将props转换为UI，而高阶组件是将组件转换为另外一个组件。HOC在React的第三方库中很常见，例如Redux的connect和Relay的createFragmentContainer。git

// 高阶组件定义
const higherOrderComponent = (WrappedComponent) => {
    return class EnhancedComponent extends React.Component {
        // ...
        render() {
          return <WrappedComponent {...this.props} />;
        }
  };
}

// 普通组件定义
class WrappedComponent extends React.Component{
    render(){
        //....
    }
}

// 返回被高阶组件包装过的加强组件
const EnhancedComponent = higherOrderComponent(WrappedComponent);

在这里要注意，不要试图以任何方式在HOC中修改组件原型，而应该使用组合的方式，经过将组件包装在容器组件中实现功能。一般状况下，实现高阶组件的方式有如下两种:github

  • 属性代理Props Proxy。
  • 反向继承Inheritance Inversion。

属性代理

例如咱们能够为传入的组件增长一个存储中的id属性值，经过高阶组件咱们就能够为这个组件新增一个props，固然咱们也能够对在JSX中的WrappedComponent组件中props进行操做，注意不是操做传入的WrappedComponent类，咱们不该该直接修改传入的组件，而能够在组合的过程当中对其操做。算法

const HOC = (WrappedComponent, store) => {
    return class EnhancedComponent extends React.Component {
        render() {
            const newProps = {
                id: store.id
            }
            return <WrappedComponent
                {...this.props}
                {...newProps}
            />;
        }
    }
}

咱们也能够利用高阶组件将新组件的状态装入到被包装组件中，例如咱们可使用高阶组件将非受控组件转化为受控组件。编程

class WrappedComponent extends React.Component {
    render() {
        return <input name="name" />;
    }
}

const HOC = (WrappedComponent) => {
    return class EnhancedComponent extends React.Component {
        constructor(props) {
            super(props);
            this.state = { name: "" };
        }
        render() {
            const newProps = {
                value: this.state.name,
                onChange: e => this.setState({name: e.target.value}),
            }
            return <WrappedComponent 
                {...this.props} 
                {...newProps} 
            />;
        }
    }
}

或者咱们的目的是将其使用其余组件包裹起来用以达成布局或者是样式的目的。设计模式

const HOC = (WrappedComponent) => {
    return class EnhancedComponent extends React.Component {
        render() {
            return (
                <div class="layout">
                    <WrappedComponent  {...this.props} />
                </div>
            );
        }
    }
}

反向继承

反向继承是指返回的组件去继承以前的组件，在反向继承中咱们能够作很是多的操做，修改state、props甚至是翻转Element Tree，反向继承有一个重要的点，反向继承不能保证完整的子组件树被解析，也就是说解析的元素树中包含了组件(函数类型或者Class类型)，就不能再操做组件的子组件了。
当咱们使用反向继承实现高阶组件的时候能够经过渲染劫持来控制渲染，具体是指咱们能够有意识地控制WrappedComponent的渲染过程，从而控制渲染控制的结果，例如咱们能够根据部分参数去决定是否渲染组件。数组

const HOC = (WrappedComponent) => {
    return class EnhancedComponent extends WrappedComponent {
        render() {
            return this.props.isRender && super.render();  
        }
    }
}

甚至咱们能够经过重写的方式劫持原组件的生命周期。babel

const HOC = (WrappedComponent) => {
    return class EnhancedComponent extends WrappedComponent {
        componentDidMount(){
          // ...
        }
        render() {
            return super.render();  
        }
    }
}

因为其实是继承关系，咱们能够去读取组件的props和state，若是有必要的话，甚至能够修改增长、修改和删除props和state，固然前提是修改带来的风险须要你本身来控制。在一些状况下，咱们可能须要为高阶属性传入一些参数，那咱们就能够经过柯里化的形式传入参数，配合高阶组件能够完成对组件的相似于闭包的操做。闭包

const HOCFactoryFactory = (params) => {
    // 此处操做params
    return (WrappedComponent) => {
        return class EnhancedComponent extends WrappedComponent {
            render() {
                return params.isRender && this.props.isRender && super.render();
            }
        }
    }
}

HOC与Mixin

使用Mixin与HOC均可以用于解决横切关注点相关的问题。
Mixin是一种混入的模式，在实际使用中Mixin的做用仍是很是强大的，可以使得咱们在多个组件中共用相同的方法，但一样也会给组件不断增长新的方法和属性，组件自己不只能够感知，甚至须要作相关的处理(例如命名冲突、状态维护等)，一旦混入的模块变多时，整个组件就变的难以维护，Mixin可能会引入不可见的属性，例如在渲染组件中使用Mixin方法，给组件带来了不可见的属性props和状态state，而且Mixin可能会相互依赖，相互耦合，不利于代码维护，此外不一样的Mixin中的方法可能会相互冲突。以前React官方建议使用Mixin用于解决横切关注点相关的问题，但因为使用Mixin可能会产生更多麻烦，因此官方如今推荐使用HOC。
高阶组件HOC属于函数式编程functional programming思想，对于被包裹的组件时不会感知到高阶组件的存在，而高阶组件返回的组件会在原来的组件之上具备功能加强的效果，基于此React官方推荐使用高阶组件。

注意

不要改变原始组件

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

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

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

这样作会产生一些不良后果，其一是输入组件再也没法像HOC加强以前那样使用了，更严重的是，若是你再用另外一个一样会修改componentDidUpdate的HOC加强它，那么前面的HOC就会失效，同时这个HOC也没法应用于没有生命周期的函数组件。
修改传入组件的HOC是一种糟糕的抽象方式，调用者必须知道他们是如何实现的，以免与其余HOC发生冲突。HOC不该该修改传入组件，而应该使用组合的方式，经过将组件包装在容器组件中实现功能。

function logProps(WrappedComponent) {
  return class extends React.Component {
    componentDidUpdate(prevProps) {
      console.log("Current props: ", this.props);
      console.log("Previous props: ", prevProps);
    }
    render() {
      // 将 input 组件包装在容器中，而不对其进行修改，Nice!
      return <WrappedComponent {...this.props} />;
    }
  }
}

过滤props

HOC为组件添加特性，自身不该该大幅改变约定，HOC返回的组件与原组件应保持相似的接口。HOC应该透传与自身无关的props，大多数HOC都应该包含一个相似于下面的render方法。

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

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

  // 将 props 传递给被包装组件
  return (
    <WrappedComponent
      injectedProp={injectedProp}
      {...passThroughProps}
    />
  );
}

最大化可组合性

并非全部的HOC都同样，有时候它仅接受一个参数，也就是被包裹的组件。

const NavbarWithRouter = withRouter(Navbar);

HOC一般能够接收多个参数，好比在Relay中HOC额外接收了一个配置对象用于指定组件的数据依赖。

const CommentWithRelay = Relay.createContainer(Comment, config);

最多见的HOC签名以下，connect是一个返回高阶组件的高阶函数。

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

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

这种形式可能看起来使人困惑或没必要要，但它有一个有用的属性，像connect函数返回的单参数HOC具备签名Component => Component，输出类型与输入类型相同的函数很容易组合在一块儿。一样的属性也容许connect和其余HOC承担装饰器的角色。此外许多第三方库都提供了compose工具函数，包括lodash、Redux和Ramda。

const EnhancedComponent = withRouter(connect(commentSelector)(WrappedComponent))

// 你能够编写组合工具函数
// compose(f, g, h) 等同于 (...args) => f(g(h(...args)))
const enhance = compose(
  // 这些都是单参数的 HOC
  withRouter,
  connect(commentSelector)
)
const EnhancedComponent = enhance(WrappedComponent)

不要在render方法中使用HOC

React的diff算法使用组件标识来肯定它是应该更新现有子树仍是将其丢弃并挂载新子树，若是从render返回的组件与前一个渲染中的组件相同===，则React经过将子树与新子树进行区分来递归更新子树，若是它们不相等，则彻底卸载前一个子树。
一般在使用的时候不须要考虑这点，但对HOC来讲这一点很重要，由于这表明着你不该在组件的render方法中对一个组件应用HOC。

render() {
  // 每次调用 render 函数都会建立一个新的 EnhancedComponent
  // EnhancedComponent1 !== EnhancedComponent2
  const EnhancedComponent = enhance(MyComponent);
  // 这将致使子树每次渲染都会进行卸载，和从新挂载的操做！
  return <EnhancedComponent />;
}

这不只仅是性能问题，从新挂载组件会致使该组件及其全部子组件的状态丢失，若是在组件以外建立HOC，这样一来组件只会建立一次。所以每次render时都会是同一个组件，通常来讲，这跟你的预期表现是一致的。在极少数状况下，你须要动态调用HOC，你能够在组件的生命周期方法或其构造函数中进行调用。

务必复制静态方法

有时在React组件上定义静态方法颇有用，例如Relay容器暴露了一个静态方法getFragment以方便组合GraphQL片断。可是当你将HOC应用于组件时，原始组件将使用容器组件进行包装，这意味着新组件没有原始组件的任何静态方法。

// 定义静态函数
WrappedComponent.staticMethod = function() {/*...*/}
// 如今使用 HOC
const EnhancedComponent = enhance(WrappedComponent);

// 加强组件没有 staticMethod
typeof EnhancedComponent.staticMethod === "undefined" // true

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

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

但要这样作，你须要知道哪些方法应该被拷贝，你可使用hoist-non-react-statics依赖自动拷贝全部非React静态方法。

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

除了导出组件，另外一个可行的方案是再额外导出这个静态方法。

// 使用这种方式代替...
MyComponent.someFunction = someFunction;
export default MyComponent;

// ...单独导出该方法...
export { someFunction };

// ...并在要使用的组件中，import 它们
import MyComponent, { someFunction } from "./MyComponent.js";

Refs不会被传递

虽然高阶组件的约定是将全部props传递给被包装组件，但这对于refs并不适用，那是由于ref实际上并非一个prop，就像key同样，它是由React专门处理的。若是将ref添加到HOC的返回组件中，则ref引用指向容器组件，而不是被包装组件，这个问题能够经过React.forwardRef这个API明确地将refs转发到内部的组件。。

function logProps(Component) {
  class LogProps extends React.Component {
    componentDidUpdate(prevProps) {
      console.log('old props:', prevProps);
      console.log('new props:', this.props);
    }

    render() {
      const {forwardedRef, ...rest} = this.props;

      // 将自定义的 prop 属性 “forwardedRef” 定义为 ref
      return <Component ref={forwardedRef} {...rest} />;
    }
  }

  // 注意 React.forwardRef 回调的第二个参数 “ref”。
  // 咱们能够将其做为常规 prop 属性传递给 LogProps，例如 “forwardedRef”
  // 而后它就能够被挂载到被 LogProps 包裹的子组件上。
  return React.forwardRef((props, ref) => {
    return <LogProps {...props} forwardedRef={ref} />;
  });
}

示例

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>React</title>
</head>

<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    class WrappedComponent extends React.Component {
        render() {
            return <input name="name" />;
        }
    }

    const HOC = (WrappedComponent) => {
        return class EnhancedComponent extends React.Component {
            constructor(props) {
                super(props);
                this.state = { name: "" };
            }
            render() {
                const newProps = {
                    value: this.state.name,
                    onChange: e => this.setState({name: e.target.value}),
                }
                return <WrappedComponent 
                    {...this.props} 
                    {...newProps} 
                />;
            }
        }
    }

    const EnhancedComponent = HOC(WrappedComponent);

    const HOC2 = (WrappedComponent) => {
        return class EnhancedComponent extends WrappedComponent {
            render() {
                return this.props.isRender && super.render();  
            }
        }
    }

    const EnhancedComponent2 = HOC2(WrappedComponent);

    var vm = ReactDOM.render(
        <>
            <EnhancedComponent />
            <EnhancedComponent2 isRender={true} />
        </>,
        document.getElementById("root")
    );
</script>

</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://juejin.cn/post/6844903477798256647
https://juejin.cn/post/6844904050236850184
https://zh-hans.reactjs.org/docs/higher-order-components.htm
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程