React的高阶组件详解

React的高阶组件

高阶组件基本介绍

什么是高阶组件呢? 在认识高阶组价之前, 我们先来回顾一下什么是高阶函数?

相信很多同学都知道(听说过?)，也用过高阶函数

高阶组件和高阶函数它们非常相似的

高阶函数的定义, 至少满足以下条件之一:

接受一个或多个函数作为参数;

返回一个新的函数;

JavaScript中比较常见的filter、map、reduce都是高阶函数。

那么什么是高阶组件呢?

高阶组件的英文是 Higher-Order Components，简称为 HOC;

官方的定义: 高阶组件是一个参数为组件，并且返回值为新组件的函数;

我们可以进行如下的解析:

首先， 高阶组件本身不是一个组件，而是一个函数;

其次，这个函数的参数是一个组件，返回值也是一个组件;

演示代码如下, 我们可以在高阶组件内部定义一个类组件或者函数组件作为返回结果

定义类组件返回

// 定义一个高阶组件
// 1.高阶组件会接收一个组件作为参数
function hoc(Cpn) {
  class NewCpn extends PureComponent {
  }
  // 2.并且返回一个新的组件
  return NewCpn
}

定义函数组件返回

// 定义一个高阶组件
// 1.高阶组件会接收一个组件作为参数
function hoc(Cpn) {
  function NewCpn() {
  }
  // 2.并且返回一个新的组件
  return NewCpn
}

高阶组件使用过程

高阶组件的编写和调用过程类似于下面这样:

// 定义一个高阶组件
// 1.高阶组件会接收一个组件作为参数
function hoc(Cpn) {
  class NewCpn extends PureComponent {
    render() {
      return <Cpn/>
    }
  }
  // 2.并且返回一个新的组件
  return NewCpn
}
// 创建一个组件作为参数
class HelloWorld extends PureComponent {
  render() {
    return <h2>Hello World</h2>
  }
}
// 调用高阶组件会返回一个新的组件
const HelloWorldHOC = hoc(HelloWorld)
export class App extends PureComponent {
  render() {
    return (
      <div>
        {/* 返回的新组件展示到App组件中 */}
        <HelloWorldHOC/>
      </div>
    )
  }
}

高阶组件并不是React API的一部分，它是基于React的 组合特性而形成的设计模式;

高阶组件在一些React第三方库中非常常见:

比如redux中的connect;(后续文章会讲到)

比如react-router中的withRouter;(后续文章会讲到)

高阶组件应用场景

应用一: props增强

例如我们可以定义一个高阶组件, 对传入的组件进行props增强, 也就是为传入的组件添加一些参数, 需要注意的是, 如果传入的组件本身也有传递参数的话, 我们在为组件注入要增强的参数的同时, 还需要将本身传递的参数也注入进来, 实例代码如下:

// 定义一个高阶组件, 对传入的组件进行props增强
function enhancedProps(WrapperCpn) {
  class NewComponent extends PureComponent {
    constructor() {
      super()
      this.state = {
        userInfo: {
          name: "chenyq",
          age: 18
        }
      }
    }
    render() {
      // 如果组件本身也有传递参数, 也需要将参数添加进来
      return <WrapperCpn {...this.props} {...this.state.userInfo}/>
    }
  }
  return NewComponent
}
// 调用高阶组件, 对组件进行props增强
const Home = enhancedProps(function(props) {
  return <h2>{props.name}-{props.age}</h2>
})
const About = enhancedProps(function(props) {
  return <h2>{props.name}-{props.age}-{props.names}</h2>
})
export class App extends PureComponent {
  render() {
    return (
      <div>
        {/* 展示增强后的组件 */}
        <Home/>
        {/* 本身也有传递参数 */}
        <About names={["aaa", "bbb", "ccc"]}/>
      </div>
    )
  }
}

也可以利用高阶组件来共享Context

function withTheme(OriginComponment) {
  return (props) => {
    return (
      <ThemeContext.Consumer>
        {
          value => {
            return <OriginComponment {...value} {...props}/>
          }
        }
      </ThemeContext.Consumer>
    )
  }
}

应用二: 渲染判定鉴权

在开发中，我们可能遇到这样的场景:

某些页面是必须用户登录成功才能进行进入;

如果用户没有登录成功，那么直接跳转到登录页面;

这个时候，我们就可以使用高阶组件来完成鉴权操作:

// 定义一个高阶组件, 用于鉴权的操作
function loginAuth(WrapperCpn) {
  return props => {
    // 从本地存储中获取token, token有值表示已登录, 没有值表示未登录
    const token = localStorage.getItem("token")
    if(token) {
      return <WrapperCpn {...props}/>
    } else {
      return <h2>请先登录, 再跳转到对应的页面中</h2>
    }
  }
}
const Cart = loginAuth(function() {
  return <h2>购物车页面</h2>
})
export class App extends PureComponent {
  render() {
    return (
      <div>
        <Cart/>
      </div>
    )
  }
}

高阶组件的意义

我们会发现利用高阶组件可以针对某些React代码进行更加优雅的处理。

其实早期的React有提供组件之间的一种复用方式是mixin，目前已经不再建议使用:

Mixin 可能会相互依赖，相互耦合，不利于代码维护;

不同的Mixin中的方法可能会相互冲突;

Mixin非常多时，组件处理起来会比较麻烦，甚至还要为其做相关处理，这样会给代码造成滚雪球式的复杂性;

当然，HOC也有自己的一些缺陷:

HOC需要在原组件上进行包裹或者嵌套，如果大量使用HOC，将会产生非常多的嵌套，这让调试变得非常困难;

HOC可以劫持props，在不遵守约定的情况下也可能造成冲突;

Hooks的出现，是开创性的，它解决了很多React之前的存在的问题

比如this指向问题、比如hoc的嵌套复杂度问题等等;

后续我还会专门来学习讲解hooks相关的知识;