什么是組件

組件是構(gòu)建用戶界面的基本單元，它是一個(gè)獨(dú)立的、可重用的、可組合的代碼單元，用于表示UI的一部分。
人話：當(dāng)談?wù)摻M件時(shí)，就像在搭積木一樣，每個(gè)組件都是一個(gè)獨(dú)立的、可以重復(fù)使用的代碼塊，用來(lái)構(gòu)建網(wǎng)頁(yè)或應(yīng)用的各個(gè)部分。比如界面的布局，像按鈕、文本輸入框這樣的東西。

為什么需要封裝組件

封裝組件有許多好處，這些好處可以幫助提高代碼質(zhì)量、可維護(hù)性和開(kāi)發(fā)效率，同時(shí)也有助于減少錯(cuò)誤和重復(fù)工作。
降低耦合，代碼模塊化，重用性。

組件的分類

函數(shù)組件（Functional Components）：

函數(shù)組件是一種使用函數(shù)定義的組件，它接收一個(gè)參數(shù)（通常命名為props），并返回一個(gè)React元素來(lái)描述界面。函數(shù)組件通常用于簡(jiǎn)單的UI部分，沒(méi)有內(nèi)部狀態(tài)?！緹o(wú)法處理內(nèi)部狀態(tài)或生命周期】在React 16.8之后引入的Hooks使得函數(shù)組件也可以具有狀態(tài)和其他特性。

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;

展示型組件：

展示型組件主要負(fù)責(zé)呈現(xiàn)UI，它們接收數(shù)據(jù)（通常通過(guò)props）并根據(jù)這些數(shù)據(jù)渲染界面。展示型組件通常不涉及狀態(tài)管理或業(yè)務(wù)邏輯，而是專注于外觀和展示。

容器型組件：

容器型組件負(fù)責(zé)管理數(shù)據(jù)邏輯和狀態(tài)，它們可以包含業(yè)務(wù)邏輯、狀態(tài)管理、數(shù)據(jù)獲取等。容器型組件通常通過(guò)props將數(shù)據(jù)傳遞給展示型組件，以便展示型組件渲染界面。

知道組件分類的意義是？

單一職責(zé)原則： 組件分類可以幫助你將不同的功能和職責(zé)分離。這有助于確保每個(gè)組件只關(guān)注自己特定的任務(wù)，遵循單一職責(zé)原則，使代碼更模塊化。

代碼模塊化： 分類使你可以將相關(guān)的代碼塊組織在一起，使其更容易理解和維護(hù)。模塊化的代碼更易于重用和測(cè)試。

可維護(hù)性： 分類可以使維護(hù)更加簡(jiǎn)單。當(dāng)你需要修改某個(gè)特定功能或邏輯時(shí)，你只需要關(guān)注相應(yīng)的組件，而不會(huì)影響其他部分。

提高可讀性： 封裝和分類可以使代碼更具可讀性。通過(guò)查看組件的名稱和分類，其他開(kāi)發(fā)人員可以更快地理解組件的用途和功能。

提高開(kāi)發(fā)效率： 封裝的組件可以在不同項(xiàng)目中重復(fù)使用，從而提高開(kāi)發(fā)效率。你只需要編寫一次代碼，就可以在多個(gè)地方使用。

降低耦合度： 通過(guò)將不同的功能和邏輯分開(kāi)，可以降低組件之間的耦合度。這使得修改一個(gè)組件時(shí)不會(huì)影響到其他組件。

增強(qiáng)團(tuán)隊(duì)協(xié)作： 組件分類可以幫助團(tuán)隊(duì)成員更好地了解代碼結(jié)構(gòu)，使團(tuán)隊(duì)協(xié)作更加容易和無(wú)縫。

如何拆分組件，需要遵循什么原則

1.保證單一職責(zé)。

假設(shè)你有一個(gè)名為 UserManager 的類，它既負(fù)責(zé)用戶的創(chuàng)建，又負(fù)責(zé)用戶的驗(yàn)證。這就違反了單一職責(zé)原則，因?yàn)閯?chuàng)建和驗(yàn)證是兩個(gè)不同的功能，它們可能會(huì)因不同的原因而發(fā)生變化。

2.高內(nèi)聚低耦合（High Cohesion, Low Coupling）

組件內(nèi)部的元素應(yīng)該緊密關(guān)聯(lián)，組件之間的依賴應(yīng)盡量降低。這可以通過(guò)將相關(guān)功能放在同一個(gè)組件中來(lái)實(shí)現(xiàn)，從而減少組件之間的耦合。

3.無(wú)副作用

不依賴、不修改外部變量，內(nèi)部操作不影響其它組件。所以組件化的時(shí)候最好不要將獲取數(shù)據(jù)部分放在組件中

補(bǔ)充什么是副作用：
“副作用”（Side Effect）是指函數(shù)或操作對(duì)函數(shù)外部環(huán)境產(chǎn)生的影響，超出了函數(shù)返回值之外的變化。這些影響可以是修改全局變量、修改函數(shù)參數(shù)、寫入文件、修改數(shù)據(jù)庫(kù)等。副作用可以是預(yù)期的，例如在進(jìn)行I/O操作時(shí)，也可以是意外的，例如未經(jīng)計(jì)劃的修改全局狀態(tài)。

以下是一些常見(jiàn)的副作用示例：

修改全局變量： 函數(shù)修改全局變量會(huì)導(dǎo)致函數(shù)外部的狀態(tài)發(fā)生變化。
修改傳入的參數(shù)： 如果函數(shù)修改傳入的參數(shù)，可能會(huì)影響調(diào)用者的數(shù)據(jù)。
文件操作： 讀寫文件會(huì)影響文件系統(tǒng)的狀態(tài)。
網(wǎng)絡(luò)請(qǐng)求： 發(fā)起網(wǎng)絡(luò)請(qǐng)求會(huì)影響網(wǎng)絡(luò)狀態(tài)。
數(shù)據(jù)庫(kù)操作： 修改數(shù)據(jù)庫(kù)會(huì)影響數(shù)據(jù)存儲(chǔ)狀態(tài)。

4.單個(gè)組件文件最好不超過(guò)200或400kb

追求短小精悍，有利于調(diào)試，縮小排錯(cuò)范圍

5.避免函數(shù)有太多的參數(shù)

入口處檢查參數(shù)的有效性，出口處檢查返回的正確性
避免別人使用組件時(shí)傳參有誤，造成很多無(wú)法預(yù)料的報(bào)錯(cuò)。

6.合理組件化

將大塊代碼變成松散耦合且可復(fù)用的組件確實(shí)是有很多優(yōu)點(diǎn)，但是并不是所有的頁(yè)面結(jié)構(gòu)都需要被抽離成組件，也不是所有的邏輯部分都需要被抽出到組件外部。我們?cè)趯?shí)際進(jìn)行組件抽離工作的時(shí)候，需要考慮到不要過(guò)度的組件化。那么我們?cè)跊Q定是否要抽離組件的時(shí)候可以根據(jù)以下幾點(diǎn)來(lái)判斷：
a.是否有足夠的頁(yè)面結(jié)構(gòu)/邏輯來(lái)保證它？如果它只是幾行代碼，那么最終可能會(huì)創(chuàng)建更多的代碼來(lái)分隔它。
b.代碼重復(fù)（或可能重復(fù)）? 如果某些東西只使用一次，并且服務(wù)于一個(gè)不太可能在其他地方使用的特定用例，那么將它嵌入其中可能會(huì)更好。
c.性能是否會(huì)受到影響？更改 state/props 會(huì)導(dǎo)致組件重新渲染，當(dāng)發(fā)生這種情況時(shí)，你需要的是 只是重新去渲染經(jīng)過(guò) diff 之后得到的相關(guān)元素節(jié)點(diǎn)。在較大的、關(guān)聯(lián)很緊密的組件中，你可能會(huì)發(fā)現(xiàn)狀態(tài)更改會(huì)導(dǎo)致在不需要它的許多地方重新呈現(xiàn)，這時(shí)應(yīng)用的性能就可能會(huì)開(kāi)始受到影響

如何使用組件？

在 React 中，通常不建議使用全局引用組件，而是推薦使用模塊化的方式來(lái)引入和使用組件。模塊化可以有效地隔離組件的作用域，避免命名沖突和其他問(wèn)題。以下是如何使用模塊化引入組件的示例：

// 模塊 B 導(dǎo)入模塊 A 中的變量和函數(shù)
import { globalVariableA, greet } from './moduleA';

console.log(globalVariableA); // 局部引用
console.log(greet('Alice')); // 局部引用

參考文章

https://juejin.cn/post/6952777507162554382#heading-14
chatgpt文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-675455.html

到了這里，關(guān)于組件化開(kāi)發(fā)之如何封裝組件-react的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！