LoginSignup
0

More than 3 years have passed since last update.

React.js 学習メモ 第6回

Last updated at Posted at 2019-06-21

最近Reactの勉強を始めたので、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです!

Reducerメモ

reducerはactionとstateから、新しいstateを作成して返すメソッドです。ポイントは、引数のstateを更新することはせず、新しいstateのオブジェクトを作成して返します。
reducerのメソッドは副作用を起こさないpureな関数でなければならず、Aというstateに対して毎回必ずBというstateを返すような関数でなければなりません。

actionからstoreへアクセスする事で状態を変化
Reducerはアプリケーションが大きくなるにつれて実装が肥大化してしまうので、Reducer内に子Reducerを作成し、stateのプロパティごとに子Reducerで処理するようにします。

Reduxの3原則

  1. Single source of truth アプリケーション内でStoreは1つのみとし、Stateは単独のオブジェクトとしてStoreに保持される。
  2. State is read-only Stateを直接変更することはできず、actionをStoreへdispatchすることでしかStateは変更できない。
  3. Mutations are written as pure functions Stateを変更する関数(Reducer)はpureな関数にする。

pureな関数

renderメソッドは「ピュア」である必要がある。これは、「コンポーネントの状態を操作しない」「DOMの操作(読み書き)をしない」「ブラウザの操作をしない」ということ。

Component と PureComponentの使い分け

(1) 原則
render関数を発火させる回数を減らせば減らせるほど、
Reactの性能を発揮することができる。

(2) 結論
propsと stateが常に変化していれば、PureComponentを使わず、Componentを使うべし。

(理由:shouldComponentUpdate内のshallowEqualも時間かかる)
propsと stateがあまり変わらなければ、PureComponentを使うべし。
propsと stateが変わらなければ、どちらでもOK.
React自体VirtualDOM機構で差分しかrenderされず性能を保証してくれるため、初心者は気にせずComponentを使用。Bottle Neckになったら、最適化すれば良い。

ちなみに上記では1つのdivコンポーネントを返しているが、コンポーネントの中にコンポーネントを含めることも可能。ただし、ルート要素(上記の場合div)は1つしか返せない。

つまり、以下の様な返し方はNG。

// NG例
return (
  <div className="commentBox">
    Hello, world! I am a 1st CommentBox.
  </div>
  <div className="commentBox">
    Hi, world! I am a 2nd CommentBox.
  </div>
);

振り返り

pureな関数を書けるように一旦、「コンポーネントの状態を操作しない」「DOMの操作(読み書き)をしない」「ブラウザの操作をしない」ということを意識してコードリーディングなどを行なっていきます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0