これら 3 つはいずれもコンポーネント間でロジックを共有しますが、時代とともに進化してきました。そしてカスタムフックは、ロジックを共有するための現代的なデフォルトです。
Higher-Order Component (HOC)
コンポーネントを受け取り、拡張されたコンポーネントを返す関数です:
jsx
= => {
user = ();
user ? : ;
};
= ();
これら 3 つはいずれもコンポーネント間でロジックを共有しますが、時代とともに進化してきました。そしてカスタムフックは、ロジックを共有するための現代的なデフォルトです。
コンポーネントを受け取り、拡張されたコンポーネントを返す関数です:
= => {
user = ();
user ? : ;
};
= ();
欠点: ラッパーのネスト(ツリー内の「ラッパー地獄」)、prop 名の衝突、そして注入された props がどこから来たのか不明確になること。
コンポーネントが state を共有するために、関数を子として受け取ります:
<Mouse>{({ x, y }) => <Cursor x={x} y={y} />}</Mouse>
柔軟ですが、複数の render-prop コンポーネントをネストすると「コールバックのピラミッド」が生まれます。
ステートフルなロジックを useX 関数に抽出します。余分なツリーのネストがなく、データフローが明示的です:
function useMouse() {
const [pos, setPos] = useState({ x: 0, y: 0 });
useEffect(() => { /* attach listener, cleanup */ }, []);
return pos;
}
function Component() {
const { x, y } = useMouse(); // clear, flat, composable
}
children/コンポーネントを渡す)。ジュニアからシニアまで、詳細な回答付きのIT面接質問ライブラリ。
寄付する