码迷,mamicode.com
首页 > 其他好文 > 详细

React高阶组件

时间:2019-11-09 00:29:29      阅读:35      评论:0      收藏:0      [点我收藏+]

标签:实现   基本概念   编写   质量   extend   import   pre   返回值   render   

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高阶组件

标签:实现   基本概念   编写   质量   extend   import   pre   返回值   render   

原文地址:https://www.cnblogs.com/liea/p/11823740.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!