Reactコンポーネント-ベース

コンポーネント
コンポーネントは、ユーザーインタフェースを独立した多重化可能なコンポーネントに分割し、各コンポーネントを個別に設計することができます.

コンポーネントの作成のメリット:

多重化、保守性の向上

コンポーネントの組み合わせはUIインタフェースを構成し、

の削除と置換をより容易にする.

個々のコンポーネント機能のテストを容易にする

Reactコンポーネントの分類

関数コンポーネント

function createE(props) {
    return <h2><span>{props.title}</span></h2>
}
ReactDOM.render(<div>{createE({title:'Hello React!'})}</div>, document.getElementById('root'));

関数コンポーネントラベル化

/**
 * 
 *      ：       
 */
function CreateE(props) {
    return <h2><span>{props.title}</span></h2>
}
ReactDOM.render(<div><CreateE title='123'/></div>, document.getElementById('root'));

クラスコンポーネント

/**
 *    
 */
class Test {
    render() {
        return  <h2><span>   </span></h2>
    }
}
ReactDOM.render(<div>{new Test().render()}</div>, document.getElementById('root'));

クラスコンポーネントのラベル化

class Test extends React.Component{
    render() {
        return  <h2><span>   -   -     React.Component</span></h2>
    }
}
ReactDOM.render(<div><Test/></div>, document.getElementById('root'));

クラスコンポーネントのラベル化伝達値

/**
 *    -       
 */
class Test1 extends React.Component{
    render() {
        //       ，   this.props
        return  <h2><span>{this.props.title}--{this.props.dd}</span></h2>
    }
}
ReactDOM.render(<div><Test1 title="  title" dd="  dd"/></div>, document.getElementById('root'));

関数式コンポーネントVSクラスコンポーネント

関数式コンポーネントは比較的軽く、入力データ出力はUI情報表示を表示し、状態がなく、ライフサイクル

がない.

クラスのコンポーネントは比較的重く、独自の状態があり、ライフサイクル

があることを示すために使用される.