Reactに挑戦してみる 16

概要

Reactに挑戦してみる16。アドオン使ってみる。

参考書籍

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

アドオンを使ってみる

html

      <script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-with-addons.js"></script>

のような感じで、addon込みのreactを読み込む設定にするだけ。

addon.js

// PerfアドオンをPerfとして代入する
var Perf = React.addons.Perf;

var tableColumns = ['名前', '地域', '番号'];

var tableData = [
    {id: 1, name: '山田太郎', area: '東京都港区', number: '8513321'},
    {id: 2, name: '鈴木次郎', area: '神奈川県横浜市', number: '1234567'},
    {id: 3, name: '田中さん', area: '宮崎県宮崎郡', number: '9898888'}
];

var ContactTable = React.createClass({
    render: function(){
        return(<table>
            {this.props.children}
        </table>);
    }
});

ContactTable.Header = React.createClass({
    render: function(){
        var tableTitles = this.props.title.map(function(cName, i){
            return (<th key={i}>
                {cName}
            </th>);
        });
        return (<thead>
            <tr>
                {tableTitles}
            </tr>
        </thead>);
    }
});

ContactTable.Body = React.createClass({
    render: function(){
        var tableRows = this.props.data.map(function(person){
            return (<tr key={person.id}>
                <td>{person.name}</td>
                <td>{person.area}</td>
                <td>{person.number}</td>
            </tr>);
        });
        return (<tbody>
            {tableRows}
        </tbody>);
    }
});

var DispTable = React.createClass({
    render: function(){
        return (<ContactTable className="regularTable">
            <ContactTable.Header title={this.props.title}/>
            <ContactTable.Body data={this.props.data}/>
        </ContactTable>);
    }
});

// Perfアドオンのstartメソッド
Perf.start();
ReactDOM.render(
    <DispTable title={tableColumns} data={tableData}/>,
    document.getElementById('content')
);
// 計測終了
Perf.stop();

// Perfアドオンの実行結果を取得するメソッドで取得した値を代入する。
var measurements = Perf.getLastMeasurements();
Perf.printInclusive(measurements);
Perf.printExclusive(measurements);

アドオン便利ぽいなぁ！