問題タブ [react-class-based-component]

私は反応/反応ネイティブにかなり慣れていないので、最初のアプリを開発したいと思っています。プログラミング中に、コンポーネントを宣言する方法が 2 つあることがわかりました。私が理解しているように、状態変数にアクセスしたい場合は、常にクラスコンポーネントを使用する必要があります。しかし、反応のドキュメントによると、機能コンポーネント内の useState を介して状態変数にアクセスすることも可能であり、ベストプラクティスとして何を使用すればよいかわかりません。

いつ class- を使用し、いつ Functional-components を使用するかについて、ある種のルールセットまたはコーディングパターンはありますか?

事前にどうもありがとうございました！

私は反応するのが初めてで、クラスと機能コンポーネントの両方を使用して単純なストップウォッチを実装することで練習することにしました.

クラス コンポーネントを使用してストップ ウォッチを正常に実装しました。以下はコードです：

クラス コンポーネント

今、私は上記と同じコードを実装しようとしていますが、以下に示すように機能コンポーネントを使用しています:

機能部品

問題

クラス コンポーネントでは、最初に宣言したグローバル変数 stopms、stopSeconds、stopMinutes として clearInterval を引数として呼び出す handleClick 関数を使用して、「一時停止」機能を実装しました。これらのグローバル変数は、ストップウォッチがカウントを開始したときにそれぞれの setInterval から返された値を保持していたため、これはうまく機能しました。

機能コンポーネントでは、「let」キーワードを使用して同じグローバル変数を宣言することで、同じロジックを複製しました。しかし、「一時停止」機能は機能していません。「開始」ボタンが押されて handleClick 関数が呼び出されると、setIntervals が呼び出され、その戻り値がそれぞれのグローバル変数に格納されました。しかし、「一時停止」ボタンを押すと、すべてのグローバル変数の値が「未定義」になりました。

状態を使用する以外に、グローバル変数を宣言し、それらを使用してコンポーネントのライフサイクル全体で値を保持できる方法が他にあるかどうかを知りたいです。

私のコードには、親から小道具を受け取る1つの子コンポーネントがあり、その配列をマッピングして名前をレンダリングし、画像ボタンとレンダリング画像用の1つの子の子コンポーネントを追加します(これは画像の再レンダリングを避けるためです)。

画像の子の子の再レンダリングを追加すると正常に動作しますが、子の子の削除ボタンを使用して画像を削除すると、画像は親の状態から削除されますが、shouldComponentUpdate の古い小道具と新しい小道具が同じであるため、子の子は再レンダリングされません。

なぜこれが起こっているのか誰にも示唆できますか？

ChildComponent

子の子コンポーネント

新しいプロップと古いプロップをコンソールすると、新しいプロップと古いプロップが同じになるのはなぜですか。イメージは削除されますが、古いプロップと新しいプロップの値は新しく更新されたイメージの状態値です。そのため、再レンダリングされませんが、削除された画像は引き続き表示されます

現在、人々がアプリケーションにログインする必要があるReact Nativeアプリに取り組んでおり、ログインページ、サーバー側認証などを作成しました。私の質問は、ユーザーログイン情報をクライアントに保存するにはどうすればよいですか?アプリ全体でアクセスできるようにしますか? ユーザー名とパスワードをグローバル変数に保存するのは悪い習慣なので、アプリケーションのページにアクセス/変更するたびにそれらを使用してユーザーを認証できます (このアプローチでは、アプリ コード全体を 1 つのファイルに記述する必要があります)。ただし)、または、さまざまなページレンダリング関数の反応ネイティブ小道具を介してユーザーデータを渡し、他のページでアクセスする方法を見つけようとする必要がありますか?

react-h5-audio-player を使用した基本的なオーディオ再生アプリがあります。

その基本的な形式では、AudioPlayerコンポーネントはソースを受け取ります。このメディアをローカルに保存し、クラス コンポーネントを使用してメディア ソースを切り替える関数を含む親として AudioPlayer の周りに親Playerコンポーネントを構築しようとしています。

トラックのタイトルとデータ パスを、3 つのオブジェクトを含む 1 つの状態に保存しました。関数を使用してデータ参照を変更し、AudioPlayer のソースを変更しようとしています。

psudo を使用してロジックを埋めようとするコードを次に示します。これらの領域には Asterix が含まれています。

オンラインのガイダンスのほとんどは、状態を変更し、 this.setSateを使用して状態全体を変更することに関するものです。特定のプロパティを変更/表現しようとしているため、これを使用するのに苦労しています。

ガイダンスやアドバイスをいただければ幸いです。gatsby / react.js を使用するのはこれが初めてなので、間違ったロジックでこれに取り組んでいる場合はお詫びします。