本文小編為大家詳細(xì)介紹“react是不是組件化開發(fā)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“react是不是組件化開發(fā)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

站在用戶的角度思考問題，與客戶深入溝通，找到高平網(wǎng)站設(shè)計與高平網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國際域名空間、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋高平地區(qū)。

react是組件化開發(fā)；組件化是React的核心思想，可以開發(fā)出一個個獨(dú)立可復(fù)用的小組件來構(gòu)造應(yīng)用，任何的應(yīng)用都會被抽象成一顆組件樹，組件化開發(fā)也就是將一個頁面拆分成一個個小的功能模塊，每個功能完成自己這部分獨(dú)立功能。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react是組件化開發(fā)嗎

react是組件化開發(fā)

1.組件化思想

• 當(dāng)人們面對復(fù)雜問題的處理方式：

• 將復(fù)雜的問題進(jìn)行拆解, 拆分成很多個可以處理的小問題

• 再將其放在整體當(dāng)中，你會發(fā)現(xiàn)大的問題也會迎刃而解

• 其實(shí)上面的思想就是分而治之的思想：

• 分而治之是軟件工程的重要思想，是復(fù)雜系統(tǒng)開發(fā)和維護(hù)的基石

• 而前端目前的模塊化和組件化都是基于分而治之的思想

2.什么是組件化開發(fā)呢?

• 組件化也是類似的思想:

• 如果我們將一個頁面中全部邏輯放在一起, 處理起來會變得非常復(fù)雜, 不利于后續(xù)管理及擴(kuò)展

• 但如果我們將一個頁面拆分成一個個小的功能模塊, 每個功能完成自己這部分獨(dú)立功能, 那么整個頁面的管理和維護(hù)變得非常容易

• 我們需要通過組件化的思想來思考整個應(yīng)用程序：

• 我們將一個完整的頁面分成很多個組件

• 每個組件都用于實(shí)現(xiàn)頁面的一個功能塊

3.React的組件化

• 組件化是 React 的核心思想，前面我們封裝的 App 本身就是一個組件

• 組件化提供了一種抽象，讓我們可以開發(fā)出一個個獨(dú)立可復(fù)用的小組件來構(gòu)造我們的應(yīng)用

• 任何的應(yīng)用都會被抽象成一顆組件樹

• 組件化思想的應(yīng)用:

• 盡可能的將頁面拆分成一個個小的、可復(fù)用的組件

• 這樣讓我們的代碼更加方便組織和管理，并且擴(kuò)展性也更強(qiáng)

4.React組件分類

• React的組件相對于 Vue 更加的靈活和多樣，按照不同的方式可以分成很多類組件：

• 根據(jù)組件的定義方式，可以分為：函數(shù)組件(Functional Component)和類組件(Class Component)

• 根據(jù)組件內(nèi)部是否有狀態(tài)需要維護(hù)，可以分成：無狀態(tài)組件(Stateless Component)和有狀態(tài)組件(Stateful Component)

• 根據(jù)組件的不同職責(zé)，可以分成：展示型組件(Presentational Component)和容器型組件(Container Component)

• 這些概念有很多重疊，但是它們最主要是關(guān)注數(shù)據(jù)邏輯和UI展示的分離：

• 函數(shù)組件、無狀態(tài)組件、展示型組件主要關(guān)注UI的展示

• 類組件、有狀態(tài)組件、容器型組件主要關(guān)注數(shù)據(jù)邏輯

React 創(chuàng)建組件

1.類組件

• 類組件的定義由如下要求:

• 組件的名稱是大寫字符開頭 (無論類組件還是函數(shù)組件)

• 類組件需要繼承自: React.Component

• 類組件必須實(shí)現(xiàn) render 函數(shù)

• 使用 class 定義一個組件：

• constructor是可選的，我們通常在 constructor 中初始化一些數(shù)據(jù)

• this.state中維護(hù)的就是我們組件內(nèi)部的數(shù)據(jù)

• render() 方法是 class 組件中唯一必須實(shí)現(xiàn)的方法

2.render函數(shù)的返回值

當(dāng)render函數(shù)被調(diào)用時, 它會檢查 this.props 和 this.state 的變化并返回以下類型之一

• React元素

• 通常通過 JSX 創(chuàng)建

• 例如:

  會被 React 渲染為 DOM節(jié)點(diǎn), \會被 React 渲染為自定義組件

• 無論是

  還是 均為 React 元素

• 數(shù)組或 fragments: 使得 render 方法可以返回多個元素

• Portals: 可以渲染子節(jié)點(diǎn)到不同的 DOM 子樹中

• 字符串或數(shù)值類型: 他們在 DOM 中會被渲染為文本節(jié)點(diǎn)

• 布爾類型或null: 什么都不渲染

3.函數(shù)組件

函數(shù)組件是使用 function 來進(jìn)行定義的函數(shù), 只是這個函數(shù)會返回和類組件中 render 函數(shù)一樣的內(nèi)容

• 函數(shù)組件的特點(diǎn) (后面會講hooks, 就不一樣了)

• 沒有生命周期, 也會被更新并掛載, 但是沒有生命周期函數(shù)

• 沒有 this (組件實(shí)例)

• 沒有內(nèi)部狀態(tài) (state)

讀到這里，這篇“react是不是組件化開發(fā)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。