React Hooks相对高阶组件和Class组件有什么优势/缺点

偏执的太偏执、 2023-02-17 05:03 14阅读 0赞

> 文章开始前需要事先跟朋友声明下，此篇文章仅仅是笔者自己的分析与感想，非官方说明。如有不当之处，欢迎指出。

### 文章目录 ###

*  React Hooks相对高阶组件和Class组件有什么优势/缺点？
 *   *  一、Hooks组件相比于Class组件
     *  二、Hooks组件相比于高阶组件
     *   *  举一个极端的例子：
         *   *   *  某个组件从3个以上的高阶组件去复用逻辑。
                 *  我们来看一下Hooks组件：

# React Hooks相对高阶组件和Class组件有什么优势/缺点？ #

## 一、Hooks组件相比于Class组件 ##

首先我认为hooks组件其实是降低了react开发的使用难度的，让新手可以在不使用class组件的情况下依然可以进行项目开发。

> 可能会有朋友感到疑惑，为什么不使用class组件会降低项目的开发难度。  
> 笔者略举几个例子：  
> 1.不需要学习class组件的生命周期的使用了。【仅做个了解即可】  
> 2.如果你的js基础不是很扎实的话，就帮你暂时省去this的指向问题的学习了。  
> 3.可以不用使用高阶组件依然可以进行功能复用了。  
> 4.如果开发团队的代码质量很高的话，那么维护起来比class组件简单N倍。  
> 5.只需要学好hooks组件的hooks【感觉有点别扭，但不是错误哈】那么你的项目性能就已经是很优的状态了。

学习class组件的生命周期的话还是需要一些时间的，尤其是想要真正用到实战项目中去发挥它们每个周期的作用的话。

## 二、Hooks组件相比于高阶组件 ##

Hooks组件复用逻辑相比高阶组件复用逻辑更易维护，可以很清楚的知道当前的逻辑代码在哪里，然后进行维护。

### 举一个极端的例子： ###

##### 某个组件从3个以上的高阶组件去复用逻辑。 #####

那么它的代码可能看起来是这样：

this.props.xxx();
    this.props.aaa();
    this.props.bbb();

如果xxx出现了问题，如果对项目不熟悉的人的话想要找这个方法就要分别去这三个高阶组件里面去找，或者去父组件里面去找。

可维护性差！

##### 我们来看一下Hooks组件： #####

const {  xxx } = useXXX();
    const {  aaa } = useAAA();
    const {  bbb } = useBBB();

当我们发现那个有问题的时候哪里有问题点哪里即可，很轻松的就能找到代码。  
so easy~

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 React选择函数组件还是class组件

在 React 中，你可以使用两种不同类型的组件：函数组件和类组件。每种组件类型都有其优势和适用场景，你可以根据项目需求和个人偏好进行选择。函数组件：函数组件是 Rea

向右看齐/ 2024年03月23日 22:34/ 0 赞/ 106 阅读

相关 React-高阶组件

高阶组件是 React 中复用组件逻辑的一种技巧，高阶组件是一个函数，接收需要包装的组件，返回值为增强后的组件。实现思路：高阶组件内部创建一个类组件，在这个类组件中去提

骑猪看日落/ 2023年07月06日 11:37/ 0 赞/ 29 阅读

相关 React函数组件和class组件以及Hooks

React函数组件和class组件以及Hooks 作者烦恼会解决烦恼我们都知道定义组件有两个要求： 1. 组件名称必须以大写字母开头 2. 组件的返回

爱被打了一巴掌/ 2023年07月03日 08:08/ 0 赞/ 56 阅读

相关 React Hooks相对高阶组件和Class组件有什么优势/缺点

> 文章开始前需要事先跟朋友声明下，此篇文章仅仅是笔者自己的分析与感想，非官方说明。如有不当之处，欢迎指出。文章目录 React Hooks相对高阶组件和Cla

偏执的太偏执、/ 2023年02月17日 05:03/ 0 赞/ 15 阅读

相关 react hook 组件默认值

import { useState, useRef, SyntheticEvent } from 'react'; / 表单受控组件中，输入输出的

比眉伴天荒/ 2022年11月05日 04:28/ 0 赞/ 215 阅读

相关 React高阶组件

高阶组件（HOC）是React里的高级技术为了应对重用组件的逻辑，HOC本质上不是React API的一部分。他是从React的组合性质中显露出来的模式具体来说，一个高阶

Dear 丶/ 2022年10月13日 12:33/ 0 赞/ 229 阅读

相关 react 高阶组件

高阶函数基本概念 1.函数可以作为参数被传递 setTimeout(()=>{ console.log(0) },1000) 2.函数可

缺乏、安全感/ 2022年03月26日 12:22/ 0 赞/ 286 阅读

相关 React教程：组件，Hooks和性能

> 翻译：疯狂的技术宅 > 原文：[https://www.toptal.com/react/react-tutorial-pt2][https_www.toptal.co

小灰灰/ 2022年03月16日 19:38/ 0 赞/ 230 阅读

相关 React 高阶组件

定义高阶组件（High Order Component, HOC）输入：React 组件 => 输出：React 组件使用场景高阶组件的作用主要是用来加强

雨点打透心脏的1/2处/ 2021年09月18日 10:02/ 0 赞/ 505 阅读

相关 react 高阶组件

高阶组件必须是一个函数,且必须返回一个组件，参数也必须接收一个组件作用:能对传入的组件进行一些限定操作,可以使用生命周期等 ![在这里插入图片描述

你的名字/ 2021年07月24日 17:11/ 0 赞/ 506 阅读