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

react 高阶函数

时间:2021-04-29 11:53:44      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:开头   需要   增强   一个   实现   通过   --   stat   higher   

HOC(Higher Order Components)就是一个函数,传给它一个组件,它返回一个新的组件。

高阶组件:就相当于手机壳,通过包装组件,增强组件功能。

实现步骤:

  • 首先创建一个函数
  • 指定函数参数,参数应该以大写字母开头
  • 在函数内部创建一个类组件,提供复用的状态逻辑代码并返回
  • 在该组件中,渲染参数组件,同时将状态通过prop传递给参数组件
  • 调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面

使用function完成高阶组件定义

// import React, { Component, Fragment } from ‘react‘;
import React, { Component } from ‘react‘;
// Fragment jsx不会解析为html,但是它能当作 顶级元素  相当于vue中的template
// react提供一种简写 <></>

/* // 高阶组件是一个函数且 参数 是一个首字母要大写的组件
function withCmp(Cmp) {
  // 需要一个类组件且此组件要有返回
  return class HocCmp extends Component {
    // 渲染
    render() {
      // let title = this.props.title+‘----...‘
      return (
        <>
          <h1>头部</h1>
          {
            // 子组件 通过props传给参数组件
          }
          <Cmp {...this.props}></Cmp>
          <h4>底部</h4>
        </>
      )
    }
  }
  // 需要返回,返回是一个组件
  // return HocCmp
}

export default withCmp */

// 高阶组件是一个函数 箭头函数也可以定义一个高阶组件
export default Cmp => {
  // 匿名类
  return class extends Component {
    // 渲染
    render() {
      return (
        <>
          <h1>头部</h1>
          {
            // 子组件 通过props传给参数组件
          }
          <Cmp {...this.props}></Cmp>
          <h4>底部</h4>
        </>
      )
    }
  }
}

App.jsx中使用一个高阶组件

import React, { Component } from ‘react‘
// Home组件增强一些功能,使用此组件就自带头和尾,但是有时候又可没有
// 对于Home组件使用高阶组件进行包裹
import Home from ‘./pages/Home‘


// 导入高阶组件 函数
 import hocCmp from ‘./hoc/withCmp‘

 let Myhome = hocCmp(Home)

export default class App extends Component {
  state = {
    title: ‘我是一个标题‘,
    desc: ‘描述‘
  }

  render() {
    return (
      <div>
        {/* 高阶组件 */}
         <Myhome state={this.state} /> 
      </div>
    )
  }

}

Home文件

import React, { Component } from ‘react‘;
import withCmp from ‘../hoc/withCmp‘
// import fn from ‘../hoc/fn‘
// 它就是一个函数 装饰器(它是类配套) decorator
@withCmp

// 高阶组件传参数
// @fn(‘aaa‘,‘bbb‘)
class Home extends Component {
  render() {
    return (
      <div>
        {this.props.title}
        我是一个组件
        <hr />
        {this.props.children}
      </div>
    );
  }
}


export default Home;

 

react 高阶函数

标签:开头   需要   增强   一个   实现   通过   --   stat   higher   

原文地址:https://www.cnblogs.com/ht955/p/14714757.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!