React チュートリアルをやってみた感想とか

はじめに

ぎょーむでReactをつかうらしいのでチュートリアルやってみました

すごい良くできていて、途中のコードも全てサンプル載せていて、ローカルの準備までかいてあり、アロー関数宣言とかもコラムにまとめてあったり、なんでこの処理をするのかとか、処理がどんな順番で実行されているのかとか丁寧に書いてあり、JSがそもそもそんなにわからんおじさんでもなんとかなる感じに作ってありました。
簡単な機能からつくって、段々と一つのコンポーネントに機能を盛り込んでほかは表示するだけのコンポーネントにしていく構成になっています。

いくつかなるほどなぁと思ったことを書きます。

コンポーネントのstateはそのコンポーネントだけの物

チュートリアルでは○×ゲームを作るために、マス、ボード、ゲームそのものという感じでコンポーネントを作っていくんですが、
最終的に作るマスもボードもゲームコンポーネントからプロパティを受け取って表示してるだけのコンポーネントなります。

 function Square(props) {
  return (
    <button className="square" onClick={props.onClick}> #渡されたプロパティを参照してる
      {props.value}
    </button>
  );
}

 class Board extends React.Component {
  renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}　#渡されたプロパティを参照してる、Boardコンポーネントはマスの番号だけ渡している
      />
    );
  }

  render() {
    return (
      <div>
        <div className="board-row">
          {this.renderSquare(0)}
           .............

 class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      history: [
        {
          squares: Array(9).fill(null)
        }
      ],
      stepNumber: 0,
      xIsNext: true
    };
  }
　　　　　(中略）

  return (
    <div className="game">
      <div className="game-board">
        <Board squares={current.squares} onClick={i => this.handleClick(i)} />　#ここでコンポーネントクラスの中での関数とかをプロパティとして渡している。
      </div>

ここで重要なのはGameコンポーネントはstateを持っていてsetStateしてstateに情報を追加したりしていくんですが、BoardコンポーネントもSquareコンポーネントでもstateの変化は考えません。
GameコンポーネントのstateはGameコンポーネントの中でのみ扱ってプロパティとして子コンポーネントにわたす必要があります。子コンポーネントが子コンポーネント同士や親コンポーネントと連携が取れなくなってしまうからです。

stateは不変性が大事

この○×ゲームではターンの履歴を前回のボードの状態を一度コピーしてからそのコピーに変わった状況を書き込んで、stateに加工したコピーを追加しています。state直接変えないです。途中の履歴とかを意識しない段階でもstateを一度コピーしてから加工したコピーをsetStateしています。
これは何故かと言うとReactの利点である、変更されたもののみ描画し直すという機能のために、変更されたものと変更前がわかる必要があるからです。直接変更してしまうと、前と後がないためstateの変化が検出できません。stateそのものは不変であるべき、というのがおすすめされています。pure componentsつくっていきたいザウルスですね。

functionコンポーネント

そのコンポーネントがstateを扱わないときはReact.Component継承しないでfunctionでコンポーネントつくるのもよい、とチュートリアルにあります。
逆にfunction componentsみたらそれはstateは扱っていないんだな、と考えるとコードが読みやすくなるかも、と感じました。

Reactというよりは、、、

職場でもきいた話なんですけど、Reactが難しいというより、どういう形でコンポーネントの組織が作られていて、どこでstateをどのように管理しているか把握するのが難しいのかなと感じました。適当にやるとコンポーネント同士の連携がめちゃんこになって「React わからない人生」とかで検索することになりそう。