React_html/css_WEB-ITnose を理解する-htmlチュートリアル-php.cn

コードは書かれるよりも読まれる方がはるかに多いということを覚えておいてください。コンポーネントの大規模なライブラリを構築し始めると、この明示性とモジュール性、そしてコードの再利用が理解できるでしょう。

良いコードの読み方を学ぶことは、忙しいコードを書くことよりもはるかに重要です。

優れたコードとは何でしょうか?すっきりクリア。また、明確で明確なコードを記述するにはどうすればよいでしょうか?明確なアイデア、明確なロジック、そして単純で曖昧ではないステートメントを持っている人は、自然に明確で明確なコードを書くことができ、そのコードは自然にモジュール化されて再利用可能になります。

HTML 仕様では、Web ドキュメントの構造をどのように確立すべきかについて説明します。プロダクトマネージャーが製品構造を設計するときに HTML 仕様も考慮に入れることができれば、その後の UI デザイナーからフロントエンドエンジニアまでの作業がはるかに容易になります。

データ指向では、一般的に、コンテンツが視聴者に効果的に伝わることを保証した後でのみ、コンテンツが形式を決定します。

まず、舞台裏でデータをモデル化し、内部データモデルをインターフェイスコンポーネントにマッピングします。

単一責任の原則、つまり、コンポーネントは 1 つのことだけを実行するのが理想的です。単一責任の原則 SRP、コンポーネントは 1 つのことだけを実行する必要があります。

階層

最小のコンポーネントから開始してビュー階層を構築し、入れ子関係を明確にし、ターミナルコンポーネントとグループ化されたコンテナコンポーネントを決定します。

まず React の一方向データフロー用の静的ドキュメントを作成し、props を使用してそれを実装します。

静的ドキュメントに基づいて、状態を使用して逆データフローを確立し、対話型ロジックを実装します。

状態要件、絶対最小限、DRY: 繰り返しを行わない、冗長性なし。

インタラクションのソースを見つけ、舞台裏のデータを変更する末端コンポーネントを見つけ、状態のレコード項目として変更を引き起こす基本的なデータを見つけます。他のデータを通じて計算できるものはすべて状態とみなされません。

状態の初期化場所は通常、この状態セットの影響を受けるすべてのコンポーネントの最も外側のコンテナコンポーネントにあります。

状態の初期化が完了したら、listen 処理関数を確立し、状態を監視して更新します。

React のプロセスでは、インタラクションによって生じたすべての表示変更が、端末コンポーネントから状態が配置されている外部コンポーネントに渡される必要があります。状態が更新された後、状態はコンポーネントから端末ディスプレイに戻されます。外側のコンポーネント。

https://facebook.github.io/react/docs/ Thinking-in-react.html

React の中核は、仮想 DOM と合成イベントです。仮想 DOM は、オブジェクトのセットを使用して JavaScript で仮想的に実装されたドキュメントオブジェクトモデルのセットとして理解できます。同様に、合成イベントは DOM イベントに対応します。

React ノード React 仮想 DOM ノード:

ReactElement

ReactText (文字列と数値)

ReactFragment (ReactNodes の配列)

仮想 DOM ツリーは ReactElement オブジェクトの属性を通じて実装されます。子ノードオブジェクトはすべて親ノードオブジェクトの属性値です。

ReactElement オブジェクトは、JavaScript における DOM 要素の仮想表現です。 ReactElement オブジェクトは軽量でステートレスで、作成後には不変です。

ReactElement オブジェクトの props 属性値は、キーと値のペアの形式のコレクションオブジェクトです。その一部は、DOM 要素の属性と属性値に対応します。最終的な HTML タグに表示されるカスタム属性名には、W3C 仕様と同じ要件があり、「data-」接頭辞が必要です。各 ReactElement オブジェクトが作成されると、React は data-reactid という名前のカスタム属性をその props に自動的に追加します。その値は、仮想 DOM 内のこの要素の一意の識別 ID です。

props オブジェクト内のすべての属性が 1 つずつ DOM 要素の属性として作成されるわけではありません。HTML 要素の属性や「data-」や「" の接頭辞など、W3C 仕様に準拠した属性名のみが作成されます。 aria-」が追加されます。属性はDOM要素タグに表示されます。 props オブジェクトには、ReactElement オブジェクトが所有する他の ReactElement オブジェクトのコレクションである Children 属性があります。この属性は、最終的な HTML タグには表示されません。

class と for は HTML 要素の属性名ですが、JavaScript の予約キーワードであるため、React はこれらを className と htmlFor に正しく変換して最終的な HTML に表示する必要があります。タグ。

props オブジェクトの style 属性の値も、キーと値のペアの形式のコレクションオブジェクトです。そのプロパティ名はすべての CSS プロパティをサポートしますが、キャメルケースの命名方法を使用する必要があり、最終的に React はそれを CSS 標準プロパティ名に正しく変換します。属性値の要件は CSS 仕様と一致しています。

ReactElement オブジェクトの ref 属性値はコールバック関数であり、関数の 1 つのパラメーターは ReactElement オブジェクトに対応するネイティブブラウザー DOM 要素です。

ReactElement オブジェクトを作成するには、React.createElement メソッドを使用します。

React.DOM オブジェクトには、特定の ReactElement オブジェクトを迅速に作成するための組み込みメソッドがあります。メソッド名は DOM HTML 要素名と同じです。たとえば、仮想 div 要素を作成するには、React.DOM.div() メソッドを使用します。

ReactElement オブジェクトのグループをバッチですばやく作成する必要がある場合、または異なるデータに基づいて異なる ReactElement オブジェクトを作成する必要がある場合は、ReactClass オブジェクトを使用する必要があります。 ReactClass オブジェクトに基づいて作成された ReactElement オブジェクトは、React Component コンポーネントとも呼ばれます。 React コンポーネントは、ReactElement オブジェクトの概念に基づいており、他の ReactElement オブジェクトだけでなく、これらのオブジェクトに関連するデータや動作も含めることができる ReactElement オブジェクトのカプセル化です。

ReactClass オブジェクトは、React コンポーネントコンストラクターを所有するラッパーです。そのプロトタイプオブジェクトは React.Component オブジェクトです。

ReactClass オブジェクトは、React.createClass メソッドを使用して作成できます。 ReactClass オブジェクトはコンストラクターを所有する単なるラッパーであるため、コンポーネントインスタンスの作成に new ReactClass を使用しないでください。 React.createElement メソッドを使用して、React コンポーネントの ReactElement オブジェクトを取得します。

クラスプログラミングに基づく糖衣構文が新しい ECMAscript 仕様に追加されました。 React では、この実装メソッドも提供しています。React.createClass メソッドを使用する代わりに、extends React.Component を使用して ReactClass オブジェクトを作成できます。

クラス構文シュガーに基づいて実装されたすべての ReactClass オブジェクトでは、属性メソッドがこれに自動的にバインドされないことに注意してください。自動バインドはありません。必要に応じて、これを ReactClass オブジェクトに明示的にバインドしてください。

React.createClass メソッドのパラメータはオブジェクトです。このオブジェクトには render という名前の属性が必要です。この属性値は関数である必要があり、他のオブジェクトを所有することができます。 ReactElement オブジェクト。

React.createElement メソッドのパラメーターの説明:

最初のパラメーター、HTML 要素名 HTML 要素名 (引用符で囲まれた文字列) または ReactClass オブジェクト (通常はこのオブジェクト変数名を指します) 、最初の文字が大文字になります);

2 番目のパラメーター (オプション)、プロパティプロパティコレクション (通常は、最初のパラメーターとして、キーと値のペアの形式のプロパティオブジェクト、またはこのオブジェクトを指す変数名)パラメーターによって作成された要素の属性は null として渡すことができます);

の後には、不特定の数のオプションのパラメーター、子要素、および 0 個以上の要素が続きます (すべて兄弟要素であり、親要素は最初のパラメータに従って作成された要素)。

HTML タグは、マークアップ内の要素の開始と終了を区切るために使用されます。タグには、要素の名前を示すタグ名が含まれます。

React の HTML 要素名。 DOM オブジェクトこのメソッドのパラメーターは、React.createElement メソッドの最初のパラメーターを削除するものであり、後続のパラメーター要件は同じです。

ReactElement オブジェクトを作成するもう 1 つの簡単な方法は、React.createFactory メソッドです。React.createFactory メソッドは、React.createElement メソッドの最初のパラメーターと同じ要件を持ち、ジェネレーター関数を返します。自動生成されたファクトリー関数。このジェネレーターは、React.DOM オブジェクトの HTML 要素名メソッドと同じ方法で使用されます。

ReactDOM オブジェクトは、仮想 DOM と実際の DOM を含む DOM を操作するために使用されます。 ReactElement オブジェクトまたはコンポーネントを取得したら、ReactDOM.render メソッドを使用してそれらを仮想 DOM と実際の DOM に追加する必要があります。

ReactDOM.render メソッドには 3 つのパラメーターがあり、1 つ目は ReactElement オブジェクト、2 つ目は DOM コンテナーノード、3 つ目は仮想要素に対応する DOM 要素が正常に作成された後のコールバック関数です。、オプションのパラメータ。

ReactDOM.render メソッドを使用する場合、必ずしも実際の DOM を操作する必要はありません。render メソッドは、受信した ReactElement が仮想 DOM に既に存在するかどうかを確認します。、違いはありますか？

ReactElement オブジェクトがパラメータとして ReactDOM.render メソッドに初めて渡されると、React はそのオブジェクトを仮想 DOM ツリーに追加し、対応するネイティブブラウザ DOM 要素を実際の DOM に作成します。次に、この DOM 要素への参照を返します。返される例外がありますが、これについては後で説明します。

注:

ReactDOM.render() は、渡された DOM コンテナノードのコンテンツを管理します。最初の呼び出しで、このコンテナノード内のすべての既存の DOM 要素が置き換えられます。後続の呼び出しでは、さまざまな部分が比較および更新されます。

ReactDOM.render() はコンテナノード自体を変更せず、コンテナノードの子ノードのみを変更します。将来的には、既存の子ノードには触れずに、既存の子ノードの後に新しい DOM 要素を追加するだけで済むようになる可能性があります。

ReactElement オブジェクトに対応するネイティブブラウザー DOM 要素の HTML マークアップ文字列を取得したいだけの場合は、ReactDOMServer オブジェクトを使用できます。

一般的な慣例として、コンストラクターオブジェクト Constructors の変数名の最初の文字は大文字になります。インスタンスの変数名。最初の文字は小文字です。デモコード:

var MyComponentClass = React.createClass({/*...*/});var myComponentElement = React.createElement(MyComponentClass);ReactDOM.render(myComponentElement, document.getElementById('example'));

ログイン後にコピー

React.createElement メソッドが使用されているすべての場所を JSX フォームに置き換えることができます。たとえば、前のデモコード:

var myComponentElement = React.createElement(MyComponentClass);//替换成JSXvar myComponentElement =    ;

ログイン後にコピー

JSX は、定義されたセマンティクスを持たない ECMAScript の XML に似た構文拡張です。XML を記述できれば、JSX を記述することができます。

由于JSX最终会被React转换成JavaScript代码执行，所以不要在JSX中使用JavaScript的保留关键字Reserved Words作为标签名和属性名，ReactClass的标签名也不要使用HTML标签名，也就是在创建ReactClass的时候，ReactClass的变量名就不要使用JavaScript Reserved Words和HTML Element’s Name。

因为ReactClass变量名首字母大写，自然对应的JSX自定义标签名也一样，而用React.createElement方法创建对应HTML元素的虚拟HTML元素时，就是使用HTML元素名，所以对应的JSX标签名也直接使用HTML标签名。

在JSX中可以直接写HTML Entities，转义字符串（Escape Sequence）也称字符实体(Character Entity)。需要注意的是如果是在花括号里则会按JavaScript 字符串处理。

组件的displayName属性是用来调试的，如果没有赋值，在JSX中会自动赋一个值。

The JSX expression always evaluates to a ReactElement. JSX表达式的值是一个ReactElement。和React.createElement方法的返回值一样，JSX编译后就是一堆React.createElement方法。

Namespaced Components命名空间组件。ReactClass对象的属性可以是另一个ReactClass，这个ReactClass属性被认为是ReactClass对象的子组件。可以通过属性访问器的形式作为React.createElement方法第二个参数后面的不定参数使用。同理可以用于JSX的标签名。

在JSX中使用JavaScript，用花括号把JavaScript代码括起来就可以，但是并不是所有JavaScript代码都能在转换后有效执行。

Attribute Expressions，用于React.createElement方法第二个参数的属性对象里，key冒号后可以使用表达式。在JSX中，属性名的等号后面用花括号把表达式括起来。

Boolean Attributes ，JSX基本实现了HTML的语法规则，所以属性值是Boolean类型的情况，规则和HTML一样。如果要显式赋值，请在属性名的等号后面用花括号把Boolean值括起来。

Child Expressions，在React.createElement方法的最后的不定数参数，可以使用值是ReactElement的表达式。在JSX中用花括号把表达式括起来。

Comments，在JSX中用花括号把注释括起来。

React.createElement方法第二个参数的属性对象，可以在方法调用前，先创建好这个对象，并作为参数传入。在JSX中，可也在写属性的地方使用这个对象，并且改变对象的数据，需要JavaScript代码，比如使用spread operator，因为扩展运算符只有用于可遍历对象才有效，说明props是个可遍历对象iterable object。示例代码：

var MyComponentClass = React.createClass({/*...*/});var props = { foo: 'default' };var myComponentElement =    ;console.log(myComponentElement.props.foo); // 'override'

ログイン後にコピー

在ReactClass对象中定义一个名为getDefaultProps的方法，可以给这个组件配置默认的props数据。

React.PropTypes对象输出一系列验证器，它能用来确保组件收到的props数据是通过了校验的。当props对象的某个属性不能通过验证器时，JavaScript console将显示一个警告。React.PropTypes对象在ReactClass对象中定义，它是ReactClass对象的一个名为propTypes的属性。

如果是基于类syntactic sugar句法糖实现的ReactClass对象，在类声明后，直接使用类属性的方式给defaultProps和propTypes属性赋值即可。

Interactivity and Dynamic UIs，交互和动态UI的实现。

最基本的实现，首先为ReactClass对象实现一个名为getInitialState方法，方法返回值必须是一个键值对形式的集合对象。ReactClass对象的其他属性方法里面，可以通过this.state访问getInitialState方法创建的对象。render方法里面可以根据state的数据来创建ReactElement，这就实现了Dynamic虚拟元素，进一步也就实现了Dynamic UIs。当然只有state数据是动态的，元素才是动态。改变state的数据，可以在ReactClass对象里定义操作state数据的函数，函数内调用this.setState方法，这个函数可以是服务器驱动，或者用户驱动。用户驱动则就实现了交互。一般是把虚拟元素的交互行为属性赋值为操作数据的函数的引用，React并没有把函数绑定到最终实际的DOM元素上，所有的函数管理都是在React内完成。

注意如果是基于类syntactic sugar句法糖实现的ReactClass对象，不用写getDefaultProps的方法，直接在constructor构造函数中，使用this.state赋值即可。

this.state属性对外是只读，不可写的。只能通过setState方法Performs a shallow merge of nextState into current state.而且使用setState方法加入state新数据，也不是即时的，而是加入缓存中，只有当访问this.state时用到了新加入的数据时，才会正式并入。

状態データを持たないコンポーネントは、ステートレスコンポーネントとも呼ばれます。一般に、状態に値を割り当てるコンテナコンポーネントを除いて、それに含まれるコンポーネントは、this.state を通じて直接データを取得するのではなく、状態データを所有するコンテナコンポーネントによって渡される props オブジェクトを通じてデータを取得する必要があります。データを取得します。この関係は所有者と所有者の関係と呼ばれ、このデータ転送は所有者から所有者へのデータフローと呼ばれます。

ステートレスコンポーネントの場合、ReactClass オブジェクトはステートレス関数と呼ばれる通常の関数を通じて作成できます。通常はアロー関数の形式が使用されます。

ステートレスコンポーネントの場合、ReactDOM.render メソッドは null を返します。 ReactDOM.render メソッドに対応して、ReactDOM.unmountComponentAtNode メソッドはステートフルコンポーネントを削除するために使用されます。ステートレスコンポーネントに対応するネイティブブラウザ DOM 要素を返す ReactDOM.render メソッドに加えて、ReactDOM.findDOMNode メソッドを通じて取得することもできます。

ステートレスコンポーネントが対応する DOM 要素を取得したい場合、ref 属性のみを使用できます。

React メカニズムでは、すべての DOM 要素の表示は、対応する仮想 DOM 要素をレンダリングすることによって実現される必要があり、ReactElement の表示データはコンテナコンポーネントの props オブジェクトから取得されます。仮想フォーム要素の props オブジェクトの value 属性に null 以外の値を割り当てることで、React は DOM のフォームテキスト要素内のユーザー入力の表示を制御します。 React によって制御が引き継がれるコンポーネントは、制御対象コンポーネントと呼ばれます。制御を引き継ぐ方法は、DOM ネイティブイベント nativeEvent を React の SyntheticEvent に委任することです。

入力とテキストエリアは、DOM の組み込み oninput イベントハンドラーを介して行われます。チェックボックスとラジオ入力は、DOM の組み込みクリックイベントハンドラーを介してアクセスされます。

React に DOM フォームのテキスト要素を制御させたくない場合は、値を割り当てないか、値を null に割り当てます。このタイプのコンポーネントは非制御コンポーネントと呼ばれます。フォームにデフォルト値を与えたいが、それを制御したくない場合は、props オブジェクトのdefaultValue プロパティまたはdefaultChecked プロパティに値を割り当てることができます。

コンポーネントのライフサイクルコンポーネントのライフサイクルの概念は、ReactDOM.render メソッドと仮想 DOM に依存します。コンポーネントのライフサイクルには 3 つの重要な時点があります。1 つ目は誕生日のマウント、2 つ目はアクティビティ日の更新、3 つ目は死亡日のアンマウントです。

マウントでは、コンポーネントが初めて ReactDOM.render メソッドに渡されると、仮想および実 DOM ツリーのノードになります。この時点で、コンポーネントのいくつかのメソッドが順番に呼び出されます。状態コンポーネントの場合は、getInitialState(): object が最初に呼び出され、次に、componentWillMount() とcomponentDidMount() が呼び出されます。

更新。状態コンポーネントでのみ使用できる時点。このイベントは、コンポーネントの this.setState() メソッドが呼び出されたとき、またはコンポーネントが ReactDOM.render メソッドに再度渡されたときにトリガーされます。これらのメソッドは、componentWillReceiveProps(object nextProps) shouldComponentUpdate(object nextProps, object nextState): boolean componentWillUpdate(object nextProps, object nextState) componentDidUpdate(object prevProps, object prevState) の順序で呼び出すことができます。複合コンポーネントの場合は、component.forceUpdate() も呼び出されます。

アンマウント。コンポーネントが DOM から削除されて破棄される前に、componentWillUnmount() を呼び出します。

異なるコンポーネントが一部の機能を共有できるようにするため。 ReactClass オブジェクトに mixins という名前の属性を定義します。値は配列です。配列内のデータは、特定のメソッドを持つオブジェクトです。 ReactClass オブジェクトの mixins 配列に複数の関数オブジェクトがあり、それらが同じライフサイクルメソッドを定義している場合、それらはすべて配列の順序で実行されます。クラス構文シュガーに基づいて実装された ReactClass オブジェクトはミックスインをサポートできないことに注意してください。

React プラグインはツールモジュールのコレクションです。

React アニメーションプラグイン require('react-addons-css-transition-group') 自体はアニメーションを実装しませんが、これはクラス名を管理するための一連のメソッドを提供します。特定のコンポーネントにどの CSS クラス名をいつ追加するか、および他の CSS クラス名を削除または置換するまでにその名前を保持する期間を指定できます。

React 双方向バインディングプラグイン require('react-addons-linked-state-mixin')、ReactLink は単なる薄いラッパーであり、onChange/setState() パターンに基づいて実装されています。ミックスイン機能では、LinkedStateMixin オブジェクトに linkState メソッドがあります。

React デバッグツールプラグイン require('react-addons-test-utils') の ReactTestUtils.Simulate オブジェクトは、テスト用の DOM 要素イベントのトリガーをシミュレートできるため、ブラウザとユーザーのインタラクションイベント。ツールオブジェクトもたくさんあります。。。

ReactFragment プラグイン require('react-addons-create-fragment') の機能は、DOM のアンマウントおよび再マウントイベントをトリガーせずに、マウントされているコンポーネントを調整することです。読み込まれたコンポーネントは、createFragment と同様のメソッドを通じてグループ化されますが、パラメーターはキーと値の形式のオブジェクトですが、最終的には配列の形式で保存されます。配列 createFragment(object Children) 。 JSX は x:frag タグ形式を使用します。

Flux と Redux については、MVC フレームワークの使用経験があると理解しやすいでしょう。

react Web サイトの乱雑で初歩的なドキュメントからは、react が急速な開発の初期段階にあることがわかります。