Preface
As we all know, the components in React are very flexible and scalable, but with the increase in business complexity and the introduction of many external tool libraries, components often appear to be swollen. Next, let’s take a look at several common methods, which follow the principle of single responsibility, component segmentation and decoupling. Without further ado, let’s take a look at the detailed introduction together:
1. Split render function
When a component renders more content, a fast and common way is to create a sub-render function to simplify the original huge render
class Panel extends {
renderHeading() {
// ...
}
renderBody() {
// ...
}
render() {
return (
<div>
{()}
{()}
</div>
);
}
}
In order to simplify the sub-render function again, we can also use Functional Components writing, which generates smaller processing units and is more conducive to testing
const PanelHeader = (props) => (
// ...
);
const PanelBody = (props) => (
// ...
);
class Panel extends {
render() {
return (
<div>
// Nice and explicit about which props are used
<PanelHeader title={}/>
<PanelBody content={}/>
</div>
);
}
}
2. Use props to pass elements
If a component has many states or configurations, we can use props to pass elements instead of data, such as declaring another component so that the parent component only focuses on configuration
class CommentTemplate extends {
static propTypes = {
// Declare slots as type node
metadata: ,
actions: ,
};
render() {
return (
<div>
<CommentHeading>
<Avatar user={...}/>
// Slot for metadata
<span>{}</span>
</CommentHeading>
<CommentBody/>
<CommentFooter>
<Timestamp time={...}/>
// Slot for actions
<span>{}</span>
</CommentFooter>
</div>
);
}
}
Parent component
class Comment extends {
render() {
const metadata = ?
<PublishTime time={} /> :
<span>Saving...</span>;
const actions = [];
if () {
(<LikeAction />);
(<ReplyAction />);
}
if () {
(<DeleteAction />);
}
return <CommentTemplate metadata={metadata} actions={actions} />;
}
}
3. Use advanced components
Implement clicking on the hyperlink of a component and sending the ID of the component. Most of our solutions may be as follows
class Document extends {
componentDidMount() {
(this).addEventListener('click', );
}
componentWillUnmount() {
(this).removeEventListener('click', );
}
onClick = (e) => {
if ( === 'A') { // Naive check for <a> elements
sendAnalytics('link clicked', {
documentId: // Specific information to be sent
});
}
};
render() {
// ...
}
}
However, it has problems such as code cannot be reused and component reconstruction difficulties.
We can use advanced components to solve these problems. As the name implies, a higher-order component is a function, passed to it a component, which returns a new component
function withLinkAnalytics(mapPropsToData, WrappedComponent) {
class LinkAnalyticsWrapper extends {
componentDidMount() {
(this).addEventListener('click', );
}
componentWillUnmount() {
(this).removeEventListener('click', );
}
onClick = (e) => {
if ( === 'A') { // Naive check for <a> elements
const data = mapPropsToData ? mapPropsToData() : {};
sendAnalytics('link clicked', data);
}
};
render() {
// Simply render the WrappedComponent with all props
return <WrappedComponent {...} />;
}
}
return LinkAnalyticsWrapper;
}
The simplified code is as follows
class Document extends {
render() {
// ...
}
}
export default withLinkAnalytics((props) => ({
documentId:
}), Document);
Summarize
The above three React components decoupling and reconstruction methods can be used directly. They may feel a little tricky at the beginning, but it doesn't matter. As long as you persist, you will write stronger and reusable code.
Okay, the above is the entire content of this article. I hope the content of this article will be of some help to everyone’s study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.
Original link:Techniques for decomposing React components