深入理解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>;
 }
}

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

完全可以写成函数组件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。