Introduction aux méthodes d'apprentissage de React

Cet article vous présente principalement le découplage des composants avancés dans React. L'article présente la méthode de segmentation et de découplage des composants à travers un exemple de code détaillé, qui revêt une certaine importance pour votre étude ou votre travail. les amis qui en ont besoin peuvent suivre l'éditeur pour apprendre ensemble.

Avant-propos

Comme nous le savons tous, les composants de React sont cependant très flexibles et évolutifs, avec l'augmentation de la complexité des entreprises et de leurs nombreux éléments. bibliothèques d'outils externes Avec l'introduction de , les composants semblent souvent surchargés. Examinons ensuite quelques méthodes courantes de segmentation et de découplage des composants qui suivent le principe de responsabilité unique, jetons un coup d'œil à l'introduction détaillée :

1. Fonction de rendu fractionné

Lorsqu'un composant restitue beaucoup de contenu, il existe une fonction rapide et universelle. La méthode consiste à créer une fonction de sous-rendu pour simplifier l'énorme rendu original

class Panel extends React.Component {
 renderHeading() {
 // ...
 }

 renderBody() {
 // ...
 }

 render() {
 return (
 <p>
 {this.renderHeading()}
 {this.renderBody()}
 </p>
 );
 }
}

Afin de simplifier à nouveau la fonction de sous-rendu, nous pouvons également utiliser des composants fonctionnels méthode d'écriture, cette méthode génère une unité de traitement plus petite et est plus propice aux tests

const PanelHeader = (props) => (
 // ...
);

const PanelBody = (props) => (
 // ...
);

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

2. Utilisez des accessoires pour transmettre des éléments

Si un composant a beaucoup de statut ou de configuration, nous pouvons utiliser des accessoires pour transmettre des éléments au lieu de simplement des données. Par exemple, déclarer un autre composant afin que le composant parent se concentre uniquement sur. configuration

class CommentTemplate extends React.Component {
 static propTypes = {
 // Declare slots as type node
 metadata: PropTypes.node,
 actions: PropTypes.node,
 };

 render() {
 return (
 <p>
 <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>
 </p>
 );
 }
}

Composant parent

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. commander des composants

Pour réaliser un clic sur un lien hypertexte d'un composant et envoyer l'ID du composant, la plupart de nos solutions peuvent être les suivantes

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 === &#39;A&#39;) { // Naive check for <a> elements
 sendAnalytics(&#39;link clicked&#39;, {
 documentId: this.props.documentId // Specific information to be sent
 });
 }
 };

 render() {
 // ...
 }
}

Cependant, il présente des problèmes tels que le code ne peut pas être réutilisé et la reconstruction des composants est difficile

Nous pouvons utiliser des composants d'ordre élevé pour résoudre ces problèmes. un composant d'ordre élevé est une fonction. Si vous lui passez un composant, il renvoie un nouveau Le code simplifié du composant

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 === &#39;A&#39;) { // Naive check for <a> elements
 const data = mapPropsToData ? mapPropsToData(this.props) : {};
 sendAnalytics(&#39;link clicked&#39;, data);
 }
 };

 render() {
 // Simply render the WrappedComponent with all props
 return <WrappedComponent {...this.props} />;
 }
 }

 return LinkAnalyticsWrapper;
}

est le suivant

class Document extends React.Component {
 render() {
 // ...
 }
}

export default withLinkAnalytics((props) => ({
 documentId: props.documentId
}), Document);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!