High Order Component(HOC) 高阶组件

最新推荐文章于 2022-08-28 20:41:14 发布

Abudula__

最新推荐文章于 2022-08-28 20:41:14 发布

阅读量627

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/Abudula__/article/details/105024318

版权

本文介绍了React中的高阶组件（HOC），它是一种用于复用组件逻辑的技术。通过实例展示了如何创建一个WithCounter HOC，用于处理点击、悬浮和按键计数，以此说明HOC如何帮助简化代码并实现组件间的逻辑共享。

摘要由CSDN通过智能技术生成

根据reactJs官方文档的定义,HOC如下：
在这里插入图片描述
简要来讲的话，是一种重复利用组件逻辑的技术，接受一个组件，并且返回一个组件。

就上上面的例子一样，会接受WrappedComponent然后返回enhancedComponent.下面举例子来讲解。

1.创建一个按钮组件，并且监听点击次数

import React, { Component, useState, useEffect } from "react";

class ClickCounter extends Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };
    this.incrementCount = this.incrementCount.bind(this);
  }

  incrementCount() {
    this.setState(preveState => {
      return {
        count: preveState.count + 1
      };
    });
  }

  render() {
    let { count } = this.state;
    return (
      <div>
        <button onClick={this.incrementCount}>Clic