В сфере веб-разработки мониторинг производительности имеет решающее значение для обеспечения бесперебойной и приятной работы пользователя. При работе с React Three Fiber, мощной библиотекой для создания 3D-приложений в React, важно иметь представление о количестве кадров в секунду (FPS), чтобы выявить любые узкие места в производительности. В этой статье мы рассмотрим несколько методов отображения FPS в React Three Fiber, предоставив вам инструменты для оптимизации производительности вашего приложения.

Метод 1: использование Stats.js
Stats.js — популярная библиотека, обеспечивающая мониторинг производительности в режиме реального времени. Чтобы использовать его с React Three Fiber, выполните следующие действия:

1. Установить Stats.js:

   npm install stats.js

2. Импортируйте и инициализируйте Stats.js в своем компоненте:

   import React, { useEffect, useRef } from 'react';
   import Stats from 'stats.js';
   const MyComponent = () => {
    const statsRef = useRef();
    useEffect(() => {
      const stats = new Stats();
      stats.showPanel(0); // 0: FPS panel
      statsRef.current.appendChild(stats.dom);
      const animate = () => {
        stats.begin();
        // Your animation/rendering code here
        stats.end();
        requestAnimationFrame(animate);
      };
      animate();
    }, []);
    return <div ref={statsRef} />;
   };

Метод 2: использование React DevTools Profiler
React DevTools Profiler — мощный инструмент для проверки производительности компонентов. Хотя он не обеспечивает прямого отображения FPS, он дает представление о времени рендеринга и жизненном цикле компонентов. Вот как вы можете его использовать:

1. Установить React DevTools:

   npm install react-devtools

2. Импортируйте и используйте профилировщик в своем компоненте:

   import React, { Profiler } from 'react';
   const MyComponent = () => {
    const onRender = (id, phase, actualDuration) => {
      // Log or display the actualDuration as FPS
      const fps = Math.round(1000 / actualDuration);
      console.log(`FPS: ${fps}`);
    };
    return (
      <Profiler id="MyComponent" onRender={onRender}>
        {/* Your component code here */}
      </Profiler>
    );
   };

Метод 3: использование хука useFrame в React Three Fiber
React Three Fiber предоставляет хук useFrame, который позволяет выполнять действия над каждым кадром. Вы также можете использовать этот крючок для измерения FPS. Вот пример:

import React, { useRef } from 'react';
import { useFrame } from 'react-three-fiber';
const MyComponent = () => {
  const statsRef = useRef({ startTime: performance.now(), frames: 0 });
  useFrame(() => {
    const { startTime, frames } = statsRef.current;
    const currentTime = performance.now();
    const elapsedTime = currentTime - startTime;
    statsRef.current = { startTime: currentTime, frames: frames + 1 };
    if (elapsedTime >= 1000) {
      // Calculate FPS
      const fps = Math.round((frames * 1000) / elapsedTime);
      console.log(`FPS: ${fps}`);
      statsRef.current = { startTime: currentTime, frames: 0 };
    }
  });
  return null;
};

Мониторинг FPS в ваших приложениях React Three Fiber — это эффективный способ выявить проблемы с производительностью и оптимизировать ваш код. В этой статье мы рассмотрели три метода: использование Stats.js, использование React DevTools Profiler и использование перехватчика useFrame React Three Fiber. Внедрив эти методы, вы получите необходимые инструменты для создания высокопроизводительных 3D-приложений в React Three Fiber.