一、專欄介紹?🌍🌍

歡迎加入本專欄！本專欄將引領您快速上手React，讓我們一起放棄放棄的念頭，開始學習之旅吧！我們將從搭建React項目開始，逐步深入講解最核心的hooks，以及React路由、請求、組件封裝以及UI（Ant Design）框架的使用。讓我們一起掌握React，開啟前端開發的全新篇章！

二、什么是自定義組件?🌎🌎

自定義組件是指根據應用需求，自定義的組件。它們可以是有狀態的或無狀態的，可以接受props并返回JSX或null，并且可以包含生命周期方法、refs、context等等。 自定義組件在React應用中非常常見，因為React的核心思想就是組件化。每一個React頁面都是由一個或多個組件構成，組件是構建React應用程序的基石。它們可以封裝可重用的UI組件，使代碼更加模塊化和可維護。 自定義組件可以有很多用途。例如，它們可以創建可重用的UI組件，如按鈕、表單、布局等。同時，它們也可以用于封裝復雜的業務邏輯，將復雜的業務邏輯抽象為可重用的組件，提高代碼的可維護性和可重用性。此外，自定義組件還可以用于實現AOP（面向切面編程），將通用邏輯（如認證、日志）封裝到單獨的組件中，避免在各個角落重復編寫代碼。 總之，自定義組件是React中非常重要的概念，它們可以幫助開發者更好地組織和維護代碼，提高開發效率和質量。

三、組件需求?🌏🌏

根據需求，需要定義一個組件，該組件根據viewMode屬性的不同顯示不同的狀態。當viewMode為edit時，顯示一個標題和輸入框，表示編輯狀態；當viewMode為view時，顯示一個標題和一個內容，表示查看狀態。此外，該組件還需要集成原生的input輸入框，并具有自己的屬性。

四、編寫組件源碼?🔮🔮

新建文件src/components/CustomInput.tsx

自定義組件首字母一定要大寫并且使用駝峰命名方式

InputHTMLAttributes<HTMLInputElement>為input框原生的屬性。

import React, { InputHTMLAttributes } from 'react';
import './CustomInput.scss';const CustomInput: React.FC<InputHTMLAttributes<HTMLInputElement> & {label: string | number; // 這里的意思label屬性可以是一個字符串也可以是一個數字。viewMode?: 'view' | 'edit'; // 這里的意思是view屬性只能是view或者edit字符串}
> = ({ label, viewMode = 'edit', ...props }) => {// view = 'edit' 表示默認值就是editif (viewMode === 'edit') {return (<><div className={'ts-custom-input edit'}><span>{label}：</span><input {...props} /></div></>);}return (<><div className={'ts-custom-input view'}><span className={'title'}>{label}：</span><span className={'content'}>{props.defaultValue}</span></div></>);
};export default CustomInput;

新建文件src/components/CustomInput.scss

.ts-custom-input {width: 100%;height: 26px;line-height: 26px;&.view {.title {color: black;}.content {color: #696767;}}
}

使用組件

import React from 'react';
import CustomInput from './components/CustomInput';function App() {return (<div className="App"><CustomInputlabel="姓名"placeholder="請輸入值"viewMode={'edit'}defaultValue={'我是默認值'}onChange={(e) => {console.log('👉👉👉-----------------輸入值發生了變化，現在是：', e.target.value);}}/><CustomInput label="姓名" viewMode={'view'} defaultValue={'我是默認值'} /></div>);
}export default App;

效果

五、總結?💿💿

React中自定義組件非常重要、很有必要花時間好好的學學。

自定義組件可以將UI切分成一些獨立的、可復用的部件，這樣只需專注于構建每一個單獨的部件，從而在多個項目中重用代碼。這提高了開發效率，降低了維護成本。

組件化開發降低了系統各個功能之間的耦合性，提高了功能內部的聚合性。這使得代碼更容易理解和修改，降低了開發復雜度。

自定義組件遵循一定的命名和規范，使得代碼更加清晰和易于維護。當需要修改或擴展功能時，只需找到對應的組件進行修改，而不需要在整個項目中搜索和修改相關代碼。

自定義組件使得團隊成員可以更容易地分工合作，每人負責一個或多個組件的開發和維護。這提高了團隊的協作效率，降低了溝通成本。

自定義組件可以接受不同的屬性和參數，根據需求進行定制。這使得組件具有很高的靈活性，可以適應各種場景和需求。

自定義組件可以獨立地進行測試和調試，這使得問題定位和修復更加容易。同時，組件的獨立性也使得自動化測試更加容易實現。

總之，React中自定義組件的重要性在于它們提供了代碼重用、降低耦合性、提升可維護性、更好的團隊協作、靈活性和易于測試和調試等好處，從而提高了開發效率和質量。

👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇 👇