React高阶组件HOC一

关于react高阶组件的官方文档
https://reactjs.org/docs/high...。

起因

之前和几个朋友讨论react的过程中，大家都认为对react已经非常熟悉了，忽然聊到react高阶组件问题，都不能清楚说出个所以然来，表面上大家很少用react高阶组件，但实际上react高阶组件在react应用中非常非常重要，并且也时常用到。
如此重要的内容实际上优质资料却很少，今天想就react高阶组件记录下自己的学习理解。

基本概念

需要了解react高阶组件需要先了解高阶函数。

高阶函数：

1、把函数作为参数传递。

setInterval(() => {    //需要做的事情}, 3000)

2、函数可以作为返回值输出。

function test(a) {// 返回一个匿名函数    return function() {        return a    }}

了解高阶函数之后来了解一下高阶组件。

高阶组件：

1、高阶组件就是接受组件作为参数，最终返回一个新组件的函数。
2、需要明白一点的是高阶组件是一个函数而不是一个组件。

高阶组件含义

下面写个小的例子解释下高阶组件，我们设置三个组件分别叫做A.js,B.js和C.js。

A.js为高阶组件，WrappedComponent是接受的普通组件参数，最终export的是一个function,即上面提到的概念：最终返回一个新组件的函数

import React, { Component } from 'react'// WrappedComponent为传入的普通组件export default function A(WrappedComponent) {  return class A extends Component {    render() {      return (        <div className="box">          <div>我是公共组件A的内容</div>          <WrappedComponent />        </div>      )    }  }}

B.js 调用A高阶组件，最终导出是把B传入A函数中形成新的组件。

import React, { Component } from 'react'import A from './A'class B extends Component {  render() {    return (      <div>这是组件B</div>    )  }}export default A(B)

C.js和B.js一个意思

import React, { Component } from 'react'import A from './A'class C extends Component {  render() {    return (      <div>这是组件C</div>    )  }}export default A(C)

然后分别把B.js和C.js写入dom中，最终效果图：

可以看出公共的部分内容，被复用了。

高阶组件装饰器

装饰器写法使得代码看起来更优雅，说到装饰器是不是想起来redux中的@connect。

首先需要配置项目以支持装饰器，需要配置babel：

cnpm install --save-dev @babel/plugin-proposal-decorators

在package.json中配置babel选项：

"babel": {    "plugins": [      ["@babel/plugin-proposal-decorators", { "legacy": true }]    ],    "presets": [      "react-app"    ]  }

下面对B.js进行改造。

import React, { Component } from 'react'import A from './A'//装饰器加入高阶组件A@Aclass B extends Component {  render() {    return (      <div>这是组件B</div>    )  }}export default B