深入理解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 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 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
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
一漂亮的PHP图片验证码实例
2014/03/21 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
php和asp语法上的区别总结
2019/05/12 PHP
php实现登录页面的简单实例
2019/09/29 PHP
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
[53:36]Liquid vs VP Supermajor决赛 BO 第三场 6.10
2018/07/05 DOTA
Python实现模拟时钟代码推荐
2015/11/08 Python
python得到单词模式的示例
2018/10/15 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
Python argparse模块使用方法解析
2020/02/20 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
酒店中秋节促销方案
2014/01/30 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
学校就业推荐信范文
2014/05/19 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle