React高阶组件

Posted 2020-11-30 liea

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