Function Components vs Class Components
Functional Component and Class Component are divided based on the definition of components. Function components use functions to define components, class components use ES6 class to define components
// Function componentsfunction Welcome(props) {
return <h1>Hello, {}</h1>;
}
// Class componentsclass Welcome extends {
render() {
return <h1>Hello, {}</h1>;
}
}
- The writing of function components is simpler than that of class components, but class components are more powerful than function components. Function components are more focused and single, and their responsibilities are clearer. They are just a function that returns React elements, focusing only on the display of the corresponding UI. The function component receives external incoming props and returns the DOM description of the corresponding UI.
- Class components can maintain their own state variables, that is, the component's state. Class components have different life cycle methods, which allow developers to take more control over the components at different stages of the components (mount, update, and uninstall).
Stateless Components vs Stateful Components
Function components must be stateless components (the basis for division is based on whether the state is maintained within the component)
// Stateless componentclass Welcome extends {
render() {
return <h1>Hello, {}</h1>;
}
}
// Stateful componentclass Welcome extends {
constructor(props) {
super(props);
= {
show: true
}
}
render() {
const { show } = ;
return (
<>
{ show && <h1>Hello, {}</h1> }
</>
)
}
}
Display component vs Container component
Presentational Components and Container Components are divided based on the responsibilities of the components. (Display component is generally a stateless component, and there is no need for state)
class UserListContainer extends {
constructor(props){
super(props);
= {
users: []
}
}
componentDidMount() {
var that = this;
fetch('/path/to/user-api').then(function(response) {
().then(function(data) {
({users: data})
});
});
}
render() {
return (
<UserList users={} />
)
}
}
function UserList(props) {
return (
<div>
<ul className="user-list">
{(function(user) {
return (
<li key={}>
<span>{}</span>
</li>
);
})}
</ul>
</div>
)
}
Display components and container components can be nested with each other. The subcomponents of display components can include both display components and container components, and the same is true for container components. For example, when the data management work undertaken by a container-type component is too complex, a new container-type component can be defined in its subcomponents, and the management of the data is shared by the new component. The division of display components and container components depends entirely on what the components do.
Summarize
Through the above introduction, we can find that there are many overlapping parts of these three sets of concepts. These three sets of concepts all reflect the idea of separation of concerns: the separation of UI presentation and data logic. Function components, stateless components and presentation components mainly focus on UI display, while class components, stateful components and container components mainly focus on data logic. But because they are divided according to different reasons, they are not completely equivalent. The relationship between them can be summarized as: the function component must be a stateless component, and the display component is generally a stateless component; the class component can be both a stateful component or a stateless component, and the container component is generally a stateful component.
Give it one 🌰
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
} =
return (
<div>
<div className="adx-form-item-title">Basic information</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>Creative name：
</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>Resource location：
</label>
<div className="ant-col-19 ml10 region-input">
<div className="ant-form-text">
{ resourceLocationDto && }
</div>
</div>
</div>
<div className="ant-form-item region">
<label className="ant-col-4 ant-form-item-label">
<span className="require-tip">*</span>Creative status：
</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>Promote ad spaceID：
</label>
<div className="ant-col-19 ml10 region-input">
<div className="ant-form-text">
{ slotId }
</div>
</div>
</div>
</div>
</div>
)
}
}
export default BaseInfoView
Can be written as a function component
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.