深入理解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 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
jquery动态加载js三种方法实例
Aug 03 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
Mar 05 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
如何优雅地在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
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
jquery实现心算练习代码
2010/12/06 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
JavaScript中关于class的调用方法
2017/11/28 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
python中多个装饰器的执行顺序详解
2018/10/08 Python
python交互界面的退出方法
2019/02/16 Python
python中dict()的高级用法实现
2019/11/13 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
怎样声明一个匿名的内部类
2016/06/01 面试题
餐饮业的创业计划书范文
2013/12/26 职场文书
安全检查管理制度
2014/02/02 职场文书
大班幼儿评语大全
2014/04/30 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
销售人才自我评价范文
2014/09/27 职场文书
三下乡个人总结
2015/03/04 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
公积金贷款承诺书
2015/04/30 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
女方离婚起诉书
2015/05/18 职场文书
党校培训学习心得体会
2016/01/06 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
MySQL中日期型单行函数代码详解
2021/06/21 MySQL