Edited at

React.js + Flux ソースレビューのポイント

More than 3 years have passed since last update.

オレオレFluxではなくFacebook公式に出来るだけ寄せる方針。


React.js

react-js.png


propとstate


  • stateは最低限の利用にできているか?stateが必要以上に使われていないか?propで置き換えはできないか?

  • stateをsetStateを使わず直接代入していないか(バグ)(listとか弄る時注意)

  • componentのなかでpropの書き換えを行っていないか?(バグ)

  • 適切にpropTypesを利用して型付けできているか

  • ref,getDOMNodeを使っているか?使うべき理由があるか確認する。

  • getInitialStateの中でpropsを使っていないか?使われている場合同期されないことを正しく認識して実装しているか?
    Props in getInitialState Is an Anti-Pattern


component


  • JSXで記載されているか?

  • renderは複数回呼ばれても問題を起こさないか(冪等性)

  • Componentは正しく階層化されているか

  • formはLinkedStateMixin使って短く書く


Flux

flux-diagram-white-background.png

* Componentにビジネスロジックを書かない

* StoreにViewのロジックを書かない

* Storeのテストコードを書きましょう

* Dispatcher <-> Component はお互いを知らないはず

* Store <-> Action はお互いを知らないはず

* 通信処理はActionに寄せて通信終了の通知をDispatcherに伝えるべき