深入理解react 組件類型及使用場景
函數(shù)組件 vs 類組件
函數(shù)組件(Functional Component )和類組件(Class Component),劃分依據(jù)是根據(jù)組件的定義方式。函數(shù)組件使用函數(shù)定義組件,類組件使用ES6 class定義組件
// 函數(shù)組件 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } // 類組件 class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
- 函數(shù)組件的寫法要比類組件簡潔,不過類組件比函數(shù)組件功能更加強(qiáng)大。函數(shù)組件更加專注和單一,承擔(dān)的職責(zé)也更加清晰,它只是一個(gè)返回React 元素的函數(shù),只關(guān)注對應(yīng)UI的展現(xiàn)。函數(shù)組件接收外部傳入的props,返回對應(yīng)UI的DOM描述,
- 類組件可以維護(hù)自身的狀態(tài)變量,即組件的state,類組件還有不同的生命周期方法,可以讓開發(fā)者能夠在組件的不同階段(掛載、更新、卸載),對組件做更多的控制。
無狀態(tài)組件 vs 有狀態(tài)組件
函數(shù)組件一定屬于無狀態(tài)組件 (劃分依據(jù)是根據(jù)組件內(nèi)部是否維護(hù)state)
// 無狀態(tài)組件 class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } // 有狀態(tài)類組件 class Welcome extends React.Component { constructor(props) { super(props); this.state = { show: true } } render() { const { show } = this.state; return ( <> { show && <h1>Hello, {this.props.name}</h1> } </> ) } }
展示型組件 vs 容器型組件
展示型組件(Presentational Component)和容器型組件(Container Component),劃分依據(jù)是根據(jù)組件的職責(zé)。 (展示型組件一般是無狀態(tài)組件,不需要state)
class UserListContainer extends React.Component{ constructor(props){ super(props); this.state = { users: [] } } componentDidMount() { var that = this; fetch('/path/to/user-api').then(function(response) { response.json().then(function(data) { that.setState({users: data}) }); }); } render() { return ( <UserList users={this.state.users} /> ) } } function UserList(props) { return ( <div> <ul className="user-list"> {props.users.map(function(user) { return ( <li key={user.id}> <span>{user.name}</span> </li> ); })} </ul> </div> ) }
展示型組件和容器型組件是可以互相嵌套的,展示型組件的子組件既可以包含展示型組件,也可以包含容器型組件,容器型組件也是如此。例如,當(dāng)一個(gè)容器型組件承擔(dān)的數(shù)據(jù)管理工作過于復(fù)雜時(shí),可以在它的子組件中定義新的容器型組件,由新組件分擔(dān)數(shù)據(jù)的管理。展示型組件和容器型組件的劃分完全取決于組件所做的事情。
總結(jié)
通過上面的介紹,可以發(fā)現(xiàn)這三組概念有很多重疊部分。這三組概念都體現(xiàn)了關(guān)注點(diǎn)分離的思想:UI展現(xiàn)和數(shù)據(jù)邏輯的分離。函數(shù)組件、無狀態(tài)組件和展示型組件主要關(guān)注UI展現(xiàn),類組件、有狀態(tài)組件和容器型組件主要關(guān)注數(shù)據(jù)邏輯。但由于它們的劃分依據(jù)不同,它們并非完全等價(jià)的概念。它們之間的關(guān)聯(lián)關(guān)系可以歸納為:函數(shù)組件一定是無狀態(tài)組件,展示型組件一般是無狀態(tài)組件;類組件既可以是有狀態(tài)組件,又可以是無狀態(tài)組件,容器型組件一般是有狀態(tài)組件。
舉個(gè)🌰
import React, { Component } from 'react' import { observer } from 'mobx-react' import { Switch } from 'antd' @observer class BaseInfoView extends Component { constructor(props) { super(props) } render() { const { ideaName, resourceLocationDto, switchState, slotId } = this.props.model return ( <div> <div className="adx-form-item-title">基本信息</div> <div className="ant-form-horizontal"> <div className="ant-form-item region"> <label className="ant-col-4 ant-form-item-label"> <span className="require-tip">*</span>創(chuàng)意名稱: </label> <div className="ant-col-19 ml10 region-input"> <div className="ant-form-text"> { ideaName } </div> </div> </div> <div className="ant-form-item region"> <label className="ant-col-4 ant-form-item-label"> <span className="require-tip">*</span>所屬資源位: </label> <div className="ant-col-19 ml10 region-input"> <div className="ant-form-text"> { resourceLocationDto && resourceLocationDto.resourceName } </div> </div> </div> <div className="ant-form-item region"> <label className="ant-col-4 ant-form-item-label"> <span className="require-tip">*</span>創(chuàng)意狀態(tài): </label> <div className="ant-col-19 ml10 region-input"> <div className="ant-form-text"> <Switch checked={switchState == 1}/> </div> </div> </div> <div className="ant-form-item region"> <label className="ant-col-4 ant-form-item-label"> <span className="require-tip">*</span>推啊廣告位ID: </label> <div className="ant-col-19 ml10 region-input"> <div className="ant-form-text"> { slotId } </div> </div> </div> </div> </div> ) } } export default BaseInfoView
完全可以寫成函數(shù)組件
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
使用React?MUI庫實(shí)現(xiàn)用戶列表分頁功能
MUI是一款基于React的UI組件庫,可以方便地構(gòu)建美觀的用戶界面,使用MUI的DataTable組件和分頁器組件可以輕松實(shí)現(xiàn)用戶列表分頁功能,這篇文章使用MUI庫實(shí)現(xiàn)了用戶列表分頁功能,感興趣的同學(xué)可以參考下文2023-05-05React實(shí)現(xiàn)二級聯(lián)動(dòng)的方法
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)二級聯(lián)動(dòng)的方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09解決React報(bào)錯(cuò)You provided a `checked` prop&n
這篇文章主要為大家介紹了React報(bào)錯(cuò)You provided a `checked` prop to a form field的解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12關(guān)于react-router/react-router-dom v4 history不能訪問問題的解決
這篇文章主要給大家介紹了關(guān)于react-router/react-router-dom v4 history不能訪問問題的解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01React使用高階組件與Hooks實(shí)現(xiàn)權(quán)限攔截教程詳細(xì)分析
高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件(功能增強(qiáng)的組件)的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù),并不是組件,這一點(diǎn)一定要注意,本文給大家分享React高階組件使用小結(jié),一起看看吧2023-01-01react實(shí)現(xiàn)可播放的進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)可播放的進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03