Reactインタフェーススタイル設計

私たちがプログラムの基本的な機能を完成した後、プログラムのインタフェースを磨かないと、すっぴんすぎるインタフェースは、ユーザーに魅力を生み出しません.ウェブアプリケーションにとって、インタフェースを美化するための技術は、ずっとCSSであり、CSSは良い技術であり、インタフェースの美化とプログラムの機能論理を良好に分離することができる.特にその選択サブ機能は,開発者に特定のコントロールを美化させることができる.
しかしReactの枠組みの下で,我々はCSSを用いてインタフェースを設計し続けることができず,これはReactの設計思想によって決定された.Reactの核の新しい考え方は、各コントロールを高度に再利用可能な独立した個体にすることであり、コントロールのインタフェース設計ロジックとその機能ロジックを統合しなければならない.
従来の論理では,コントロールの機能論理はjsによって記述され,コントロールのレンダリングインタフェースはcssによって担当され,両者は分離されている.ではReactはどのように彼らを結合し、同時に論理的な結合度をできるだけ低下させることができるのでしょうか.実はReactはCSSを使ってインタフェースを設計することを拒否していません.まず、私たちがよく知っているcssから、徐々にReactのインタフェースの設計方式に移行します.
まずディレクトリの下にstyleという空白のファイルを新規作成します.html、それからプログラムの基本フレームワークコードを完成します
1,まずcssを用いてインタフェース要素を設計する

に、インタフェースにいくつかの を します.

    var Letter  =   React.createClass({
         render:function()  {
             return (
                 <div>
                    {this.props.children}
                 </div>
                 );
         }
    });
    var destination = document.querySelector("#container");
    ReactDOM.render(
         <div>
            <Letter>T</Letter>
            <Letter>Y</Letter>
            <Letter>L</Letter>
            <Letter>E</Letter>
            <Letter>R</Letter>
         </div>,
         destination)

コードでは、まずLetterコンポーネントを作成します.コンポーネントでは、childrenという属性を直接使用しています.次のコードでは、Letterコンポーネントを使用するとき、ラベルにT、Y、L、E、Rというアルファベットが挟まれています.コンポーネントラベルに挟まれた要素は、コンポーネントの子供、つまりthisに対応しています.props.children.
cssを用いて,インタフェースに表示されるいくつかのアルファベットを化粧する.

div div div {
     padding: 10px;
     margin: 10px;
     background-color: #ffde00;
     display:   inline-block;
     color: #333;
     display:   inline-block;
     font-family:   monospace;
     font-size: 32px;
     text-align:    center;
}

この方法は,我々のインタフェースの組合せ間の階層が深い場合,エラーが発生しやすく,コードロジックのメンテナンスが困難であることがわかる.良い方法は、クラス名で選択子を決定することです.コードは次のとおりです.

.letter {
     padding:   10px;
     margin:    10px;
     background-color:  #ffde00;
     display:   inline-block;
     color: #333;
     display:   inline-block;
     font-family:   monospace;
     font-size: 32px;
     text-align:    center;
}
var Letter  =   React.createClass({
     render:function()  {
         return (
             

                {this.props.children}
             
            );
    }
});

次にreactでインタフェースを修飾する方法を見てみましょう
Reactのコンポーネント化の原則に従って、コントロールのインタフェースロジックとビジネスロジックは、一緒に置く必要があります.これにより,cssで要素インタフェースを設計する方法は適用されなくなった.Reactのやり方は、インタフェースの設計ロジックをオブジェクトにし、コンポーネントの内部に置くことです.コードは以下の通りです.

var Letter  =   React.createClass({
     render:function() {
         var letterStyle = {
             padding:10,
             margin:10,
             backgroundColor:"#ffde00",
             color: "#333",
             display: "inline-block",
             fontFamily: "monospace",
             fontSize: 32,
             textAlign: "center"
         };
         return (
             

                {this.props.children}
             
            );
     }
});

元のcssコード論理をjson形式のjsオブジェクトに変換した.コンポーネントのjsxコードではstyleキーワードを用いて,インタフェース設計ロジックによって形成されるオブジェクトを導入する.コンポーネントにインタフェースロジックを設定する場合は、1は、数値が大きい場合、px接尾辞を無視できる点に注意してください.たとえばpadding,margin,fontSizeなどの属性の値を指定する場合、数値の後に接尾辞を追加する必要はありません.つまり本来cssではpxで終わる数値が必要であり,Reactコンポーネントではpxはすべて取り除くことができる.しかし、他の数値は、pxで終わらない場合、関連接尾辞を保持する必要があります.
次に、コンポーネントスタイルの設計をより柔軟にし、コンポーネントの背景色のパラメータ化を実現する方法を見てみましょう.
現在、私たちのアルファベットの背景色は黄色に書かれていますが、この背景色がいつでも変化すれば、かなりクールな感じがします.コンポーネントのプロパティメカニズムを使用して、コードを次のように変更します.

var Letter  =   React.createClass({
     render:function()  {
         var letterStyle    =   {
                padding:   10,
                margin: 10,
                backgroundColor:this.props.bgcolor
                color:  "#333",
                display:    "inline-block",
                fontFamily: "monospace",
                fontSize:   32,
                textAlign:  "center"
            };
        return (
             

                {this.props.children}
             
             );
     }
});
var destination =   document.querySelector("#container");
ReactDOM.render(
     

        T
        Y
        L
        E
        R
     
,
     destination
 );

結論:
従来の開発方法は,html,js,cssに業務論理,インタフェース設計をそれぞれ分布させることであり,この手法は簡単なウェブページ応用を開発する際に可能である.しかし、複雑な再利用可能なコンポーネントを開発する必要がある場合、従来の方法は適切ではありません.従来の方法はビジネスロジックとインタフェース設計を分離し、コンポーネント化設計はすべての関連ロジックを統合する必要があります.今日のトレンドは、Webアプリケーションがますます複雑になり、機能もますます強くなり、Reactに依存する設計開発方法が将来のWebアプリケーション開発の主流になることです.従来のビジネスロジックとインタフェース設計ロジックが互いに分離されているやり方は、現在のウェブページの応用がますます複雑になり、機能もますます強くなる傾向とは一致しないはずだ.