组件化开发之如何封装组件-react-Toy模板网

这篇具有很好参考价值的文章主要介绍了组件化开发之如何封装组件-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')); // 局部引用