Hãy cùng xem với React Three Fiber những React hooks mà chúng ta thường sử dụng và cách sử dụng chúng để tránh những lỗi thường gặp.

Nếu bạn chưa quen với React hooks, tôi khuyên bạn nên đọc tài liệu chính thức trước.

useState

useState cho phép bạn tạo một biến trạng thái và một hàm để cập nhật nó.

Copy
const [color, setColor] = useState("white");

Nó trả về một mảng gồm hai phần tử:

• biến trạng thái
• hàm để cập nhật nó.

Bạn có thể sử dụng nó như sau:

Copy
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>
  );
};

// ...

Mỗi lần bạn nhấp vào một trong các nút, màu của khối lập phương thay đổi.

Bởi vì việc cập nhật trạng thái kích hoạt một re-render, bạn nên tránh gọi useState bên trong một vòng lặp hoặc điều kiện.

Chúng ta sẽ khám phá cách đúng đắn để thực hiện các cập nhật thường xuyên với r3f trong bài học React Three Fiber hooks, và thảo luận về những lỗi thường gặp cần tránh trong bài học tối ưu hóa.

Hiện tại, đây là một số nguyên tắc cơ bản với useState:

• Tránh gọi useState cho những giá trị thay đổi nhanh.
• Sử dụng nó ở mức độ sâu nhất có thể. Bằng cách đó, bạn sẽ tránh việc render lại các phần tử không cần thiết.

useMemo

useMemo cho phép bạn ghi nhớ (memoize) một giá trị. Điều này có nghĩa là giá trị sẽ chỉ được tính toán khi các dependencies của nó thay đổi.

Hãy thay thế material của chúng ta bằng một material đã được ghi nhớ:

Copy
import { useMemo, useState } from "react";

// ...

const Cube = (props) => {
  // ...
  const material = useMemo(() => <meshStandardMaterial color={color} />, []);

  return (
    <mesh {...props}>
      <boxGeometry />
      {material}
    </mesh>
  );
};

// ...

• Tham số đầu tiên là một hàm trả về giá trị cần ghi nhớ. Trong trường hợp của chúng ta, nó là một component material.
• Tham số thứ hai là một mảng các dependencies. Chúng ta đã truyền vào một mảng rỗng, điều này có nghĩa là material sẽ chỉ được tính toán một lần.
• Giá trị trả về là giá trị đã được ghi nhớ.

Bây giờ, khi chúng ta nhấn vào các nút, màu sắc của khối lập phương không thay đổi, vì material không được tính toán lại.

Để khắc phục điều này, chúng ta cần truyền color như là một dependency:

Copy
const material = useMemo(() => <meshStandardMaterial color={color} />, [color]);

Bây giờ, khi chúng ta nhấn vào các nút, màu sắc của khối lập phương thay đổi, bởi vì material được tính toán lại khi trạng thái color thay đổi.

Chúng tôi đã làm điều này để cho bạn thấy cách useMemo hoạt động, nhưng trong trường hợp này, việc ghi nhớ material là không cần thiết. React Three Fiber đã tối ưu hóa cần thiết cho chúng ta.

Các trường hợp mà useMemo có thể có lợi là:

• Khi giá trị là chi phí lớn để tính toán trên một component hiển thị thường xuyên.
• Khi một component có nhiều thành phần con và bạn muốn tránh render lại chúng.
• Khi một component có nhiều props và bạn muốn tránh render lại nó.

Đừng sử dụng useMemo để tối ưu hóa một cách sớm khi bạn bắt đầu với React và r3f. Nó có thể phức tạp để sử dụng và có thể dẫn đến lỗi. Hãy sử dụng nó khi bạn gặp vấn đề về hiệu năng.

useRef

useRef cho phép bạn tạo ra một giá trị có thể thay đổi mà vẫn tồn tại qua các lần render.

Nó thường được sử dụng để lưu trữ tham chiếu tới một DOM element hoặc một Three.js object nhưng bạn có thể sử dụng nó để lưu bất kỳ giá trị nào.

Điều tuyệt vời về useRef là nó không kích hoạt render lại khi giá trị của nó thay đổi. Với r3f, điều này là hoàn hảo cho các hoạt ảnh hoặc bất kỳ giá trị nào thay đổi thường xuyên.