More Related Content
Similar to React ContextとPropの違いについて (20)
React ContextとPropの違いについて
- 2. ?yzmw1213 です。 （ネット上での名前をまだ持ってないので、Gitのnameで名乗らさせて頂きます） ?エンジニア6年目で、React書いたり、GoでWeb API書いたりしてる人。 ?学習中の技術: DBのインデックス構造 Btree, 二分探索とか 自己紹介
- 6. 笔谤辞辫を多用する？
- 7. 方法は、いくつかある ● Redux ● イベントバス ● URLパラメータにデータを設定する ● セッションストレージ ● Props
- 9. イベントバス ● コンポーネントからのイベント発火を起こすことができる。 ● 多用しすぎると、イベント名の管理などでコードが混乱しやすくなるため、注意しましょう eventBus.emit(‘MY_EVENT’, { foo: ‘xxx’}) eventBus.on(‘MY_EVENT’, handleEvent)
- 11. セッションストレージ ● ブラウザにデータを保持する ● 同一セッションの画面やタブ間でデータを共有できる ● セキュリティ上のリスクがある。（パスワード等の機密情報など、保持すべきでない） ● Reactコンポーネントは、同じページ内に存在する場合がほとんどであり、 セッションストレージを使う必要性は高くない
- 12. Props ● 親コンポーネントが、自身の内包するコンポーネントに属性としてデータを渡す方法。 ● どのような型のデータでも渡せる。関数を渡すことも可能 ● ただし、渡されたpropsは変更することができない事に注意。 子から値を変更したい場合は、Propsにset関数を追加する必要がある。 data, setData()
- 16. Context ● コンテキストは、コンポーネントがその下のツリー全体に何らかの情報を提供することを可 能にする。 ● コンテキストを使うコンポーネントは、Providerの範囲内にいる必要がある。 ● Providerを配置するコンポーネントと、contextを利用するコンポーネントの間には、 どれだけ階層が合っても利用可能。 ● <div>のような組み込みコンポーネントと、自作コンポーネントによらず利用可能
- 18. PropsとContextの比較 Props ? データの流れが一方向（親→子）で、明確である ? 型安全であり、コンポーネントを再利用しやすい ? コンポーネントツリーが深くネストする場合、多層にデータを渡す必要がある Context ? 多層にデータを渡さなくて良い ? コンポーネントにContextを利用すると、再利用しにくくなる場合がある
- 21. Tips. Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux) 資料作っている間に、ReduxとContextの違いが疑問になったので、調べたら出てきた。 ReduxのContributorであるMark Erikson 氏が述べている。