react是不是組件化開發

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

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

本教程操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react是組件化開發嗎

react是組件化開發

1.組件化思想

• 當人們面對復雜問題的處理方式：

• 將復雜的問題進行拆解, 拆分成很多個可以處理的小問題

• 再將其放在整體當中，你會發現大的問題也會迎刃而解

• 其實上面的思想就是分而治之的思想：

• 分而治之是軟件工程的重要思想，是復雜系統開發和維護的基石

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

2.什么是組件化開發呢?

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

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

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

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

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

• 每個組件都用于實現頁面的一個功能塊

3.React的組件化

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

• 組件化提供了一種抽象，讓我們可以開發出一個個獨立可復用的小組件來構造我們的應用

• 任何的應用都會被抽象成一顆組件樹

• 組件化思想的應用:

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

• 這樣讓我們的代碼更加方便組織和管理，并且擴展性也更強

4.React組件分類

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

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

• 根據組件內部是否有狀態需要維護，可以分成：無狀態組件(Stateless Component)和有狀態組件(Stateful Component)

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

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

• 函數組件、無狀態組件、展示型組件主要關注UI的展示

• 類組件、有狀態組件、容器型組件主要關注數據邏輯

React 創建組件

1.類組件

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

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

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

• 類組件必須實現 render 函數

• 使用 class 定義一個組件：

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

• this.state中維護的就是我們組件內部的數據

• render() 方法是 class 組件中唯一必須實現的方法

2.render函數的返回值

當render函數被調用時, 它會檢查 this.props 和 this.state 的變化并返回以下類型之一

• React元素

• 通常通過 JSX 創建

• 例如:<p/> 會被 React 渲染為 DOM節點, \<MyComponent/>會被 React 渲染為自定義組件

• 無論是 <p/> 還是 <MyComponent/> 均為 React 元素

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

• Portals: 可以渲染子節點到不同的 DOM 子樹中

• 字符串或數值類型: 他們在 DOM 中會被渲染為文本節點

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

3.函數組件

函數組件是使用 function 來進行定義的函數, 只是這個函數會返回和類組件中 render 函數一樣的內容

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

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

• 沒有 this (組件實例)

• 沒有內部狀態 (state)

讀到這里，這篇“react是不是組件化開發”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。