フロントエンドフレームワークのreact_javascriptテクニックについての詳細な説明

概要:

最近、会社がアプリ内にネストしたアプリを作ることになり、ビューの開発に Facebook の React を使うことを検討しているので、ちょっと調べてみました。以下は私が開発中に遭遇した落とし穴です。お役に立てば幸いです。

プロジェクトアドレス: https://github.com/baixuexiyang/react
問題:https://github.com/baixuexiyang/react/issues

スターとフォークへようこそ!

反応の利点:

•任意の時点でアプリケーションがどうあるべきかを表現するだけで、基礎となるデータが変更されると、React がすべてのユーザー インターフェイスの更新を自動的に処理します。

•データが変更された後、React は概念的には「更新」ボタンをクリックするのと似ていますが、変更された部分のみが更新されます。

•React は、再利用可能なコンポーネントを構築し、コードの再利用、テスト、懸念事項の分離を容易にすることを目的としています。

注:

1. ロードされたコンポーネントの最初の文字を大文字にします。例:
2. 各コンポーネントのレンダリングの最外層にはラッピング要素

が必要です

3.this.props は変更できませんが、this.state は変更できます

4. ページの oclick イベントは iOS の Safari では機能しません。onClick={this.detail.bind(this, item)} は、jQuery のバインディング イベントなどの他のメソッドを使用する必要があります

5.文字列を HTML に変換します。危険なことに SetInnerHTML={{__html: ''}}

6.getInitialState: コンポーネントがマウントされる前に 1 回呼び出されます。戻り値は this.state の初期値として使用されます。

getDefaultProps: コンポーネント クラスの作成時に 1 回呼び出され、戻り値がキャッシュされます。親コンポーネントが props でキーを指定していない場合、ここで返されるオブジェクトの対応するプロパティは this.props にマージされます (プロパティを検出するために を使用します)。

このメソッドはインスタンスが作成される前に呼び出されるため、this.props に依存できません。さらに、getDefaultProps() によって返される複雑なオブジェクトは、インスタンスごとにコピーを持つのではなく、インスタンス間で共有されます。

コンポーネントのライフサイクル:

コンポーネントウィルマウント：

サーバーとクライアントは両方とも、最初のレンダリング実行の直前に 1 回だけ呼び出されます。

コンポーネントDidMount:

最初のレンダリング実行直後に一度呼び出され、クライアント側でのみ有効です (サーバー側では呼び出されません)。

コンポーネントWillReceiveProps:

コンポーネントが新しいプロパティを受け取るときに呼び出されます。このメソッドは、最初のレンダリング中には呼び出されません。

shouldComponentUpdate：

新しいプロパティまたは状態を受け取った後にレンダリング前に呼び出されます。このメソッドは、レンダリングの初期化時や、forceUpdate メソッドの使用時には呼び出されません。

新しい props と state によってコンポーネントが更新されないと判断された場合は、ここで false を返す必要があります。

コンポーネントウィル更新：

新しいプロパティまたは状態を受け取る直前に呼び出されます。このメソッドは、最初のレンダリング中には呼び出されません。

コンポーネントDidUpdate:

コンポーネントの更新が DOM に同期された直後に呼び出されます。このメソッドは、レンダリングの初期化時には呼び出されません。

コンポーネントウィルアンマウント：

コンポーネントが DOM から削除されるとすぐに呼び出されます。

概要:

React を使って開発すると、すべての HTML が js ファイルで記述されるため、開発はあまりスムーズではありません。 Chrome プラグインの推奨: React Developer Tools

React についてはいくつかの誤解がありますので、ここでまとめておきます。

React は完全な MVC フレームワークではありません。React でさえ、MVC 開発モデルを完全には認識していません。 React のサーバー側の Render 機能は、その中心的な出発点ではなく、単なる飾りと見なすことができます。実際、React の公式 Web サイトでは、サーバー側のアプリケーションについてはほとんど言及されていません。

React を Web コンポーネントと比較する人もいますが、この 2 つは完全に競合するわけではありません。React を使用して実際の Web コンポーネントを開発することはできます。

React は新しいテンプレート言語ではありません。JSX は単なる表現です。

上記はフロントエンド フレームワーク React に関するすべての知識です。気に入っていただければ幸いです。