Heim >Web-Frontend >js-Tutorial >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
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
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
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() { // ... } }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 === '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; }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!