基礎から学ぶReact/React Hooks学習メモ 2 React基礎

React基礎

JSX

• 最上位に1つの要素を配置する
  • <Fragment></Fragment> または <></> を最上位にすれば余計なタグが入らない。
• class → className、 for → htmlFor に置き換える。
• 直接style属性は使えない
  • <h1 style={{fontSize: 16, color: 'red'}}> のように書く。
    • 外側の{}はReactの記法、内側の{}はJavaScriptのオブジェクト定義。
• defaultValue属性、defaultChecked属性
  • stateで更新されない非制御コンポーネントで、value属性でフォームの初期値を設定してしまうと、後から値の変更ができなくなる。

const App = () => {
  return (
    <>
      <input type="text" defaultValue="Hello, React!" />
      <input type="radio" name="radio01" value="radio01" defaultChecked={true} />
      <input type="radio" name="radio02" value="radio02" />
    </>
  )
}

props

• 受け取る側

const Hello = () => {
  return <p>Hello, {props.name}!</p>
}

// または{name}として受け取る
const Hello = ({name}) => {
  return <p>Hello, {name}!</p>
}

• 渡す側

const App = () => {
  return (
    <>
      <Hello name="text" name="React" />
    </>
  )
}

ReactDOM.render(<App />, document.getElementById("root"));

state

• 関数コンポーネントでは、stateを管理するには、フックのuseState()を利用する。

// 状態変数、状態を変更するための関数、初期値
const [liked, setLiked] = useState(false);

レンダリング

• 次のタイミングでレンダリングが行われる
  • コンポーネントの初回レンダリング時
  • コンポーネントのstateがん変化したとき
  • 親コンポーネントがレンダリングされたとき
  • カスタムフックからコンポーネントが受け取っている変数が変化したとき

React Hooks

• useState
  • 関数コンポーネント内で、state管理ができる
• useEffect
  • 副作用（DOMの書き換え、変数代入、API通信など）を追加、制御、副作用関数の実行タイミングをUI構築後まで遅らせる
• useMemo
  • 関数の結果を保持する。結果が同じ場合、そこから結果を再取得する。
• useCallback
  • 関数自体をメモ化する。React.memoと組み合わせて利用する。
• useRef
  • 要素の参照を行う。コンポーネント内で値を保持する。
• useContext
  • Context機能をシンプルに使えるようになる。propsで渡さなくても、Contextに収容されているデータへシンプルにアクセスできる。
• カスタムフック
  • 「use」で始まる独自のフック。UIと切り離したロジックの抽出が可能。処理を切り分けることもできる。

参考

• 基礎から学ぶReact/React Hooks