怎么做一淘宝客网站,西安seo工作室,中国开源网,重庆建设工程信息网信息网组件化开发之如何封装组件-react 什么是组件为什么需要封装组件组件的分类函数组件#xff08;Functional Components#xff09;#xff1a;展示型组件#xff1a;容器型组件#xff1a;知道组件分类的意义是#xff1f; 如何拆分组件#xff0c;需要遵循什么原则1.保证… 组件化开发之如何封装组件-react 什么是组件为什么需要封装组件组件的分类函数组件Functional Components展示型组件容器型组件知道组件分类的意义是 如何拆分组件需要遵循什么原则1.保证单一职责。2.高内聚低耦合High Cohesion, Low Coupling3.无副作用4.单个组件文件最好不超过200或400kb5.避免函数有太多的参数6.合理组件化 如何使用组件参考文章 什么是组件
组件是构建用户界面的基本单元它是一个独立的、可重用的、可组合的代码单元用于表示UI的一部分。 人话当谈论组件时就像在搭积木一样每个组件都是一个独立的、可以重复使用的代码块用来构建网页或应用的各个部分。比如界面的布局像按钮、文本输入框这样的东西。
为什么需要封装组件
封装组件有许多好处这些好处可以帮助提高代码质量、可维护性和开发效率同时也有助于减少错误和重复工作。 降低耦合代码模块化重用性。
组件的分类
函数组件Functional Components
函数组件是一种使用函数定义的组件它接收一个参数通常命名为props并返回一个React元素来描述界面。函数组件通常用于简单的UI部分没有内部状态。【无法处理内部状态或生命周期】在React 16.8之后引入的Hooks使得函数组件也可以具有状态和其他特性。
import React from react;const FunctionalComponent (props) {return (divh1Hello, {props.name}!/h1pThis 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
