React hooks
دعونا نرى مع React Three Fiber ما هي React hooks التي سنستخدمها بشكل شائع وكيفية استخدامها وتجنب الأخطاء الشائعة.
إذا لم تكن مألوفًا مع React hooks، أوصي بقراءة التوثيق الرسمي أولاً.
useState
useState تتيح لك إنشاء متغير حالة ودالة لتحديثه.
const [color, setColor] = useState("white");
يعيد مصفوفة مع عنصرين:
- متغير الحالة
- الدالة لتحديثه.
يمكنك استخدامها بهذه الطريقة:
import { useState } from "react"; // ... const Cube = (props) => { const [color, setColor] = useState("white"); useControls({ changeColorToRed: button(() => setColor("red")), changeColorToBlue: button(() => setColor("blue")), changeColorToGreen: button(() => setColor("green")), }); return ( <mesh {...props}> <boxGeometry /> <meshStandardMaterial color={color} /> </mesh> ); }; // ...
في كل مرة تنقر على أحد الأزرار، يتغير لون المكعب.
نظرًا لأن تحديث الحالة يؤدي إلى إعادة عرض، يجب تجنب استدعاء useState
داخل حلقة أو شرط.
سنرى الطريقة الصحيحة لإجراء التحديثات المتكررة مع r3f في درس React Three Fiber hooks، وسنناقش الأخطاء الشائعة التي يجب تجنبها في درس التحسين.
في الوقت الحالي، إليك بعض القواعد الأساسية مع useState
:
- تجنب استدعاء
useState
للقيم التي تتغير بسرعة. - استخدمها عند المستوى الأعمق ممكن. بهذه الطريقة، ستتجنب إعادة عرض العناصر التي لا تحتاج إلى إعادة عرض.
useMemo
useMemo يتيح لك تخزين قيمة مؤقتاً. هذا يعني أن القيمة سيتم حسابها فقط عندما تتغير التبعيات .
دعونا نستبدل المادة الخاصة بنا بأخرى مخزنة:
import { useMemo, useState } from "react"; // ... const Cube = (props) => { // ... const material = useMemo(() => <meshStandardMaterial color={color} />, []); return ( <mesh {...props}> <boxGeometry /> {material} </mesh> ); }; // ...
- الوسيط الأول هو دالة تعيد القيمة المراد تخزينها. في حالتنا، إنه مكون المادة.
- الوسيط الثاني هو مصفوفة من التبعيات. مررنا مصفوفة فارغة، مما يعني أن المادة سيتم حسابها مرة واحدة فقط.
- القيمة المرتجعة هي القيمة المخزنة.
الآن، عندما نضغط على الأزرار، لا يتغير لون المكعب، لأن المادة لم تُعاد حسابها.
لإصلاح ذلك، نحتاج إلى تمرير color
كتبعيات:
const material = useMemo(() => <meshStandardMaterial color={color} />, [color]);
الآن، عندما نضغط على الأزرار، يتغير لون المكعب، لأن المادة يُعاد حسابها عندما تتغير حالة color
.
قمنا بهذا لإظهار كيفية عمل useMemo
، ولكن في هذه الحالة، لا يلزم تخزين المادة. React Three Fiber يقوم بالفعل بالتعديلات اللازمة لنا.
الحالات التي يمكن أن تكون فيها
useMemo
مفيدة هي:
- عندما تكون القيمة مكلفة الحساب في مكون يتم تصييره بشكل متكرر.
- عندما يحتوي المكون على الكثير من الأطفال وتريد تجنب إعادة تصييرهم.
- عندما يحتوي المكون على الكثير من الخصائص وتريد تجنب إعادة تصييره.
لا تستخدم
useMemo
للتعديل المبكر في React و r3f. يمكن أن يكون من الصعب استخدامها ويمكن أن يؤدي إلى أخطاء. فضل استخدامها عندما تواجه مشاكل في الأداء.
useRef
useRef يسمح لك بإنشاء قيمة قابلة للتغيير تظل موجودة عبر عمليات إعادة التجسيد.
يتم استخدامه عادةً لتخزين مرجع إلى عنصر DOM أو كائن Three.js، ولكن يمكنك استخدامه لتخزين أي قيمة.
الشيء الجيد بشأن useRef
هو أنه لا يسبب إعادة التجسيد عند تغيير قيمته. مع r3f، هذا مثالي للرسوم المتحركة أو أي قيمة تتغير بشكل متكرر.
React Three Fiber: The Ultimate Guide to 3D Web Development
✨ You have reached the end of the preview ✨
Go to the next level with Three.js and React Three Fiber!
Get full access to this lesson and the complete course when you enroll:
- 🔓 Full lesson videos with no limits
- 💻 Access to the final source code
- 🎓 Course progress tracking & completion
- 💬 Invite to our private Discord community
One-time payment. Lifetime updates included.