Reactのguide to main conceptsを読み始める人～その２～

2 週間開いてしまった。うーん、継続力が。

概要

この辺を読みます。読んだかもしれないけど、まとめてなかった。

Rendering Elements

React の element はプレーンテキストで簡単に作れるらしい。element は component とはちょっと違っていて、component を構成するもの、らしい。ちょっとこの時点では概念の使い分けがわかってない。component は次で説明されるので一旦飛ばしてみる。

そんでもって、特定の要素を狙ってレンダリングできるっぽい。

<div id="usada"></div>

これに対して、id を指定してレンダリングできる（ここでは「そういうこと！」が出力される）。

const element = <h1>そういうこと！</h1>;
ReactDOM.render(element, document.getElementById('usada'));

また React の elements はイミュータブルなので変更できない。なので、更新がしたければ、新しく element を作って、 ReactDOM.render() を呼ぶしかない。なんかそれは外から差し込まれて変に値変わるよりは、良いなあというのが個人的な感想。

ちょっとサンプルをいじってみて、出力してみる。なお、サンプルでは setInterval を通して何度でも呼ぶが、一般的には ReactDOM.render()を 1 度だけ呼んで、ステート管理ができるような componen に何かするらしい（と、Note に書いてある。レンダリング何回もするなと思っているので、「それはそう」という感想）。

function tick() {
  const element = (
    <div>
      <h1>今の時刻をお伝えするぺこ～</h1>
      <h2>今は {new Date().toLocaleTimeString()} !
      </h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('usada'));
}

setInterval(tick, 1000);

ReactDOM は更新の必要のある個所だけ更新するつくりらしい。なるほど。ある瞬間での UI の表示を意識することによってバグを排除する思想らしい。

element がイミュータブルで、ReactDOM を使ったレンダリングが必要箇所だけやってくれるよ、っていう理解だけした。

Components and Props

UI の独立性や再利用性を高めるためのもの、らしい。詳細は API ドキュメントへと書かれている。 React.Component – React

JavaScript の function みたいなものを使って、任意の入力を出力するものらしい。任意の入力を受け付けるのが props、ふむふむ。

普通に funtion で JSX 返すだけも component できるし、 ES6 class を用いて component の定義もできるらしい。

こうとかかけるっぽい。

function Welcome(props) {
  return <h1>こんぺこ～、 {props.name}</h1>;
}

/* またはこう, ES6 class みたいなもの。
class Welcome extends React.Component {
  render() {
    return <h1>こんぺこ～、 {this.props.name}</h1>;
  }
}
*/

const element = <Welcome name="かなた" />;
ReactDOM.render(element, document.getElementById('usada'));

ちなみに component の名前は大文字で始めるのがルールらしい。Class っぽいね。React が小文字で始まるものは DOM タグ、大文字で始まるものは component として扱うかららしい。（詳細は JSX In Depth 参照らしい）

まあ当然だけど再利用できるのでこうできる。

function Welcome(props) {
  return <h1>こんぺこ～, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="かなた" />
      <Welcome name="のえる" />
      <Welcome name="るーちゃん" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('usada')
);

次に出てる Extracting Components の例は長いんだけど、実際にユーザープロフィールみたいな component を作って表示してる。 author を dict で渡しといて、 props.author.avatarUrl みたいなのを作ってる。

で、もっと細かくパーツに分けるために Avatar を分けて表示に組み込むみたいなことをやっている。なるほどね…（時間があったら書いてみるかも）。コンポーネントからコンポーネントをたどることで、再利用性を高める例がわかりやすい。

Read-OnlyなPropsも定義できるらしいが、ちょっとどういうことかわかってない（小文字で functions をスタートして、常に同じ結果を返すような感じ…？ Pureとは？）。

ただこれだと動的な変更ができないので、ステートという概念が出てくるらしい。

再利用性についてはすごくよくわかった（サンプルがわかりやすい）ので、続きも楽しみ。

おまけ

知らなかった単語を並べる。

encapsulated: カプセル化
arbitrary: 任意

まとめ

Component周りの話で、サンプルがわかりやすくて理解に落としやすかった。再利用性を高める… 大事ですよね。部分的にこれ使いたいとか、そういうの結構あるような気がします。結局部分最適化のためにないかもしれないけど。とはいえ、ふわっと書くというよりかなりロジカルな感じなので、いいなと思います。

ステートも早く読みたいな…。