13518219792
函数组件 vs 类组件
十多年的华蓥网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整华蓥建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“华蓥网站设计”,“华蓥网站推广”以来，每个客户项目都认真落实执行。
函数组件(Functional Component )和类组件(Class Component)，划分依据是根据组件的定义方式。函数组件使用函数定义组件，类组件使用ES6 class定义组件
// 函数组件
function Welcome(props) {
return Hello, {props.name}
;
}
// 类组件
class Welcome extends React.Component {
render() {
return Hello, {this.props.name}
;
}
}
无状态组件 vs 有状态组件
函数组件一定属于无状态组件 （划分依据是根据组件内部是否维护state）
// 无状态组件
class Welcome extends React.Component {
render() {
return Hello, {this.props.name}
;
}
}
// 有状态类组件
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {
show: true
}
}
render() {
const { show } = this.state;
return (
<>
{ show && Hello, {this.props.name}
}
)
}
}展示型组件 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 (
{props.users.map(function(user) {
return (
-
{user.name}
);
})}
)
}展示型组件和容器型组件是可以互相嵌套的，展示型组件的子组件既可以包含展示型组件，也可以包含容器型组件，容器型组件也是如此。例如，当一个容器型组件承担的数据管理工作过于复杂时，可以在它的子组件中定义新的容器型组件，由新组件分担数据的管理。展示型组件和容器型组件的划分完全取决于组件所做的事情。
总结
通过上面的介绍，可以发现这三组概念有很多重叠部分。这三组概念都体现了关注点分离的思想：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 (
基本信息
{ ideaName }
{ resourceLocationDto && resourceLocationDto.resourceName }
{ slotId }
)
}
}
export default BaseInfoView
完全可以写成函数组件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
