reactjs
recharts

react+Recharts注意点

More than 1 year has passed since last update.

react+redux+immutable+rechartsアーキテクチャ

 流行なreact.jsアーキテクチャの利用で気づいたことをメモする。

rechartsコンポーネントのdata属性はネイティブなJavaScriptの配列に限られる。

 react+reduxアーキテクチャでstateには変更不可のコレクションが好ましい。
 例えば、stateに保存されるデータの型immutable.jsのList場合、list.toJS()でJavaScript配列に変換してからdata属性に設定しなければならない。

rechartsのLineで描画される線の太さ

 ドキュメントに公開されていないが、属性strokeWidth={2}のように設定すれば、線の太さを調整できる。

immutableを使う理由

  • setなどのメソッドでコレクションを変更しようとすると、コピーされた新しいオブジェクトを返すことができる。
  • リストやマップなどの複雑のオブジェクトが深いコピーが行える。
  • 機能豊富であり、便利なコレクションやメソッドが提供されている。