- はじめに この章では、Reactの高度な概念について深掘りします。GeekとGalがユーモラスで魅力的なやり取りで高度なトピックを理解しやすくしてくれるので、初心者から上級者まで楽しめます！
Reactのスキルをレベルアップする準備はできてる？
絶対に！どんな高度な概念を学ぶの？
Higher-Order Components（HOCs） 、 Render Props 、そして Context API をカバーするよ！HOCsから始めましょう！
- Higher-Order Components（HOCs）
Higher-Order Components（高階コンポーネント）、略してHOCsは、コンポーネントを引数に取り、追加のプロップや振る舞いを持つ新しいコンポーネントを返す関数だよ。まるでコンポーネントにスーパーパワーを与えるみたい！💪
おお、それはかっこいい！HOCを作成する方法は？
簡単！コンポーネントを引数として取る関数を定義し、元のコンポーネントをラップする新しいコンポーネントを返すだけ。例を見てね：
function withSuperpowers(WrappedComponent) {
return function EnhancedComponent(props) {
const extraProp = 'I have superpowers!';
return <WrappedComponent {...props} extraProp={extraProp} />;
};
}
わかった！HOCは、コンポーネントを取り、新しい強化されたコンポーネントを返す関数だね！
その通り！さあ、 Render Props に進もう！
- Render Props
Render Propsは、関数をコンポーネントのプロップとして渡し、その関数がJSXを返すというテクニックだよ。HOCを使わずにコンポーネント間でコードを共有する方法だね！
おもしろい！例を見せてもらえる？
もちろん！render propsを使ったコンポーネントの簡単な例を見てね：
function MouseTracker(props) {
const [position, setPosition] = useState({ x: 0, y: 0 });
const handleMouseMove = (event) => {
setPosition({ x: event.clientX, y: event.clientY });
};
return (
<div style={{ height: '100%' }} onMouseMove={handleMouseMove}>
{props.render(position)}
</div>
);
}
ああ、わかった！関数をプロップとして渡し、その関数がJSXをレンダリングする責任を持つんだね！
その通り！最後に Context API について学ぼう！
- Context API
Context APIは、複数のレイヤーを通してプロップを渡すことなく、コンポーネント間でデータを共有する方法だよ。アプリのグローバルストアのようなものだね！
それは便利そう！Context APIの使い方は？
まず、
React.createContext()
を使ってコンテキストを作成するの。次に、
Provider
を使ってデータをツリー内のすべてのコンポーネントに利用可能にするの。最後に、
Consumer
や
useContext
フックを使ってデータにアクセスするの！
// Create a context
const ThemeContext = React.createContext('light');
// Use a Provider
function App() {
return (
<ThemeContext.Provider value="dark">
{/* ... other components ... */}
</ThemeContext.Provider>
);
}
// Use a Consumer or useContext hook
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button className={`btn btn-${theme}`}>Themed Button</button>;
}
わかった！Context APIを使って、プロップを渡さずにコンポーネント間でデータを共有できるんだね！
その通り！これでReactの高度な概念の勉強が終わりだね！