React学習メモ(2) JSX_html/css_WEB-ITnoseを理解する-htmlチュートリアル-php.cn

Abstract

JSX (JavaScriptXML) は、JavaScript で宣言型 XML を記述する方法を提供します。JSX を使用すると、単純な JSX 構文変換が可能になります。

はじめに

JSX は、JavaScript コードで XML を直接記述するようなものです。React では、JSX の使用を公式に推奨しています。純粋な JavaScript コードが好きなら問題ありませんが、JSX を使用すると次のような利点があります:

はネイティブ JavaScript です。直感的です。

は、よりセマンティックでわかりやすいタグを提供します。

は、HTML 要素ツリーを定義するために使い慣れた構文を使用できます。 🎜>
HTML タグとこれらのタグを生成するコードはいつでも制御できます。

最初のコンポーネントを定義します

コンポーネントの簡単な理解は次のとおりです。データを理解し、メソッドを単純にカプセル化する目的は、関数をモジュール化することです。 React では、
コンポーネントは、表示ロジックを処理するテンプレートや

として使用されるのではなく、関心を分離するために使用されます。React を使用してアプリケーションを開発するプロセスでは、HTML タグとコードの間にギャップが生じることがよくあります。これらのタグを生成するコードは、密接な内部接続により、実際にはコンポーネントとして理解できます。

最初のコンポーネントを定義する簡単なデモを見てみましょう。前のゲームルールに従って、「HelloWorld」というエレガントで大げさな名前を付けます (React インストールパッケージは公式 Web サイトにアクセスしてダウンロードできます)。 ):

上記の例に関するいくつかの注意点

<!DOCTYPE html><html>     <head>         <title>Hello React</title>         <!--React核心库-->        <script src="build/react.js"></script>         <!--react-dom.js提供与DOM相关功能-->        <script src="build/react-dom.js"></script>         <!--browser.js将 JSX 语法转为 JavaScript 语法-->        <script src="build/browser.min.js">/script>    </head>     <body>         <HelloWorld>Hello World!</HelloWorld>        <!--为了把 JSX 转成标准的 JavaScript，我们用 `<script type="text/babel">` 标签，然后通过Babel转换成在浏览器中真正执行的内容-->        <script type="text/babel">            // 定义组件HelloWorld           var HelloWorld = React.createClass({                render : function(){                    return (                        <div>                            <h1>this.props.children</h1>                        </div>                    );                }            })        </script>     </body></html>

ログイン後にコピー

React のコンポーネント名は先頭が大文字である必要があります。

React のコンポーネントにはトップレベルのタグを 1 つだけ含めることができます。そうでないとエラーが報告されます。

JSX は 2 つの中括弧 {...} の間のコンテンツを動的値としてレンダリングします。括弧は、コンテンツを評価してタグ内の複数のノードとしてレンダリングする JavaScript コンテキストを示します。

this.props.children は、開始タグと終了タグを保存するコンポーネントの特別なプロパティです。上記の例では、間のすべての子ノード this.props.children = ["Hello World!"];

上記のコードが JSX 構文を使用しない場合は、次のように記述されます。

JSX を使用するかどうかに関係なく、HelloWorld コンポーネントの最終的なページレンダリング結果は、以下に示すように同じです。

JSX と JSX の違いは何ですか? HTML

...// 定义组件HelloWorldvar HelloWorld = React.createClass({displayName:"HelloWorld ",    render : function(){        return (             React.createElement("div",null);             React.createElement("h2",null,this.props.children);           );    }})...

ログイン後にコピー

" この仕様 (JSX) は、XML または HTML 仕様に準拠しようとするものではありません。JSX は ECMAScript 機能として設計されています。人々が JSX が XML に似ていると考えるという事実については、それは単に人々がそう思っているだけです。 XML の方がよく知られています。" - 上。内容は http://facebook.github.io/jsx/

<div>    <h1>Hello World!</h1></div>

ログイン後にコピー

から引用しています。ここから、JSX が HTML とまったく同じであることがわかります。次に、それらの主な違いを見てください。

属性

HTML では、このメソッドのサポートに基づいて、タグの属性を動的に設定することもサポートしています。 ..} 前回のデモでは、属性値を JS 変数または関数として定義できます。以下に示すように:

React によるコンポーネントのレンダリングのプロセス中に、上で定義した変数と関数が評価され、最終的に生成された DOM 構造はこの新しい状態を反映します。

非 DOM 属性

<!--在HTML中标签属性示例--><div id="demo" class="myStyle"></div><!--在JSX中标签属性示例-->var demoId = this.props.id;var demoClass = "myStyle";function getName(){    ...}<div id={demoId} name={this.getName()} className={demoClass}></div>

ログイン後にコピー

次の属性は JSX にのみ存在します。

key: コンポーネントを一意に識別するために使用されるオプションの一意の識別子。 🎜>

ref: 親コンポーネントがレンダリングの外部で子コンポーネントへの参照を維持できるようにします。

dangerouslySetInnerHtml: 主に DOM 文字列ライブラリ統合を生成できるように、純粋な HTML 文字列を挿入する機能を提供します。。

これらの特別な属性の機能を詳しく見てみましょう。

キー
プログラムの実行中に、ユーザーとアプリケーション間の対話により、コンポーネントツリー内のコンポーネントの位置が変更される可能性が最も高い例は次のとおりです。リストにレコードを追加したり、削除したりする操作です。もちろん、この場合、コンポーネントを破棄して再作成する必要はないかもしれません。

コンポーネントに一意の識別子を設定し、レンダリングサイクル全体を通じて一貫性を保つことにより、React はどのコンポーネントを再利用するか、コンポーネントを破棄して再作成するかをインテリジェントに決定して、パフォーマンスを向上させるための不必要な再レンダリングを回避します。

リファレンス (ref) JSX では、属性に目的の参照名を設定することで参照を定義できます。

これで、コンポーネント内のどこでもこの参照を使用できるようになります。参照によって取得されたオブジェクトは、

サポートインスタンスと呼ばれます。これは実際の DOM ではなく、必要に応じて React によって作成される記述オブジェクトです。 this.refs.theInput.getDomNode() を通じて実際の DOM ノードにアクセスできます。

设置原始的HTMLdangerouslySetInnerHTML—— 顾名思义，从属性名当中就能看出来，以此来警告它的值（一个对象而不是字符串）应该被用来表明净化后的数据。在彻底的理解安全问题后果并正确地净化数据之后，生成只包含唯一 key __html 的对象，并且对象的值是净化后的数据，示例如下：

function createMarkup() {      return {__html: 'First &middot; Second'}; };<div dangerouslySetInnerHTML={createMarkup()} />

ログイン後にコピー

这么做的意义在于，当你不是有意地使用

时候，它并不会被渲染，因为 getUsername() 返回的格式是字符串而不是一个{__html: ''} 对象。{__html:...} 背后的目的是表明它会被当成 "type/taint" 类型处理。这种包裹对象，可以通过方法调用返回净化后的数据，随后这种标记过的数据可以被传递给dangerouslySetInnerHTML。基于这种原因，我们不推荐写这种形式的代码：

这个功能主要被用来与 DOM 字符串操作类库一起使用，所以提供的 HTML 必须要格式清晰（例如：传递 XML 校验）

注释

由于JSX本质上就是JavaScript，因此也支持JavaScript的注释方式，在JSX中可以用以下两种方式添加注释：

当做一个元素的子节点；

内联在元素的属性中；

示例如下：

// 作为一个元素的子节点<div>{/*多行注释*/}<h1>This is a h1 tag.</h1></div>// 内联在元素的属性中<div><h1/* * 多行注释 */ > 多行注释  </h1></div><div><h1//单行注释 >单行注释</h1></div>

ログイン後にコピー

特殊属性

由于JSX会转化为JavaScript函数，所以有些关键词我们不可以使用，比如for和class。

这两个属性分别可以用htmlFor和className替换，参考如下示例：

<label htmlFor="name" ...><input calssName={classes} ...>

ログイン後にコピー

样式

React把所有的内联样式都规范化为驼峰形式，同样类似于JavaScript中DOM的style属性，要给组件添加自定义属性，如下：

var styles = {    width:100px;    height:100px;}React.renderComponent({<div style={styles}>...</div>,node})

ログイン後にコピー

参考

【1】《React引领未来的用户界面开发框架》【2】 React中文官网