Reactメモ

##functionComponent
###文法

//定数で宣言する
const App = () => {
  return (
    <>
      <div>HTMLのように書けます</div>
    </>
  )
}

//export忘れない
export default App

##useState文法

  // useState関数をインポート
  import React, {useState} from 'react'

  // 宣言
  // state変数名, state変更関数名　＝　state初期値
  const [isPublished, togglePublished] = useState(false);

##useEffect文法

// クリーンアップ関数
useEffect(() => {
  console.log('Render')
  return () => {
    console.log('Unmouting')
  }
})

・Callbackはレンダーごとに呼ばれる
・returnするCallback関数はアンマウント時に呼ばれる

// マウント時のみ実行される
useEffect(() => {
  console.log('Render')
}, [])

・第二引数に空の配列を渡してあげると、最初の一回のみ実行される。

##useCallback

コンポーネント内で使用するコールバック関数はrender毎に生成されるが、useCallbackを使うと、コールバック関数の生成を抑止できる。
クラスコンポーネントのbind()と同じ役割をする。

文法

  // 一つ目の引数にコールバック関数、二つ目の引数に配列で値を渡す（再描画する為の条件）。
  useCallback(() => {},[hoge]);

子コンポーネントにpropsで関数を渡すときに使う。

this.handleClickOpen = this.handleClickOpen.bind(this);

  handleClickOpen = () => {
      this.setState({open:true});
  };