React高阶组件

Posted liea

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React高阶组件相关的知识,希望对你有一定的参考价值。

React高阶组件概述

  • 高阶组件是React中一个很重要且比较复杂的概念,高阶组件在很多第三方库(如Redux)中都被经常使用,在项目中用好高阶组件,可以显著提高代码质量。

高阶函数的基本概念

  • 函数可以作为参数被传递
setTimeout(() => {
    console.log('1')
  }, 1000)
  • 函数可以作为返回值输出
   foo = (x) => {
    return function () {
      return x
    }
  }

高阶组件的基本概念

  • 高阶组件就是接受一个组件作为参数并返回一个新组件的函数。
  • 高阶组件是一个函数,并不是组件。

为什么需要高阶组件?

  • 多个组件都需要某个相同功能,使用高阶组件减少重复实现。
  • 重复是优秀系统设计的大敌
  • 高阶组件示例: react-redux 中的connect
export default connect(maoStateToProps, mapDispatchToProps)(Header)

高阶组件的实现

编写高阶组件

使用方法一:

  • 实现一个普通组件
import React from 'react'

export default class Start extends React.Component {
  render () {
    return (
      <div>组件A</div>
    )
  }
}
  • 将普通组件使用函数包裹起来
import React from 'react'

function A (WrappedComponent) {
  return class Start extends React.Component {
    render () {
      return (
        <div>
          <div>这是组件A</div>
          <WrappedComponent />
        </div>
      )
    }
  }
}

export default A
  • 使用高阶组件
import React from 'react'
import a from './A'

class B extends React.Component {
  render () {
    return (
      <div>这是组件B</div>
    )
  }
}

export default a(B)

使用方法二:类装饰器

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

export default B

以上是关于React高阶组件的主要内容,如果未能解决你的问题,请参考以下文章

利用 React 高阶组件实现一个面包屑导航

FragmentContainer 与仅作为包装器的另一个 React 组件?

React 函数高阶组件

React11.高阶组件

React11.高阶组件

react:高阶组件wrappedComponent