當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

React的组件模式

發布時間：2025/3/8 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 React的组件模式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

組件是 React 的核心，因此了解如何利用它們對于創建優秀的設計結構至關重要。

什么是組件

根據 React 官網的介紹，“組件讓你可以將 UI 分割成獨立的、可重用的部分，并獨立管理每個部分?！?/p>

當你第一次安裝 npm install react 時，會得到一件事:組件及其 API。與 JavaScript 函數類似，組件接受名為 “props” 的輸入并返回 React 元素，該元素描述(聲明)用戶界面(UI)的外觀。這就是為什么 React 被稱為聲明性 API，因為你告訴它你希望 UI 是什么樣子的，而 React 負責其余的工作。

可以把聲明式想像成當打的去一個目的地時，只需要告訴司機去哪里，他就會開車把你送到那里。命令式編程正好相反—，你得自己駕車到那里。

組件的 API

當安裝 React 后，便可以使用 React 提供的 API，基本可以分成 5 種。

render
state
props
context
lifecycle events

盡管一個組件可以使用上述所有 API，但一個組件通常用到只有少數幾個 API，而其他組件則只使用其他 API。

可以對組件使用不同的 API 對組件進行劃分，分為 有狀態（stateful） 和 無狀態（stateless） 兩種組件。

有狀態組件通常使用 API: render, state 和生命周期相關事件。
無狀態組件通常使用 API: render, props 和 context。

以上就是我們為佬要介紹 組件模式 的原因。組件模式是使用 React 時的最佳實踐，最初引入組件模式是為了將數據邏輯和 UI 表現層進行分離。通過在組件之間劃分職責，您以創建更多可重用的、內聚的組件，這些組件可用于組合復雜的 UI，這在構建可擴展的應用程序時尤其重要。

組件模式

通常組件模式有以下幾種：

Container （容器組件）
Presentational （展示組件）
Higher order components （高級組件）
Render callback （渲染回調）

Container （容器組件）

“容器組件就是取數據，然后渲染子組件而已” —— Jason Bonta

容器組件是你的數據或邏輯層并利用 stateful API，使用生命周期事件，你可以連接 state 到
redux 或者 Flux 的 storage 中，并將數據和回調作為 props 傳遞給子組件。

在容器組件的 render 方法中，你可以使用 展示組件 來渲染具體的樣式。為了能夠訪問到所有狀態 API，容器組件必須使用 class 的方式聲明，而不是使用函數式方法聲明。

在下面的示例中，我們有一個名為 Greeting 的類組件，它具有狀態，生命周期事件componentDidMount() 和 render 方法。

class Greeting extends React.Component {constructor() {super();this.state = {name: "",};}componentDidMount() {// AJAXthis.setState(() => {return {name: "William",};});}render() {return (<div><h1>Hello! {this.state.name}</h1></div>);} }

此時，該組件是一個有狀態類組件，為了使 Greeting 成為一個容器組件，我們可以將 UI 拆分為一個展示組件，將在下面進行說明。

展示組件

展示組件 使用 props、render 和 context (無狀態API)，并且由于不需要使用生命周期相關 Api，可以使用純函數來簡化表述它們：

const GreetingCard = (props) => {return (<div><h1>Hello! {props.name}</h1></div>) }

展示組件 僅從 props 接收數據和回調，這些數據和回調可以由其容器組件(父組件)提供。

容器組件和展示組件各自將數據/邏輯和展示部分封裝到各自的組件中：

如你所見，已經將 Greeting 組件中展示相關的部分移動到了它自己的函數式展示組件中。當然，這是一個非常簡單的例子——對于更復雜的應用程序，這也是最基本的。

高階組件

高階組件是一種函數，它接受一個組件作為參數，然后返回一個新的組件。

這是一種可以對輸入組件的 props 進行修改（增刪改查）然后返回全新的修改后的組件強大模式，想想 react-router-v4 和 redux 。用了 react-router-v4 后，你可以使用 withRouter() 來繼承以 props 形式傳遞給組件的各種方法。同樣，用了redux，就可以使用 connect({})() 方法來將展示組件和 store 中的數據進行連接。

代碼演示：

import {withRouter} from 'react-router-dom';class App extends React.Component {constructor() {super();this.state = {path: ''}}componentDidMount() {let pathName = this.props.location.pathname;this.setState(() => {return {path: pathName,}})}render() {return (<div><h1>Hi! I'm being rendered at: {this.state.path}</h1></div>)} }export default withRouter(App);

導出組件時，使用用 react-router-v4 的 withRouter()方法封裝它。在組件 App 的生命周期事件 componentDidMount() 方法中，我們使用this.props.location.pathname 提供的值來更新 state。由于我們使用了 withRouter 高階組件，我們可以直接訪問 this.props.locationlocation，而不需要直接將 location 作為 props 直接傳入，非常方便。

渲染回調

與高階組件類似，渲染回調或渲染 props 被用于共享或重用組件邏輯。雖然許多開發人員傾向于使用高階組件的可重用邏輯，但是使用 渲染回調 仍然有一些非常好的理由和優勢——這是在 Michael Jackson 的“永不寫另一個高階組件”中得到了最好的解釋。簡而言之，渲染回調減少了命名空間沖突，并更好的說明了邏輯來源。

class Counter extends React.Component {constructor(props) {super(props);this.state = {count: 0,};}increment = () => {this.setState(prevState => {return {count: prevState.count + 1,};});};render() {return (<div onClick={this.increment}>{this.props.children(this.state)}</div>);} }class App extends React.Component {render() {return (<Counter>{state => (<div><h1>The count is: {state.count}</h1></div>)}</Counter>);} }

在 Counter 類中，在 render 方法中嵌入 this.props.children 并將 this.state 作為參數。在 App 類中，我們可以將我們組件封裝在 Counter 組件中，因此我可以操作 Counter 組件內的邏輯。

Counter 組件的本質是暴露了 children 這個外部屬性，將 children 具體的渲染細節交個 Counter 的使用者，使用的時候只需要將組件傳入到 Counter 的 children 中，當然可以使用其他參數，如果 children 不夠的話。

代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：

https://medium.com/teamsubcha...

你的點贊是我持續分享好東西的動力，歡迎點贊！

一個笨笨的碼農，我的世界只能終身學習！

更多內容請關注公眾號《大遷世界》！

總結

以上是生活随笔為你收集整理的React的组件模式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。