深入理解react 组件类型及使用场景


Posted in Javascript onMarch 07, 2019

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

完全可以写成函数组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
js的with语句使用方法
Sep 21 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
原生JS实现网络彩票投注效果
Sep 25 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
详解js的视频和音频采集
Aug 09 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
前端开发之便利店收银系统代码
Dec 27 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 #Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 #Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 #Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 #jQuery
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 #Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 #Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 #Javascript
You might like
常用星际术语索引(新手指南)
2020/03/04 星际争霸
php数组使用规则分析
2015/02/27 PHP
PHP7新特性
2021/03/09 PHP
js继承 Base类的源码解析
2008/12/30 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
webpack优化的深入理解
2018/12/10 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
浅析使用Python操作文件
2017/07/31 Python
Sublime开发python程序的示例代码
2018/01/24 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
详解Python的循环结构知识点
2019/05/20 Python
python pytest进阶之xunit fixture详解
2019/06/27 Python
如何获取Python简单for循环索引
2019/11/21 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
python破解同事的压缩包密码
2020/10/14 Python
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
数控技术应届生求职信
2013/11/13 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
蓝颜请假条
2014/04/11 职场文书
家长对学生的评语
2014/04/18 职场文书
经理任命书模板
2014/06/06 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
幼儿学前班评语
2014/12/29 职场文书
工程合作意向书范本
2015/05/09 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
python之django路由和视图案例教程
2021/07/26 Python