当前位置: 首页 > news >正文

组件化开发之如何封装组件-react

组件化开发之如何封装组件-react

  • 什么是组件
  • 为什么需要封装组件
  • 组件的分类
    • 函数组件(Functional Components):
    • 展示型组件:
    • 容器型组件:
    • 知道组件分类的意义是?
  • 如何拆分组件,需要遵循什么原则
    • 1.保证单一职责。
    • 2.高内聚低耦合(High Cohesion, Low Coupling)
    • 3.无副作用
    • 4.单个组件文件最好不超过200或400kb
    • 5.避免函数有太多的参数
    • 6.合理组件化
  • 如何使用组件?
    • 参考文章

什么是组件

组件是构建用户界面的基本单元,它是一个独立的、可重用的、可组合的代码单元,用于表示UI的一部分。
人话:当谈论组件时,就像在搭积木一样,每个组件都是一个独立的、可以重复使用的代码块,用来构建网页或应用的各个部分。比如界面的布局,像按钮、文本输入框这样的东西。

为什么需要封装组件

封装组件有许多好处,这些好处可以帮助提高代码质量、可维护性和开发效率,同时也有助于减少错误和重复工作。
降低耦合,代码模块化,重用性。

组件的分类

函数组件(Functional Components):

函数组件是一种使用函数定义的组件,它接收一个参数(通常命名为props),并返回一个React元素来描述界面。函数组件通常用于简单的UI部分,没有内部状态。【无法处理内部状态或生命周期】在React 16.8之后引入的Hooks使得函数组件也可以具有状态和其他特性。

import React from 'react';const FunctionalComponent = (props) => {return (<div><h1>Hello, {props.name}!</h1><p>This is a functional component.</p></div>);
};export default FunctionalComponent;

展示型组件:

展示型组件主要负责呈现UI,它们接收数据(通常通过props)并根据这些数据渲染界面。展示型组件通常不涉及状态管理或业务逻辑,而是专注于外观和展示。

容器型组件:

容器型组件负责管理数据逻辑和状态,它们可以包含业务逻辑、状态管理、数据获取等。容器型组件通常通过props将数据传递给展示型组件,以便展示型组件渲染界面。

知道组件分类的意义是?

单一职责原则: 组件分类可以帮助你将不同的功能和职责分离。这有助于确保每个组件只关注自己特定的任务,遵循单一职责原则,使代码更模块化。

代码模块化: 分类使你可以将相关的代码块组织在一起,使其更容易理解和维护。模块化的代码更易于重用和测试。

可维护性: 分类可以使维护更加简单。当你需要修改某个特定功能或逻辑时,你只需要关注相应的组件,而不会影响其他部分。

提高可读性: 封装和分类可以使代码更具可读性。通过查看组件的名称和分类,其他开发人员可以更快地理解组件的用途和功能。

提高开发效率: 封装的组件可以在不同项目中重复使用,从而提高开发效率。你只需要编写一次代码,就可以在多个地方使用。

降低耦合度: 通过将不同的功能和逻辑分开,可以降低组件之间的耦合度。这使得修改一个组件时不会影响到其他组件。

增强团队协作: 组件分类可以帮助团队成员更好地了解代码结构,使团队协作更加容易和无缝。

如何拆分组件,需要遵循什么原则

1.保证单一职责。

假设你有一个名为 UserManager 的类,它既负责用户的创建,又负责用户的验证。这就违反了单一职责原则,因为创建和验证是两个不同的功能,它们可能会因不同的原因而发生变化。

2.高内聚低耦合(High Cohesion, Low Coupling)

组件内部的元素应该紧密关联,组件之间的依赖应尽量降低。这可以通过将相关功能放在同一个组件中来实现,从而减少组件之间的耦合。

3.无副作用

不依赖、不修改外部变量,内部操作不影响其它组件。所以组件化的时候最好不要将获取数据部分放在组件中

补充什么是副作用:
“副作用”(Side Effect)是指函数或操作对函数外部环境产生的影响,超出了函数返回值之外的变化。这些影响可以是修改全局变量、修改函数参数、写入文件、修改数据库等。副作用可以是预期的,例如在进行I/O操作时,也可以是意外的,例如未经计划的修改全局状态。

以下是一些常见的副作用示例:

修改全局变量: 函数修改全局变量会导致函数外部的状态发生变化。
修改传入的参数: 如果函数修改传入的参数,可能会影响调用者的数据。
文件操作: 读写文件会影响文件系统的状态。
网络请求: 发起网络请求会影响网络状态。
数据库操作: 修改数据库会影响数据存储状态。

4.单个组件文件最好不超过200或400kb

追求短小精悍,有利于调试,缩小排错范围

5.避免函数有太多的参数

入口处检查参数的有效性,出口处检查返回的正确性
避免别人使用组件时传参有误,造成很多无法预料的报错。

6.合理组件化

将大块代码变成松散耦合且可复用的组件确实是有很多优点,但是并不是所有的页面结构都需要被抽离成组件,也不是所有的逻辑部分都需要被抽出到组件外部。我们在实际进行组件抽离工作的时候,需要考虑到不要过度的组件化。那么我们在决定是否要抽离组件的时候可以根据以下几点来判断:
a.是否有足够的页面结构/逻辑来保证它?如果它只是几行代码,那么最终可能会创建更多的代码来分隔它。
b.代码重复(或可能重复)? 如果某些东西只使用一次,并且服务于一个不太可能在其他地方使用的特定用例,那么将它嵌入其中可能会更好。
c.性能是否会受到影响?更改 state/props 会导致组件重新渲染,当发生这种情况时,你需要的是 只是重新去渲染经过 diff 之后得到的相关元素节点。在较大的、关联很紧密的组件中,你可能会发现状态更改会导致在不需要它的许多地方重新呈现,这时应用的性能就可能会开始受到影响

如何使用组件?

在 React 中,通常不建议使用全局引用组件,而是推荐使用模块化的方式来引入和使用组件。模块化可以有效地隔离组件的作用域,避免命名冲突和其他问题。以下是如何使用模块化引入组件的示例:

// 模块 B 导入模块 A 中的变量和函数
import { globalVariableA, greet } from './moduleA';console.log(globalVariableA); // 局部引用
console.log(greet('Alice')); // 局部引用

参考文章

https://juejin.cn/post/6952777507162554382#heading-14
chatgpt

相关文章:

组件化开发之如何封装组件-react

组件化开发之如何封装组件-react 什么是组件为什么需要封装组件组件的分类函数组件&#xff08;Functional Components&#xff09;&#xff1a;展示型组件&#xff1a;容器型组件&#xff1a;知道组件分类的意义是&#xff1f; 如何拆分组件&#xff0c;需要遵循什么原则1.保证…...

大数据HBase学习圣经:一本书实现HBase学习自由

学习目标&#xff1a;三栖合一架构师 本文是《大数据HBase学习圣经》 V1版本&#xff0c;是 《尼恩 大数据 面试宝典》姊妹篇。 这里特别说明一下&#xff1a;《尼恩 大数据 面试宝典》5个专题 PDF 自首次发布以来&#xff0c; 已经汇集了 好几百题&#xff0c;大量的大厂面试…...

Leetcode110. 平衡二叉树

力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。 本题中&#xff0c;一棵高度平衡二叉树定义为&#xff1a; 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1 。 题解&#xff…...

Swift的NSClassFromString转换

在swift 中使用NSClassFromString 从string 转换到 对象&#xff0c;报了Segmentation fault: 11 错误。 let ctrlClass: AnyClass NSClassFromString("HomeViewController")! let ctrl: UIViewController ctrlClass.init() as UIViewController 正确的写法&…...

linux上vim编辑器设置

linux上vim编辑器设置 减少tab缩进、显示行号等 在vimrc&#xff08;一般在/etc/vim/vimrc中&#xff09;末尾添加 set helplangcn "中文帮助文档(前提是下了中文包) syntax enable syntax on " 自动语法高亮 set number"显示行号 colorscheme desert" 设…...

SpringCloudAlibaba OpenFeign整合及详解

SpringCloudAlibaba OpenFeign 在前面&#xff0c;我们使用Nacos服务注册发现后&#xff0c;服务远程调用可以使用RestTemplateRibbon或者OpenFeign调用。实际开发中很少使用RestTemplate这种方式进行调用服务&#xff0c;每次调用需要填写地址&#xff0c;还要配置各种的参数&…...

Mysql--技术文档--MVCC(Multi-Version Concurrency Control | 多版本并发控制)

MVCC到底是什么 MVCC&#xff08;Multi-Version Concurrency Control&#xff09;是一种并发控制机制&#xff0c;用于解决并发访问数据库时的数据一致性和隔离性问题。MVCC允许多个事务同时读取数据库的同一数据&#xff0c;而不会相互干扰或导致冲突。 在传统的并发控制机制中…...

全网都在用的nnUNet V2版本改进了啥,怎么安装?(一)

nnUNet&#xff0c;这个医学领域的分割巨无霸!在论文和比赛中随处可见他的身影。大家对于nnUNet v1版本的教程都赞不绝口&#xff0c;因为它简单易懂、详细全面&#xff0c;让很多朋友都轻松掌握了使用方法。 最近&#xff0c;我也抽出时间仔细研究了nnUNet v2&#xff0c;并全…...

iOS开发Swift-4-IBAction,group,音乐播放器-木琴App

1.使用素材创建木琴App的UI。 2.连接IBAction。 其余按钮直接拖拽到play里边。 当鼠标置于1处时2处显示如图&#xff0c;表示成功。当用户按下任一按钮都会触发play中的内容。 3.将7个按钮的View中的Tag值分别调为1、2、3、4、5、6、7. 4.将音频文件拖入项目文件中。 Create gr…...

【linux】pid 文件的作用ing

文章目录 一. pid文件简介1. pid 文件是什么2. 作用 二. pid文件的使用 一. pid文件简介 1. pid 文件是什么 打开系统(Linux) 的 “/var/run/” 目录可以看到有很多已 “.pid” 为结尾的文件&#xff0c;只有一行&#xff0c;它记录的是相应进程的 pid&#xff0c;即进程号。…...

K8s简介之什么是K8s

目录 1.概述 2.什么是容器引擎&#xff1f; 3.什么是容器 4.什么是容器编排&#xff1f; 5.容器编排工具 6.到底什么是K8s? 7.为什么市场推荐K8s 8.K8s架构 9.K8s组件 Pods API 服务器 调度器 控制器管理器 Etcd 节点 Kubelet Kube代理 Kubectl 1.概述 Kub…...

说说Flink双流join

分析&回答 Flink双流JOIN主要分为两大类 一类是基于原生State的Connect算子操作另一类是基于窗口的JOIN操作。其中基于窗口的JOIN可细分为window join和interval join两种。 基于原生State的Connect算子操作 实现原理&#xff1a;底层原理依赖Flink的State状态存储&…...

I2C与I3C的对比

I2C与I3C的对比 电气特性 I2C 1.半双工 2.串行数据线(SDA)和串行时钟线(SCL) 3.数据线漏极开路&#xff0c;即I2C接口接上拉电阻 4.I2C总线运行速度&#xff1a;**标准模式100kbit/s&#xff0c;快速模式400kbit/s&#xff0c;快速模式plus 1Mbit/s&#xff0c;**高速模式…...

睿趣科技:抖音开小店大概多久可以做起来

随着移动互联网的快速发展&#xff0c;社交媒体平台成为了人们分享生活、交流信息的主要渠道之一。在众多社交平台中&#xff0c;抖音以其独特的短视频形式和强大的用户粘性受到了广泛关注。近年来&#xff0c;越来越多的人通过在抖音上开设小店来实现创业梦想&#xff0c;这种…...

CCF-CSP 26次 第三题【角色授权】

计算机软件能力认证考试系统 20分&#xff1a; #include<bits/stdc.h> using namespace std; const int N440; int n,m,q,nv,no,nn,ns,ng; struct Node {string name;map<string,int>op;map<string,int>res_kind;map<string,int>res_name; }role[N];…...

Ansible学习笔记11

Command和Shell模块&#xff1a; 两个模块都是用于执行Linux命令的&#xff0c;这个对于命令熟悉的工程师来说&#xff0c;用起来非常high。 Shell模块跟Command模块差不多&#xff08;Command模块不能执行一类$HOME、> 、<、| 等符号&#xff0c;但是Shell是可以的。&…...

Vue中如何为Echarts统计图设置数据

在前端界面接收后端数据后&#xff0c;将数据赋值给ECharts中的data时出现了&#xff0c;数据读取失败的问题&#xff08;可能是由于数据渲染的前后顺序问题&#xff09;。后通过如下方式进行了解决&#xff1a; 1、接下来将介绍UserController中的countUsers方法&#xff0c;…...

力扣141. 环形链表

141. 环形链表 简单 2K 相关企业 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整数 pos 来表示链…...

4.1 链式栈StackT

C关键词&#xff1a;内部类/模板类/头插 C自学精简教程 目录(必读) C数据结构与算法实现&#xff08;目录&#xff09; 栈的内存结构 空栈&#xff1a; 有一个元素的栈&#xff1a; 多个元素的栈&#xff1a; 成员函数说明 0 clear 清空栈 clear 函数负责将栈的对内存释放…...

算法练习(10):牛客在线编程10 贪心算法

package jz.bm;import java.util.ArrayList; import java.util.Arrays;public class bm10 {/*** BM95 分糖果问题*/public int candy (int[] arr) {int res 0;int n arr.length;int[] nums new int[n];//每个人都分配一个糖果for (int i 0; i < n; i) {nums[i] 1;}//从…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...

高考志愿填报管理系统---开发介绍

高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发&#xff0c;采用现代化的Web技术&#xff0c;为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## &#x1f4cb; 系统概述 ### &#x1f3af; 系统定…...

Java数组Arrays操作全攻略

Arrays类的概述 Java中的Arrays类位于java.util包中&#xff0c;提供了一系列静态方法用于操作数组&#xff08;如排序、搜索、填充、比较等&#xff09;。这些方法适用于基本类型数组和对象数组。 常用成员方法及代码示例 排序&#xff08;sort&#xff09; 对数组进行升序…...

React核心概念:State是什么?如何用useState管理组件自己的数据?

系列回顾&#xff1a; 在上一篇《React入门第一步》中&#xff0c;我们已经成功创建并运行了第一个React项目。我们学会了用Vite初始化项目&#xff0c;并修改了App.jsx组件&#xff0c;让页面显示出我们想要的文字。但是&#xff0c;那个页面是“死”的&#xff0c;它只是静态…...

SpringCloud优势

目录 完善的微服务支持 高可用性和容错性 灵活的配置管理 强大的服务网关 分布式追踪能力 丰富的社区生态 易于与其他技术栈集成 完善的微服务支持 Spring Cloud 提供了一整套工具和组件来支持微服务架构的开发,包括服务注册与发现、负载均衡、断路器、配置管理等功能…...