内容简介:函数组件(Functional Component )和类组件(Class Component),划分依据是根据组件的定义方式。函数组件使用函数定义组件,类组件使用ES6 class定义组件函数组件一定属于无状态组件展示型组件(Presentational Component)和容器型组件(Container Component),划分依据是根据组件的职责。 (展示型组件一般是无状态组件,不需要state)
函数组件 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>; } }
- 函数组件的写法要比类组件简洁,不过类组件比函数组件功能更加强大。函数组件更加专注和单一,承担的职责也更加清晰,它只是一个返回React 元素的函数,只关注对应UI的展现。函数组件接收外部传入的props,返回对应UI的DOM描述,
- 类组件可以维护自身的状态变量,即组件的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展现,类组件、有状态组件和容器型组件主要关注数据逻辑。但由于它们的划分依据不同,它们并非完全等价的概念。它们之间的关联关系可以归纳为:函数组件一定是无状态组件,展示型组件一般是无状态组件;类组件既可以是有状态组件,又可以是无状态组件,容器型组件一般是有状态组件。
举个:chestnut:
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
完全可以写成函数组件
参考
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- React 中的高阶组件及其应用场景
- 配置管理 ACM 在高可用服务 AHAS 流控降级组件中的应用场景
- 不改造HBase就能应对复杂查询场景?这个索引组件亮了丨自研出圈
- HBase场景 | 对比MySQL,一文看透HBase的能力及使用场景
- 容器的应用场景
- Redis 应用场景汇总
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。