React学習--JSX

Reactはコンポーネント化を容易にするためにHTML構造ページを構築する必要がある.Reactはどうやって操作しますか?答えは、Reactが仮想要素を作成して更新することにより、仮想DOM全体を管理することである.
仮想DOMとは何ですか?DOMの操作はオーバーヘッドが大きいため、頻繁にDOMを操作するとコードが維持されにくくなり、ReactはDOMツリーをJavaScriptオブジェクトツリー、すなわち仮想DOMに変換します.データが更新されるたびに、Reactは仮想DOMを再計算し、前回生成した仮想DOMと比較して、変化が発生した部分だけを一括更新する(一括更新の性能は一回の単独更新よりもはるかに良い).
仮想要素は何ですか?仮想要素は真実な元素のマッピングです.しかし、それらの作成と更新は全部メモリの中で行われています.本当にブラウザDOMツリーをレンダリングしません.仮想要素は二つの種類に分けられます.DOM要素とコンポーネント要素はそれぞれ対応しています.元のDOMとユーザーのカスタム要素(例えば、自分で定義できます.＜myDiv＞).
仮想要素の–DOM元素:
JavaScriptを使用してHTML要素を記述すると、これらの要素はJSONオブジェクト(すなわちNodeノード)として抽象化され得る.

<button class="btn btn-blue"> 
    <em>Confirmem>
button>

JSONオブジェクトに変換する場合:

{
    type: 'button', 
    props: {
        className: 'btn btn-blue', 
        children: [{
            type: 'em', 
            props: {
                children: 'Confirm' 
            }
        }] 
    }
}

このように、私たちはこのコードに基づいて、JSで作成された仮想DOM元素を最後に仮想DOMをブラウザ上の本当のDOMに変換することができます.
仮想要素の–コンポーネント要素(ユーザー定義要素)
上記のbutton要素については、個人化ボタンとして簡単に実装できます.

const ColorButton = ({ color, text }) => { 
    return {
         type: 'button',
         props: {
            className: `btn btn-${color}`, 
            children: {
                type: 'em', 
                props: {
                    children: text,
                },
             }, 
        },
    }; 
}

そして、ボタンの生成が必要な場合は、ColorButton({color:'blue', text:'Confirm'})を直接呼び出して作成することができる.
今、私達はブトンを発見しました.JSONオブジェクトColorButton({color:'blue', text:'Confirm'})もJSONオブジェクトに戻ります.それでは、MyButton()はブトンと同じ位置にあります.元素としても存在します.さらに、私たちはこのような書き方ができます.

{
    type: ColorButton, 
    props: {
        color: 'blue', 2
        children: 'Confirm' 
    }
}

「これもReactの核心思想の一つです.共通の表現方法があるので、要素を入れ子にしたり混ぜたりすることができます.
要素が幾重にもネストされ、パッケージされ、Reactコンポーネントが形成されました.最終的には、再帰的に完全なDOM元素ツリーを構築することができます.
そこで、ColorButtonをカプセル化し続けることもできます.

const DangerButton = ({ text }) => ({ 
    type: Button,
    props: {
         color: 'red', 4
        children: text 
    }
});

これらのすべては、ある新しい要素のサブノードとして機能することができる.

const DeleteAccount = () => ({ 
    type: 'div',
    props: {
        children: [
            {   
                type: 'p', 
                props: {
                children: 'Are you sure?', 
                }
            }, 
            {
                type: DangerButton, 
                props: {
                    children: 'Confirm', 
                },
            }, {
                type: Button, 
                props: {
                    color: 'blue',
                    children: 'Cancel', 
                },
            }], 
        }
});

これは二層だけを組み込んだ仮想要素がもうちょっと複雑になっていることを示しました.
そこで、JSX文法は私達のためにこの問題を解決しました.

const DeleteAccount = () => (  
    <div>
        <p>Are you sure?p> 
        <DangerButton>ConfirmDangerButton>  
        <Button color="blue">CancelButton>
    div> 
);

JSXはHTMLとJSを結合し、コンパイラで純粋なJSに変換した後、ブラウザで実行します.
基本文法:
元素の種類:DOM元素の頭文字小文字、コンポーネントの元素の頭文字は大文字です.
元素の属性:
JSXの仮想要素にはDOM要素とコンポーネント要素の両方に属性がある.ただし、DOM元素の属性:クラス／forはJSキーワードであるので、Reactは以下のように変換されています.

class -> className 
for -> htmlFor 

コンポーネント要素の属性はすべて完全にカスタマイズされた属性です.

// define
const Header = ({title, children}) => ( 
    <h3 title={title}>{children}h3>
);

// usage
<Header title="hello world">Hello worldHeader>

属性表現:属性の値を式で計算する必要がある場合は、二重引用符を大かっこで置換すればいいです.

const person = window.isLoggedIn ? window.name : ''} />;

JSX解析の方法は、出会ったからです.