Einführung in die Lernmethoden von React

Dieser Artikel führt Sie hauptsächlich in die Entkopplung erweiterter Komponenten in React ein. Der Artikel stellt die Methode der Komponentensegmentierung und -entkopplung anhand eines detaillierten Beispielcodes vor, der für Ihr Studium oder Ihre Arbeit von gewisser Bedeutung ist. Freunde, die es brauchen, können dem Herausgeber folgen, um gemeinsam zu lernen.

Vorwort

Wie wir alle wissen, sind die Komponenten in React mit zunehmender Geschäftskomplexität sehr flexibel und skalierbar Externe Tool-Bibliotheken Mit der Einführung von Komponenten erscheinen wir als Nächstes einen Blick auf einige gängige Methoden zur Komponentensegmentierung und -entkopplung, die dem Prinzip der Einzelverantwortung folgen. Werfen wir einen Blick auf die detaillierte Einführung 🎜>

1. Split-Render-Funktion

Wenn eine Komponente viele Inhalte rendert, gibt es eine schnelle und universelle Funktion Methode besteht darin, eine Sub-Render-Funktion zu erstellen, um das ursprüngliche große Rendering zu vereinfachen

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

 renderBody() {
 // ...
 }

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

Um die Sub-Render-Funktion erneut zu vereinfachen, können wir auch Funktionskomponenten verwenden Schreibmethode, diese Methode generiert eine kleinere Verarbeitungseinheit und eignet sich besser zum Testen

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. Verwenden Sie Requisiten, um Elemente zu übergeben

Wenn eine Komponente viele Status oder Konfigurationen hat, können wir Requisiten verwenden, um Elemente statt nur Daten zu übergeben. Deklarieren Sie beispielsweise eine andere Komponente, sodass sich die übergeordnete Komponente nur darauf konzentriert Konfiguration

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>
 );
 }
}

Übergeordnete Komponente

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. Komponenten bestellen

Um das Klicken auf einen Hyperlink einer Komponente und das Senden der ID der Komponente zu realisieren, können die meisten unserer Lösungen wie folgt aussehen

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() {
 // ...
 }
}

Es gibt jedoch Probleme, wie zum Beispiel, dass Code nicht wiederverwendet werden kann und die Komponentenrekonstruktion schwierig ist

Wir können Komponenten höherer Ordnung verwenden, um diese Probleme zu lösen. Eine Komponente höherer Ordnung ist eine Funktion. Wenn Sie ihr eine Komponente übergeben, gibt sie eine neue zurück. Der vereinfachte Code der Komponente

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;
}

lautet wie folgt

Das obige ist der detaillierte Inhalt vonEinführung in die Lernmethoden von React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!