深入理解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 cdn使用介绍
May 08 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
jquery+json实现分页效果
Mar 07 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
Mar 14 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
vue配置型表格基于el-table拓展之table-plus组件
Apr 12 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
php中的数组操作函数整理
2008/08/18 PHP
php获取网页内容方法总结
2008/12/04 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
php中socket通信机制实例详解
2015/01/03 PHP
php时间计算相关问题小结
2016/05/09 PHP
php表单处理操作
2017/11/16 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
Mac地址验证的javascript代码
2013/11/09 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
2014/09/22 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
python 实现控制鼠标键盘
2020/11/27 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
买卖合同协议书范本
2014/10/18 职场文书
小学生暑假生活总结
2015/07/13 职场文书
小学毕业感言100字
2015/07/30 职场文书
德能勤绩工作总结
2015/08/11 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
vue实现滑动解锁功能
2022/03/03 Vue.js