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
@A
class B extends Component {
  render() {
    return (
      <div>这是组件B</div>
    )
  }
}

export default B

本文由乐趣区整理发布,转载请注明出处,谢谢。

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据