React+TS を使用したシンプルな Jira プロジェクトを実装するためのベスト プラクティス

React+TS を使用したシンプルな Jira プロジェクトを実装するためのベスト プラクティス

トレーニングのための一連のプロジェクト
反応+ts
内容は少ないですが、フックのカプセル化、ts ジェネリックの理解、次のレベルのプロジェクト コードの使用など、退屈な内容がたくさんあります。https://gitee.com/fine509/react_jiar

レンダリング

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

これらは3つのメインページといくつかの細かい詳細です

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

注目すべき点がいくつかあります(一般的な機能についてのみ説明しており、具体的な使用方法については説明していません)

ここに画像の説明を挿入

ページのどこかにエラーがある場合にハングアップするのではなく、エラー境界処理と getDerivedStateFromError を使用してエラー コンポーネントを表示します。

useSearchParamsの使用

ここに画像の説明を挿入
ここに画像の説明を挿入

この API はここでパラメータを取得および設定できます。

react-queryの使用

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

このライブラリは、サーバー側のデータを管理するための状態管理ライブラリとしてオンラインで紹介されています。 redux に少し似ているようですが、多くのアクションとリデューサーを書く必要はありません。 非同期リクエストをサポートし、キーを使用してデータを一意に識別し、グローバル状態管理ライブラリに似た場所を持っています。これは、追加、削除、変更、チェックなどの特定のテーブルに特に適しており、楽観的更新もサポートしています。 例えば、データの追加、削除、変更、チェックを行う際に、データを送信した瞬間に元のデータを直接取得できるという考え方です。自分で記述したロジックコードを通じて、追加、削除、変更、チェックを行った後のデータを取得し、それを直接ページにレンダリングすることができます。直接更新されたように見えますが、実際には最初にレンダリングされ、その後バックグラウンドでリクエスト自体が送信されます。失敗した場合は、元のデータを取得してページに再レンダリングし、失敗を通知することもできます。 このプロジェクトを実行する際に特に気になった最後の点は、データ管理でした。

まず、フックを自分でカプセル化しました。

ここに画像の説明を挿入

私の考えでは、ページは大量のデータを取得する必要がある可能性があるため、自分で Loading を書くのは非常に面倒です。複数あるのに、なぜ loading を統一的に管理できないのでしょうか? 次に、データをオブジェクトとして設定します。それを使用するときは、データのタイプを定義するために型を渡すことができます。

ここに画像の説明を挿入

次にsendHttpを使ってデータを送信します

ここに画像の説明を挿入

2 つのパラメータを受け入れます。2 番目のパラメータは、現在のデータが配置されるデータの属性です。

使用効果は

ここに画像の説明を挿入
ここに画像の説明を挿入
ここに画像の説明を挿入

こうすることで、このデータの状態を一元的に管理できるのですが、後になって、これが非常に使いにくいことに気づきました。それでまた諦めました。ネイティブで書くほうが楽です。インターフェースを直接定義するだけです。

ここに画像の説明を挿入

直接使用

ここに画像の説明を挿入

もちろん、redux を使うことも考えましたが、redux ではアクションとリデューサーを書く必要があり、これも非常に面倒です。
最近友人から、Ahooks の usequest も良いと聞いたので、次のプロジェクトで試してみようと思います。

最後に、このプロジェクトから最も学んだことは、さまざまなフックをカプセル化することです

カプセル化redux


ここに画像の説明を挿入

カプセル化リクエスト

ここに画像の説明を挿入

TSの研究もあります。

API がわからない場合は、型定義をクリックしてください。

ここに画像の説明を挿入

このようなことが分からない場合は、クリックして一つずつクリックしてください。

ここに画像の説明を挿入

この集中講義で、ジェネリック医薬品の使い方をゆっくりと理解できるようになります。

react+ts を使用したシンプルな jira プロジェクトの実装に関するこの記事はこれで終わりです。さらに関連性の高い react+ts jira プロジェクトのコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • React は recharts を使用して散布図のサンプル コードを実装します
  • Node を使用して reactSSR サーバーサイド レンダリング アーキテクチャを構築する
  • ReactのsetStateコールバック関数の詳細な説明
  • React の状態と setState の使用に関する学習ノート
  • React コンポーネントで Echarts を使用するためのサンプルコード
  • React Native は Baidu Echarts を使用してチャートを表示するサンプル コード

<<:  Linuxファイアウォールiptablesの詳細な紹介、設定方法と事例

>>:  MySQL 5.7.24 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

推薦する

HTMLページのヘッダーコードは完全に明確です

以下のコードはすべて <head>...</head> の間にあり、具体的な...

Vueは3階層メニューを再帰的に実装する

この記事の例では、3階層メニューを再帰的に実装するVueの具体的なコードを参考までに共有しています。...

MySQL 8.0 の非表示インデックスの詳細な説明

言葉MySQL 8.0 は最初のバージョンから 4 年を経てリリースされました。バージョン 8.0 ...

表内のコンテンツオーバーフローのレイアウト方法について

コンテンツオーバーフローとは何ですか?実際、テキストが大量にある場合、コンテンツ領域がそれだけの長さ...

HTML ウェブページにおけるさまざまなフォント形式の詳細

このセクションでは、テキストの変更の詳細から始めます。これにより、読者はさまざまな HTML フォン...

MySQL ロックの知識ポイントのまとめ

ロックの概念①. 現実世界では、鍵は外の世界から身を隠したいときに使う道具です。 ②. コンピュータ...

Linux でのルーティングと仮想マシン ネットワークの設定に関する詳細なグラフィック説明

ルーティングとは何ですか?ルーティングとは、相互接続されたネットワークを介して送信元ステーションから...

UI を通じて Docker を管理する方法

Docker はますます多くのシナリオで使用されています。コマンドラインツールに慣れていない人にとっ...

jsの継承の6つの方法を詳しく解説

プロトタイプチェーン継承プロトタイプ継承は、ECMAScript における主な継承方法です。基本的な...

MySQL からエクスポートされた scv ファイル内の文字化けやジャンプ行の問題をすばやく解決します

仕事上の理由により、完全なオンライン化(​​つまり、すべてのデータがオンラインで完了し、インポートや...

CentOS 7 で MySQL 接続数が 214 に制限される問題の解決方法

問題を見つける最近、プロジェクトで問題が発生しました。接続が多すぎるため、「接続が多すぎます」という...

Vue の NetEase Cloud Music Player インターフェースを模倣したシンプルな実装プロセス

仕事のプロジェクトのニーズにより、曲の再生が必要となり、さまざまな資料を参考にして、NetEase ...

HTML チュートリアル: title 属性と alt 属性

XHTML は CSS レイアウトの基礎です。jb51.net は常に XHTML 知識の習得を重視...

MySQLデータベースが予期せずクラッシュし、テーブルデータファイルが破損して起動できなくなる問題を解決します。

問題: MySQL データベースが予期せずクラッシュしたため、データベースを起動できませんでした。エ...

MySQL パフォーマンス最適化のヒント

MySQL パフォーマンスの最適化MySQL はインターネット企業で広く使用されており、MySQL ...