プロジェクトがある程度複雑になると、必然的にロジックの再利用の問題に直面することになります。 ミキシンこれは、 一般化されたミックスイン方式は、ES6 の Object.assign() の機能と同様に、割り当てを使用してミックスイン オブジェクト内のすべてのメソッドを元のオブジェクトにアタッチし、オブジェクトの混合を実現します。仕組みは次のとおりです: const ミックスイン = 関数 (obj, ミックスイン) { 定数 newObj = obj 新しいObj.prototype = Object.create(obj.prototype) for (ミックスインのプロパティ) { // ミックスインのプロパティを走査する if (mixins.hasOwnPrototype(prop)) { // ミックスインの独自のプロパティであるかどうかを判定します newObj.prototype[prop] = mixins[prop]; // 割り当て} } 新しいオブジェクトを返す }; React で Mixin を使用するプロジェクトで、複数のコンポーネントがデフォルトの const デフォルト名ミックスイン = { getDefaultProps: 関数 () { 戻る { 名前: 「ジョイ」 } } } const ComponentOne = React.createClass({ ミックスイン: [DefaultNameMixin] レンダリング: 関数 () { 戻り値 <h2>Hello {this.props.name}</h2> } }) 記述された 定数DefaultFriendMixin = { getDefaultProps: 関数 () { 戻る { 友達:「おいしい」 } } } const ComponentOne = React.createClass({ ミックスイン: [DefaultNameMixin、DefaultFriendMixin] レンダリング: 関数 () { 戻る ( <div> <h2>こんにちは {this.props.name}</h2> <h2>これは私の友達です {this.props.friend}</h2> </div> ) } }) たとえば、上記の 定数デフォルトプロパティミックスイン = { ミックスイン: [DefaultNameMixin、DefaultFriendMixin] } const ComponentOne = React.createClass({ ミックスイン: [DefaultPropsMixin] レンダリング: 関数 () { 戻る ( <div> <h2>こんにちは {this.props.name}</h2> <h2>これは私の友達です {this.props.friend}</h2> </div> ) } }) この時点で、
ただし、シナリオによっては、利点が欠点に変わることもあります。
さらに、 React Mixin の使用 ミックスインは有害であると考えられる 高階コンポーネント
デフォルトでは、 const withRouter = (コンポーネント) => { const displayName = `withRouter(${Component.displayName || Component.name})` 定数C = プロパティ => { const { wrappComponentRef, ...残りのProps } = props 戻る ( <ルーターコンテキスト.コンシューマー> {コンテキスト => { 不変 コンテクスト、 `<Router> の外部では <${displayName} /> を使用しないでください` ); 戻る ( <コンポーネント {...残りのプロップ} {...コンテクスト} ref={ラップされたコンポーネントRef} /> ) }} </ルーターコンテキスト.コンシューマー> ) } コードを使用する: React をインポートします。{ コンポーネント } から "react" を作成します。 「react-router」から{withRouter}をインポートします。 TopHeaderクラスはComponentを拡張します。 与える() { 戻る ( <div> ナビゲーション バー: クリックするとログイン画面にジャンプします */ <button onClick={this.exit}>終了</button> </div> ) } 終了 = () => { // withRouter 高階関数でラップされた後、this.props を使用して操作にジャンプできます this.props.history.push("/login") } } // withRouter を使用してコンポーネントをラップし、履歴や場所などを返します。 export default withRouter(TopHeader)
例えば: 歌唱を可能にする高階関数を書く React をインポートします。{ コンポーネント } を 'react' からインポートします。 const widthSinging = WrappedComponent => { HOCクラスを拡張するComponent {を返す コンストラクタ(){ super(...引数) this.singing = this.singing.bind(this) } 歌う = () => { console.log('歌っています!') } 与える() { <WrappedComponent /> を返します。 } } } ダンスを可能にする高階関数を書く React をインポートします。{ コンポーネント } を 'react' からインポートします。 const widthDancing = WrappedComponent => { HOCクラスを拡張するComponent {を返す コンストラクタ(){ super(...引数) this.dancing = this.dancing.bind(this) } ダンス = () => { console.log('踊っています!') } 与える() { <WrappedComponent /> を返します。 } } } 上記の高レベルコンポーネントを使用する React をインポートします。{ コンポーネント } から "react" を作成します。 「hocs」から{widthSing、widthDancing}をインポートします。 JoyクラスはComponentを拡張します{ 与える() { <div>Joy</div> を返す } } // Joy に歌ったり踊ったりする能力を与える export default widthSinging(withDancing(Joy)) 上記から、高階関数でラップするだけで、元々単純な Joy を歌って踊れるナイトクラブの王子様に変えることができることがわかります。 HOC の使用に関する規約
HOCの長所と短所この時点で
もちろん、
レンダリングプロップ
「レンダリング プロップ」という用語は、値が関数であるプロップを使用して React コンポーネント間でコードを共有する手法を指します。 これは 公式の例: <DataProvider render={(data) => <h1>こんにちは {data.target}</h1>} /> 上図のように、 読者は、「コンポーネント内で直接レンダリングを完了するのではなく、コンポーネントの内部レンダリングを実現するために プロジェクト開発では、ポップアップ ウィンドウを頻繁に使用する必要がある場合があります。ポップアップ ウィンドウの UI は多様ですが、機能は "antd"から{Modal、Button}をインポートします。 クラスAppはReact.Componentを拡張します。 状態 = { 可視: false } // ポップアップウィンドウの表示と非表示を制御するtoggleModal = (visible) => { this.setState({ 表示 }) }; ハンドルOk = (e) => { // 何かする this.setState({ visible: false }) } 与える() { const { 可視 } = this.state 戻る ( <div> <Button onClick={this.toggleModal.bind(this, true)}>開く</Button> <モーダル title="基本モーダル" 可視={可視} onOk={this.handleOk} onCancel={this.toggleModal.bind(this, false)} > <p>いくつかのコンテンツ...</p> </モーダル> </div> ) } } 上記は <マイモーダル> <Button>開く</Button> <Modal title="基本モーダル" onOk={this.handleOk}> <p>いくつかのコンテンツ...</p> </モーダル> </マイモーダル> 上記の使用法は "antd"から{Modal、Button}をインポートします。 クラスMyModalはReact.Componentを拡張します{ 状態 = { オン: false } トグル = () => { this.setState({ オン: !this.state.on }) } renderButton = (props) => <Button {...props} onClick={this.toggle} /> レンダリングモーダル = ({ onOK, ...rest }) => ( <モーダル {...休む} 表示={this.state.on} onOk={() => { onOK && onOK() this.toggle() }} onCancel={this.toggle} /> ) 与える() { this.props.children({ を返します。 ボタン: this.renderButton、 モーダル: this.renderModal }) } } このようにして、ステータスと基本機能を備えた 上でわかるように、
例えば: // 悪い例 class MouseTracker extends React.Component { 与える() { 戻る ( <マウスレンダリング={マウス => ( <猫 ネズミ={マウス} /> )}/> ) } } これは、 したがって、より良い書き方は、 // 良い例 class MouseTracker extends React.Component { renderCat(マウス) { <Cat mouse={mouse} /> を返します。 } 与える() { 戻る ( <マウスレンダリング={this.renderTheCat} /> ) } }
アドバンテージ
欠点
次のコード: const MyComponent = () => { 戻る ( <マウス> {({x,y}) => ( <ページ> {({ x: ページX, y: ページY }) => ( <接続> {({ API }) => { // やれやれ }} </接続> )} </ページ> )} </マウス> ) } フック
React Hooks の設計目的は、関数コンポーネントを強化して、「クラス」をまったく使用せずにフル機能のコンポーネントを記述できるようにすることです。
React をインポートします。{ コンポーネント } から "react" を作成します。 デフォルトクラス Button をエクスポートし、Component を拡張します { コンストラクタ() { 素晴らしい() this.state = { buttonText: "クリックしてください" } this.handleClick = this.handleClick.bind(this) } ハンドルクリック() { this.setState(() => { return { buttonText: "ありがとうございます、クリックされました!" } }) } 与える() { const { buttonText } = this.state <button onClick={this.handleClick}>{buttonText}</button> を返します } } 上記は最も基本的な状態とクリック メソッドを含むシンプルなボタン コンポーネントです。ボタンをクリックすると状態が変わります。 これは非常に単純な機能コンポーネントですが、実装するには大量のコードが必要です。 Reactをインポートし、{useState}を"react"から取得します。 デフォルト関数 Button() をエクスポートします。 const [buttonText, setButtonText] = useState("クリックしてください") 関数handleClick() { return setButtonText("ありがとうございます、クリックされました!") } <button onClick={handleClick}>{buttonText}</button> を返します } それに比べて、 上記の例では、最初のフック フックの長所と短所アドバンテージ
欠点
要約する
参考資料: React Mixin の使用 ミックスインは有害であると考えられる 高階コンポーネント レンダリングプロップ React 雑多: レンダリング プロップとその使用例 フックの紹介 React コード共有のベストプラクティスに関するこの記事はこれで終わりです。React コード共有に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: PHP+nginx サービス 500 502 エラーのトラブルシューティングのアイデアの詳細な説明
例えば: <link rel="スタイルシート" href="h...
1. Nginxの簡単な紹介Nginx は、無料のオープンソースの高性能 HTTP サーバーおよびリ...
問題の説明:エラーメッセージ:原因: com.mysql.jdbc.PacketTooBigExce...
目次序文背景大きな推測パターンを見つける構造とスタイルコンポーネントの実装パラメータキーボードの種類...
この記事の例では、Vueモバイル端末で指のスライド効果を実現するための具体的なコードを紹介します。具...
のようにLIKE ではデータ全体が一致する必要がありますが、REGEXP では部分的な一致のみが必要...
1.オーバーフローコンテンツのオーバーフロー設定(設定されたオブジェクトにスクロールバーを表示するか...
序文実際のプロジェクトの開発では、通常、プロジェクト開発フェーズ、テストフェーズ、最終オンラインフェ...
目次序文最適化変数の抽出二次包装 el-tag コンポーネント使用要約する序文バックエンドシステムの...
MySQL ページング分析の原理と効率改善PERCONA PERFORMANCE CONFERENC...
1. オンライン チュートリアルによると、Ubuntu 18.04 のインストールはまだ失敗します。...
最近、外国人が CSS3 を使用してアコーディオン効果を実現しているビデオを見たので、自分で学習した...
画像アクセラレータ中国の Docker Hub からイメージをプルすることが難しい場合があります。こ...
最近コンピュータを再インストールした後、最新バージョンのみをインストールするという強迫観念に基づいて...
1. Dockerをインストールするyum -y install docker-ioインストールが完...