Decoupling of components of React advanced learning and integration of react advanced learning

Decoupling of components of React advanced learning and integration of react advanced learning

Preface

As we all know, the components in React are very flexible and scalable. However, with the increase of business complexity and the introduction of many external tool libraries, the components are often swollen, next, let's take a look at several common methods, which follow the single responsibility principle and adopt the component separation and decoupling methods. If you don't talk about them much, let's take a look at the detailed introduction:

I. Divide the render Function

When a component renders a large amount of content, a quick and common method is to create a sub-render function to simplify the original large render.

class Panel extends React.Component { renderHeading() { // ... } renderBody() { // ... } render() { return ( <div> {this.renderHeading()} {this.renderBody()} </div> ); }}

To simplify the sub-render function again, you can use Functional Components to write a smaller Processing Unit, which is more conducive to testing.

const PanelHeader = (props) => ( // ...);const PanelBody = (props) => ( // ...);class Panel extends React.Component { render() { return ( <div> // Nice and explicit about which props are used <PanelHeader title={this.props.title}/> <PanelBody content={this.props.content}/> </div> ); }}

Ii. use props to transmit Elements

If a component has many States or configurations, we can use props to pass elements instead of data. For example, we can declare another component so that the parent component only focuses on configuration.

class CommentTemplate extends React.Component { static propTypes = { // Declare slots as type node metadata: PropTypes.node, actions: PropTypes.node, }; render() { return ( <div> <CommentHeading>  <Avatar user={...}/>  // Slot for metadata  <span>{this.props.metadata}</span> </CommentHeading> <CommentBody/> <CommentFooter>  <Timestamp time={...}/>  // Slot for actions  <span>{this.props.actions}</span> </CommentFooter> </div> ); }}

Parent component

class Comment extends React.Component { render() { const metadata = this.props.publishTime ? <PublishTime time={this.props.publishTime} /> : <span>Saving...</span>; const actions = []; if (this.props.isSignedIn) { actions.push(<LikeAction />); actions.push(<ReplyAction />); } if (this.props.isAuthor) { actions.push(<DeleteAction />); } return <CommentTemplate metadata={metadata} actions={actions} />; }}

3. Use advanced components

Click the hyperlink of a component to send the component ID. Most of our solutions may be as follows:

class Document extends React.Component { componentDidMount() { ReactDOM.findDOMNode(this).addEventListener('click', this.onClick); } componentWillUnmount() { ReactDOM.findDOMNode(this).removeEventListener('click', this.onClick); } onClick = (e) => { if (e.target.tagName === 'A') { // Naive check for <a> elements sendAnalytics('link clicked', { documentId: this.props.documentId // Specific information to be sent }); } }; render() { // ... }}

However, the Code cannot be reused, and component refactoring is difficult.

We can use high-order components to solve these problems. As the name suggests, high-order components are a function that is passed to a component and it returns a new component.

function withLinkAnalytics(mapPropsToData, WrappedComponent) { class LinkAnalyticsWrapper extends React.Component { componentDidMount() { ReactDOM.findDOMNode(this).addEventListener('click', this.onClick); } componentWillUnmount() { ReactDOM.findDOMNode(this).removeEventListener('click', this.onClick); } onClick = (e) => { if (e.target.tagName === 'A') { // Naive check for <a> elements const data = mapPropsToData ? mapPropsToData(this.props) : {}; sendAnalytics('link clicked', data); } }; render() { // Simply render the WrappedComponent with all props return <WrappedComponent {...this.props} />; } } return LinkAnalyticsWrapper;}

The simplified code is as follows:

class Document extends React.Component { render() { // ... }}export default withLinkAnalytics((props) => ({ documentId: props.documentId}), Document);

Summary

The decoupling and Reconstruction Methods of the above three React components can be used directly. At first, it may be a bit tricky, but it doesn't matter, as long as you stick to it, you will write stronger and reusable code.

Well, the above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, you can leave a message, thank you for your support.