深入理解react 組件類型及使用場景

更新時間：2019年03月07日 14:12:36 作者：答案在風中飄著

這篇文章主要介紹了深入理解react 組件類型及使用場景，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

函數組件 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>;
 }
}

函數組件的寫法要比類組件簡潔，不過類組件比函數組件功能更加強大。函數組件更加專注和單一，承擔的職責也更加清晰，它只是一個返回React 元素的函數，只關注對應UI的展現。函數組件接收外部傳入的props，返回對應UI的DOM描述，
類組件可以維護自身的狀態(tài)變量，即組件的state，類組件還有不同的生命周期方法，可以讓開發(fā)者能夠在組件的不同階段（掛載、更新、卸載），對組件做更多的控制。

無狀態(tài)組件 vs 有狀態(tài)組件

函數組件一定屬于無狀態(tài)組件（劃分依據是根據組件內部是否維護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)，劃分依據是根據組件的職責。 (展示型組件一般是無狀態(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>
 ) 
}

展示型組件和容器型組件是可以互相嵌套的，展示型組件的子組件既可以包含展示型組件，也可以包含容器型組件，容器型組件也是如此。例如，當一個容器型組件承擔的數據管理工作過于復雜時，可以在它的子組件中定義新的容器型組件，由新組件分擔數據的管理。展示型組件和容器型組件的劃分完全取決于組件所做的事情。

總結

通過上面的介紹，可以發(fā)現這三組概念有很多重疊部分。這三組概念都體現了關注點分離的思想：UI展現和數據邏輯的分離。函數組件、無狀態(tài)組件和展示型組件主要關注UI展現，類組件、有狀態(tài)組件和容器型組件主要關注數據邏輯。但由于它們的劃分依據不同，它們并非完全等價的概念。它們之間的關聯(lián)關系可以歸納為：函數組件一定是無狀態(tài)組件，展示型組件一般是無狀態(tài)組件；類組件既可以是有狀態(tài)組件，又可以是無狀態(tài)組件，容器型組件一般是有狀態(tài)組件。

舉個🌰

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

完全可以寫成函數組件

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

React常見跨窗口通信方式實例詳解
這篇文章主要為大家介紹了React常見跨窗口通信方式實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-10-10
聊一聊我對 React Context 的理解以及應用
這篇文章主要介紹了聊一聊我對 React Context 的理解以及應用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-04-04
React Native使用fetch實現圖片上傳的示例代碼
本篇文章主要介紹了React Native使用fetch實現圖片上傳的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
react?fiber執(zhí)行原理示例解析
這篇文章主要為大家介紹了react?fiber執(zhí)行原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
在react-antd中彈出層form內容傳遞給父組件的操作
這篇文章主要介紹了在react-antd中彈出層form內容傳遞給父組件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
React+Node.js實現大文件傳輸與斷點續(xù)傳
這篇文章主要為大家詳細介紹了如何使用React前端和Node.js后端實現大文件傳輸和斷點續(xù)傳的功能,文中的示例代碼講解詳細,感興趣的小伙伴可以參考下
2024-12-12
React路由攔截模式及withRouter示例詳解
這篇文章主要為大家介紹了React路由攔截模式及withRouter示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
useEffect中不能使用async原理詳解
這篇文章主要為大家介紹了useEffect中為什么不能使用async的原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
React+Ant Design開發(fā)環(huán)境搭建的實現步驟
這篇文章主要介紹了React+Ant Design開發(fā)環(huán)境搭建的實現步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-04-04
react腳手架如何配置less和ant按需加載的方法步驟
這篇文章主要介紹了react腳手架如何配置less和ant按需加載的方法步驟，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11