函數組件 vs 類組件
函數組件(Functional Component )和類組件(Class Component)，劃分依據是根據組件的定義方式。函數組件使用函數定義組件，類組件使用ES6 class定義組件
// 函數組件function Welcome(props) { return <h1>Hello, {props.name}</h1>;}// 類組件class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}無狀態組件 vs 有狀態組件
函數組件一定屬于無狀態組件 （劃分依據是根據組件內部是否維護state）
// 無狀態組件class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}// 有狀態類組件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)，劃分依據是根據組件的職責。 (展示型組件一般是無狀態組件，不需要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'@observerclass 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完全可以寫成函數組件
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
