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

什么是组件

组件是构建用户界面的基本单元，它是一个独立的、可重用的、可组合的代码单元，用于表示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