溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
函數組件 vs 類組件
函數組件(Functional Component )和類組件(Class Component)，劃分依據是根據組件的定義方式。函數組件使用函數定義組件，類組件使用ES6 class定義組件
// 函數組件
function Welcome(props) {
return <h2>Hello, {props.name}</h2>;
}
// 類組件
class Welcome extends React.Component {
render() {
return <h2>Hello, {this.props.name}</h2>;
}
}
無狀態組件 vs 有狀態組件
函數組件一定屬于無狀態組件 （劃分依據是根據組件內部是否維護state）
// 無狀態組件
class Welcome extends React.Component {
render() {
return <h2>Hello, {this.props.name}</h2>;
}
}
// 有狀態類組件
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {
show: true
}
}
render() {
const { show } = this.state;
return (
<>
{ show && <h2>Hello, {this.props.name}</h2> }
</>
)
}
}
展示型組件 vs 容器型組件
展示型組件(Presentational Component)和容器型組件(Container Component)，劃分依據是根據組件的職責。 (展示型組件一般是無狀態組件，不需要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>
)
}
展示型組件和容器型組件是可以互相嵌套的，展示型組件的子組件既可以包含展示型組件，也可以包含容器型組件，容器型組件也是如此。例如，當一個容器型組件承擔的數據管理工作過于復雜時，可以在它的子組件中定義新的容器型組件，由新組件分擔數據的管理。展示型組件和容器型組件的劃分完全取決于組件所做的事情。
總結
通過上面的介紹，可以發現這三組概念有很多重疊部分。這三組概念都體現了關注點分離的思想：UI展現和數據邏輯的分離。函數組件、無狀態組件和展示型組件主要關注UI展現，類組件、有狀態組件和容器型組件主要關注數據邏輯。但由于它們的劃分依據不同，它們并非完全等價的概念。它們之間的關聯關系可以歸納為：函數組件一定是無狀態組件，展示型組件一般是無狀態組件；類組件既可以是有狀態組件，又可以是無狀態組件，容器型組件一般是有狀態組件。
舉個🌰
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>創意名稱：
</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>創意狀態：
</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
完全可以寫成函數組件
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
