Example Analysis of the components of React

Editor to share with you the example analysis of the components of React, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. Split render function

When a component renders a lot of content, a quick and general method is to create a sub-render function to simplify the original huge render.

Class Panel extends React.Component {renderHeading () {/ /...} renderBody () {/ /...} render () {return ({this.renderHeading ()} {this.renderBody ()});}}

To simplify the sub-render function again, we can also use Functional Components writing, which generates smaller processing units and is more convenient for testing

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

2. Transfer elements with props

If a component has more state or configuration, we can use props to pass elements instead of just data, such as declaring a component so that the parent component only focuses on the configuration

Class CommentTemplate extends React.Component {static propTypes = {/ / Declare slots as type node metadata: PropTypes.node, actions: PropTypes.node,}; render () {return (/ / Slot for metadata {this.props.metadata} / / Slot for actions {this.props.actions});}

Parent component

Class Comment extends React.Component {render () {const metadata = this.props.publishTime?: Saving...; const actions = []; if (this.props.isSignedIn) {actions.push (); actions.push ();} if (this.props.isAuthor) {actions.push ();} return;}}

Third, use high-level components

To click on the hyperlink of a component and send the component's 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 elements sendAnalytics ('link clicked', {documentId: this.props.documentId / / Specific information to be sent});}; render () {/ /...}

However, it has some problems, such as code can not be reused, component refactoring is difficult and so on.

We can use high-level components to solve these problems. As the name implies, a high-level component is a function, passed to it 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 elements const data = mapPropsToData? MapPropsToData (this.props): {}; sendAnalytics ('link clicked', data);}}; render () {/ / Simply render the WrappedComponent with all props return;}} return LinkAnalyticsWrapper;}

The simplified code is as follows

Class Document extends React.Component {render () {/...}} export default withLinkAnalytics ((props) = > ({documentId: props.documentId}), Document); the above is all the content of the article "sample Analysis of React components". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!