React.jsに関する覚書
環境構築
SPAではない
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>
)
}
コンポーネントの定義
シンプルなコンポーネント
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 -- カスタムフックにデバッグデータを仕込む為に使うらしい（一般的な実装で使う必要は無さそう）
参考資料