React.jsに関する覚書

環境構築

• 環境構築はこちらを参照

SPAではない

• 参考:既存のウェブサイトに React を追加する – React

CSSの読み込み

CSS Modules

/* style.css */
.my-component {
    font-weight: bold;
}

// MyComponent.tsx
import "./style.css";

export const MyComponent = (props: any) => {

  return (
    <p className="my-component">{props.value}</p>
  )
}

• CSS とスタイルの使用 – React

コンポーネントの定義

シンプルなコンポーネント

export const MyComponent = (props: any) => {

  return (
    <p>{props.value}</p>
  )
}

const element = <MyComponent value="（・ｖ・）" />

ReactDOM.render(
  element,
  document.getElementById('root')
)

// => <p>（・ｖ・）</p> が出力される

• コンポーネントの名前は大文字から始まっていなければならない
• <MyComponent xxx="..." />で属性として与えられたデータがpropsとしてコンポーネントに渡される
• React.jsの制限として、propsを更新してはいけない
• 参考: コンポーネントと props – React

コンポーネントからコンポーネントを呼び出す

export const MyComponent = (props: any) => {

  return (
    <MyComponent2 value=props.value />
  )
}

export const MyComponent2 = (props: any) => {

  return (
    <p>{props.value}</p>
  )
}


const element = <MyComponent value="（・ｖ・）" />

ReactDOM.render(
  element,
  document.getElementById('root')
)

// => <p>（・ｖ・）</p> が出力される

• コンポーネントの名前は大文字から始まっていなければならない
• <MyComponent xxx="..." />で属性として与えられたデータがpropsとしてコンポーネントに渡される
• React.jsの制限として、propsを更新してはいけない
• 参考: コンポーネントと props – React

Hooks

種類

• useState -- 状態を管理するフック
• useEffect -- 副作用を発生させる命令を管理するフック
• useContext -- （コンポーネント階層の）距離が遠いコンポーネントにアクセスしやすくなるフック（？）
• useReducer -- Redux.Reducerのフック版（らしい）
• useCallback -- メモ化されたコールバックを返却する
• useMemo -- メモ化された値を返す
• useRef -- 状態を管理するが、状態が変更されてもコンポーネント関数が再実行されない
• useImperativeHandle -- useRefで作成したオブジェクトをカスタマイズする（よくわかってない）
• useLayoutEffect -- useEffectの亜種。DOMが変更された後に呼び出される
• useDebugValue -- カスタムフックにデバッグデータを仕込む為に使うらしい（一般的な実装で使う必要は無さそう）