React tutorial復習

React基本

• reactはデータが変更となると再度レンダリングする。

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

ここの場合、shopping listはreact component classです。あるいはreact component typeと呼ばれます。そのパラメーターはpropsといいます。propertiesです。

上記の<div.....は以下のものと同義です。

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

Why Immutability Is Important

一般的にはデータを書き換えるのに2パターンがあります。

• 元データを上書きして修正する

var player = {score: 1, name: 'Jeff'};
player.score = 2;
// Now player is {score: 2, name: 'Jeff'}

• 元データのコピーを作成して元データをれプレースする

var player = {score: 1, name: 'Jeff'};

var newPlayer = Object.assign({}, player, {score: 2});
// Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}

// Or if you are using object spread syntax proposal, you can write:
// var newPlayer = {...player, score: 2};

これによって得られるメリットは：

• シンプル化：過去の履歴は参照可能になるという機能は実現が簡単
• 変更は察知可能
• 主要なメリットはこれ：re-renderingのタイミングがわかりやすくなる

function componentはstateを含まず、classですとstateがある