react-组件类型及使用场景

7次阅读

共计 3118 个字符，预计需要花费 8 分钟才能阅读完成。

函数组件 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 展现，类组件、有状态组件和容器型组件主要关注数据逻辑。但由于它们的划分依据不同，它们并非完全等价的概念。它们之间的关联关系可以归纳为：函数组件一定是无状态组件，展示型组件一般是无状态组件；类组件既可以是有状态组件，又可以是无状态组件，容器型组件一般是有状态组件。
举个????
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> 推啊广告位 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 进阶之路（徐超）

正文完