React学習ノート(二)--JSXの理解

6605 ワード
要約
JSX(JavaScripptXML)はJavaScriptに声明式のXMLを作成する方法を提供しています.JSXを使ってコンポーネントの可読性を高められます.Reactは簡単なJSX文法変換を許可します.
概要
JSX像はJavaScriptコードの中で直接XMLの文法を書いています.XMLタグはJSX変換ツールによって純粋なJavaScriptコードに変換されます.React公式推奨はJSXを使っています.これは個人の習慣です.もし純粋なJavaScriptコードが好きなら、JSXを使うだけでもいいです.
  • は元のJavaScriptです.
  • プログラム構造はより直感的になりやすい.
  • は、より意味的で分かりやすいラベルを提供する.
  • React Elementの作成過程を抽象化しました.
  • は、おなじみの構文を使用してHTMLエレメントツリーを定義することができる.
  • は、いつでもHTMLタグ及びこれらのラベルを生成するコードを把握することができる.
    • 最初のコンポーネントを定義
    簡単にコンポーネントを理解するということは、データと方法を簡単にパッケージ化することです.目的はモジュール化機能です.Reactでは、コンポーネントは、テンプレートまたは処理表示ロジックとしてではなく、注目点を分離するために使用され、Reactを使用してアプリケーションを開発する際には、HTMLタグとこれらのラベルを生成するコードとの間に内在する緊密な関連がありますが、このブロックコードはコンポーネントとして理解されます.
    次に簡単なDEMOを見て、私達の最初のコンポーネントを定義します.これまでのゲームルールに従って、上品でよく響く名前を付けます.
    
 
     
        Hello React 
        
         
        
         
        
        /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>
                    );
                }
            })
    上の例の何時について説明しますか?
  • Reactのコンポーネント名は大文字で始まる必要があります.
  • Reactのコンポーネントはトップレベルのラベルしか含まれていません.そうでないとエラーが発生します.
  • JSXは、2つの括弧の間のコンテンツ{...}を動的値としてレンダリングし、括弧は、JavaScriptコンテキスト環境を指定し、コンテンツを値を求めてラベルのいくつかのノードにレンダリングする.
  • this.props.childrenはコンポーネントの特殊な属性であり、開始ラベルと終了ラベルの間のすべてのサブノードを保存しています.上記の例では、this.props.children=［Hello World!］
    • 上記のコードがJSX文法を使わない場合、次のように表記されます.
    ...
//     HelloWorld
var HelloWorld = React.createClass({displayName:"HelloWorld ",
    render : function(){
        return (
             React.createElement("div",null);
             React.createElement("h2",null,this.props.children);
           );
    }
})
...
    JSXを使わないにかかわらず、ハロルドコンポーネントの最終ページのレンダリング結果は以下の通りです.
    
    
    Hello World!
    JSXとHTMLの違いは何ですか?
    この仕様(JSX)はXMLやHTML仕様に準拠することを試みていません.JSXはECMAScript特性として設計されています.JSX像XMLという事実は、皆さんがXMLに詳しいからです.http://facebook.github.io/jsx/
    ここからJSXはHTMLのようなものであることが分かります.これから彼らの間の重要な違いを見てみます.
    属性
    HTMLではインライン接続でラベルの属性を設定しがちですが、JSXはこのような方式をサポートした上で、動的な設定ラベルの属性をサポートしています.具体的な実現形態は前のDEMOの{...}のように、属性値をJS変数または関数と定義できます.以下の通りです
    

    


var demoId = this.props.id;
var demoClass = "myStyle";
function getName(){
    ...
}

    在React渲染组件的过程中，我们上面定义的变量和函数会被求值，最终生成的DOM结构会反映出这个新的状态。

    非DOM属性

    下列属性只在JSX中存在：

    • key：可选的唯一标示符，用来唯一的标识一个组件；
    • ref ：允许父组件在render之外保持对子组件的一个引用；
    • dangerouslySetInnerHtml：提供插入纯 HTML 字符串的功能，主要为了能和生成 DOM 字符串的库整合。

    接下来详细看一下这几个特殊属性的作用。

    键（key）
    在程序运行过程中，由于用户与应用间的交互等原因，一个组件在组件树中的位置很有可能发生改变，最常见的例子就是某列表记录的增、删操作。当然这种情形下组件可能并不需要被销毁并重新创建。

    通过给组件设置一个唯一的标识，且保证它在一个渲染周期中保持一致，这样React就能智能的决定该重用哪一个组件，或者销毁并重新创建一个组件，避免不必要的重新渲染，得到性能的提升。

    引用（ref）
    在JSX中可以通过在属性中设置期望的引用名来定义一个引用。

    var App = React.createClass({ 
    getInitialState: function() { 
        return {userInput: ''}; 
    }, 
    handleChange: function(e) { 
        this.setState({userInput: e.target.value}); 
    }, 
    clearAndFocusInput: function() { 
        //      
        this.setState({userInput: ''}, 
        function() { 
            //                ，        
            this.refs.theInput.getDOMNode().focus(); 
        }); 
    }, 
    render: function() { 
    return ( 
        
     
           
     
                 ！  ！！  ！！！
          
     
           
        
     
        ); 
     } 
});
    この引用はコンポーネントのどこにでも使えます.参照によって得られたこのオブジェクトをサポートインスタンスと呼ぶ.彼は本当のDOMではなく、Reactが必要に応じて作成した記述対象です.this.refs.theInput.getDomNode()を介して本当のDOMノードにアクセスできます.
    オリジナルのHTML dangerouslySetInnersを設定します.名前の通り、属性名からもわかるように、その値(文字列ではなく対象)を警告します.浄化後のデータを示すために使われるべきです.安全問題の結果を徹底的に理解し、正確にデータを浄化した後、唯一のkey __htmlだけを含む対象を生成し、対象の値は浄化後のデータである.
    function createMarkup() { 
     return {__html: 'First · Second'};
 };

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

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

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

    注释

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

    • 当做一个元素的子节点；
    • 内联在元素的属性中；

    示例如下：

    //           

    
{/*    */}

    This is a h1 tag.
    

    

//
    特殊属性
    JSXはJavaScript関数に変換されるので、一部のキーワードはforとclassのように使えません.
    これらの2つの属性は、以下の例を参照して、htmlForおよびclassNameに置き換えられてもよい.
    スタイル
    Reactはすべてのインラインをラクダの形に標準化し、JavaScriptのDOMのスタイルと同様に、コンポーネントにカスタム属性を追加します.
    var styles = {
    width:100px;
    height:100px;
}

React.renderComponent({
    ...
    ,node})
    参照
    【1】「Reactが未来をリードするユーザーインターフェース開発フレーム」【2】React中国語公式サイト
    2018-11-08