深入理解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 相关文章推荐
javascript add event remove event
Apr 07 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
基于JQuery的asp.net树实现代码
Nov 30 Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 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析构函数的简单使用说明
2015/08/24 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
jcrop基本参数一览
2013/07/16 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
微信小程序中转义字符的处理方法
2019/03/28 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
Python脚本实现虾米网签到功能
2016/04/12 Python
python批量修改图片大小的方法
2018/07/24 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
Java面试题及答案
2012/09/08 面试题
金讯Java笔试题目
2013/06/18 面试题
Linux文件系统类型
2012/09/16 面试题
小学生暑假感言
2014/02/06 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
用Python创建简易网站图文教程
2021/06/11 Python
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android