函数组件 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>;
  }
}

1. 函数组件的写法要比类组件简约，不过类组件比函数组件功用越发壮大。函数组件越发专注和单一，负担的职责也越发清楚，它只是一个返回React 元素的函数，只关注对应UI的展现。函数组件吸收外部传入的props，返回对应UI的DOM形貌，
2. 类组件可以保护本身的状况变量，即组件的state，类组件另有差别的生命周期要领，可以让开发者可以在组件的差别阶段（挂载、更新、卸载），对组件做更多的掌握。

无状况组件 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'

@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

完整可以写成函数组件

参考

React 进阶之路（徐超）