Reactの学習方法の紹介

この記事では、React における高度なコンポーネントの分離について主に紹介します。この記事では、詳細なサンプルコードを通じてコン​​ポーネントの分割と分離の方法を紹介します。これは、すべての学習や仕事に役立つ価値があります。必要な方はフォローしてください。編集者も一緒に学びましょう。

はじめに

ご存知のとおり、React のコンポーネントは非常に柔軟で拡張性がありますが、ビジネスの複雑さが増し、多くの外部ツール ライブラリが導入されると、コンポーネントが肥大化することがよくあります。単一責任の原則に従ったコンポーネントのセグメント化と分離のいくつかの一般的な方法を見てみましょう。これ以上は説明せずに、詳細な紹介を見てみましょう。コンポーネントは多くのコンテンツをレンダリングします。簡単で一般的な方法は、元の巨大なレンダリングを単純化するサブレンダリング関数を作成することです

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

 renderBody() {
 // ...
 }

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

サブレンダリング関数を再度単純化するために、関数コンポーネントを使用することもできますこのメソッドは、より小さな処理単位を生成し、テストに適しています

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. props を使用して要素を渡します

コンポーネントに多くのステータスや設定がある場合は、次のように使用できます。データだけではなく要素を渡すための props。たとえば、親コンポーネントが設定のみに焦点を当てるようにコンポーネントを宣言します

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

親コンポーネント

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. 高次のコンポーネントを使用します

クリックを達成するには、コンポーネントにハイパーリンクを付け、コンポーネントのIDを送信します

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

しかし、コードが再利用できない、コンポーネントの再構築が難しいなどの問題があります。高次コンポーネントを使用してそれを解決できます これらの問題については、名前が示すように、高次コンポーネントは関数であり、それにコンポーネントを渡すと、新しいコンポーネントが返されます

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

簡略化されたコードは次のとおりですフォローします

りー

以上がReactの学習方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。