react 勉強メモ 7日目（react/redux: コンテナコンポーネントからのhooksやらなんやら）

役割

ReduxとReactを繋ぐ

- stateをフィルタリング => コンポーネントに渡す

- StoreからdispatchするActionsをコンポーネントに渡す

- 現在はhooksを使ったほうが良さげ

mapStateToProps -> useSelector

mapDispatchToProps -> useDispatch

クラスコンポーネント -> 関数コンポーネント

useEffect() レンダーごとにやるやつ

- useEffect内にレンダーごとに呼ばれるcallback 関数

- return するcallback関数はアンマウント時に呼ばれる（クリーンナップ関数）

useEffect(() => {
  console.log(Render)
  render () => { //クリーンナップ関数
    console.log('unMounting');
})

useEffect() マウント時だけ

- 第二引数の配列内の値を前回レンダーと今回レンダーで比較して変更があればcallback関数を実行

- 第二引数が空だと最初の一回（マウント時）だけ実行

useEffect(() => {
  console.log(Render)
}, [])

useEffect() マウント時とアンマウント時だけ

useEffect(() => {
  console.log('Render')
  return () => {
    console.log(UnMounting)
  }
}

useEffect() 特定条件

- limitの値が変わった時だけ実行する

const [limit, release] = useState(true);
useEffect(() =>  {
  console.log('Render')
}, [limit])