جميعها تشارك المنطق بين المكونات، لكنها تطورت بمرور الوقت و custom hooks هي المعيار الحديث لمشاركة المنطق.
مكون من رتبة أعلى (HOC)
دالة تأخذ مكون وتعيد واحد محسّن:
jsx
= => {
user = ();
user ? : ;
};
= ();
جميعها تشارك المنطق بين المكونات، لكنها تطورت بمرور الوقت و custom hooks هي المعيار الحديث لمشاركة المنطق.
دالة تأخذ مكون وتعيد واحد محسّن:
= => {
user = ();
user ? : ;
};
= ();
العيوب: تداخل المغلفات ("جحيم المغلفات" في الشجرة)، وتضارب أسماء الخصائص، وليس من الواضح من أين تأتي الخصائص المحقونة.
مكون يأخذ دالة كطفل لمشاركة الحالة:
<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/مكونات).