🍭 Note #2021-01-27

今日、2つの小さなエラーを修正し、ビデオを表示するライブラリの置換、イベントの分析、パラメータに関するドキュメントを作成しました.
1️⃣
핔の詳細コメントではYouTube動画でファッションアイテムを詳しくお勧めできます.従って、react−オリジナル開発のアプリケーションではビデオを表示する機能が実現され、従来の機能はreact-native-youtube-iframeで実現されている.このnpmパッケージは、ネイティブYouTubeアプリケーションよりも安定したWebビューアを使用して、react Nativeアプリケーションにビデオを挿入できます.
コンセプト#1
まず、iframeはHTML iframeを表し、Webページ内にWebページを表示するために使用されます.

ネイティブアプリケーションでは、htmlのiframeと同様に、ネイティブアプリケーションでhtmlを表示するためのビューです.(Androidシステムでは、フレームワークに組み込まれたコンポーネントビューWebViewをアプリケーションに埋め込むことができます.)

Webビューは簡単にWebページを表示するために使用されますが、AndroidアプリケーションでHTMLを呼び出すことでアプリケーションのハイブリッド形式を実現するアプリケーションの開発にもよく使用されます.

ただしiosはテスト時には問題ありませんが、Androidテスト時にはビデオ再生/停止、モードオン、オフ、オフといったエラーが発生するため、react-native-youtube-sdkパッケージを使用して実現する必要があります.sdkを使用して、ネイティブアプリケーションのライブラリなどのビデオを表示できます.
この実装自体は既存のコードを数行修正するだけでよいが,想像以上にビデオを挿入するのが簡単であることは不思議である. <YouTubePlayer />素子を使用すればよい.また、親エレメントでは、子エレメントのYouTube Playerメソッドは、refを使用してエレメントのDomにアクセスすることができる.
2️⃣
まだあります.今日、アプリケーションのWebサイトで提供されているFirebase Analyticsでは、アプリケーションがどこで使用されているかについてのドキュメントを作成し、Analyticsがアプリケーションにどのように適用されているかを理解しました.
54612(通知機能を提供する)クラウドメッセージング(アプリケーション内のエラーを実際のユーザーが簡単に理解できるようにする)crashlyticsが提供されています.(リンクのみでアプリケーションに必要なコンテンツが得られる(アプリケーションがインストールされていなくても、インストール後にリンクに移動できる)のは、ダイナミックリンクなど多くの機能がreact native firebaseライブラリで使用されているため、Firebase Analyticsを使用します.
機能は実装されていますが、実装されたコードにより、Webサイトをどこで測定するか、アプリケーションに構文を適用する方法がわかります.
コンセプト#2

事前定義イベント:Firebase事前定義イベント
(アクティビティのタイプに応じてカスタマイズされたレポートを提供するので、できるだけ基本アクティビティを使用することをお勧めします!)

顧客イベント:名前とデータを直接設定する顧客イベント
(項目ごとに最大50個の一意のパラメータしか設定できません.これらのパラメータを乱用すると、パラメータによって制限されたデータが失われる可能性があります)

// Predefined Events 사용 예) 아이템 디테일 페이지 접근시 호출
export const logViewItem = async (item: IItem) => {
  await analytics.logViewItem({
    items: [ItemSerializer(item)],
  });
};

// Custom Event 사용 예) 좋아요 클릭 시 호출
export const logLikeReview = async (
  content_type: string,
  content_id: string,
) => {
  await analytics.logEvent('like_review', {
    content_type,
    content_id,
  });
};

3️⃣
だからHookは何ですか?

Hookは、反応状態とライフサイクル機能を関数要素に関連付けることができ、クラスを必要とせずに反応中のすべての機能を使用することができます.(Hookはクラスで働いていません)

未実行のコード行を実行するたびに、反応コアが実行されるかどうかを決定します.そのため、実行したくない論理を書くたびに.

フックチェックロジック

ReactはElementのみを覚えており、hookは唯一を覚えていない.hookは種類と順序しか覚えていません.

// 이러면 안됨
items.forEach(() ⇒ {

const [liking, setLiking] = useState(false);

});

呼び出しのhook数が異なる場合はエラー、タイプが異なる場合はエラー

// 에러남
const {data} = useItem(id);

if(!data) {
	return <></>;
}

const [liking, setLiking] = useState(false);

どうしてHookが好きなの?

Hookでは、コンポーネントからステータスに関連する論理を抽象化し、独立したテストと論理再利用をサポートできます.

クラスのComponentDidMount、ComponentDidUpdate、およびComponentWillUnmountで、ライフサイクルメソッドに従って実行されるコード
Hookでは、構成部品を論理ベースの小さな関数に分割できます.
1つのhookでEvent listenerのバインドを同時に定義、バインド、および解除できます.

クラス構成部品を使用するよりも簡潔なコードを作成できます.

Hookがないのはどうして悪いのですか?
class構成部品を使用する場合、ステータス値は親構成部品から高次関数構成部品(HOC)またはプレゼンテーションpropsとして受信して使用し、ステータスコードを再使用します.この場合,コードは直感的な状態ではなくWrapper Hellに陥る.
Etc.
反応レンダリングの理解と最適化(With Hook)
反応はどうやって?
Refs,参考資料
朝代プロトコルブログ:Android Webビューの理解と最適化(Webview)
Firebase Analytics、BigQueryがなくて、どの程度することができますか?
React Native Firebase doc
React-Native Firebase Analytics設定のヒント!