Вавилон js реагирует машинопись вопрос / совет

Question

Не могли бы вы подсказать мне следующее: Я пытаюсь преобразовать вавилон js - компонент класса реагирования в один, используя крючки (созданные с помощью шаблона CRA). Страница, на которую я ссылаюсь: - https://doc.babylonjs.com/resources/babylonjs_and_reactjs

1) первый вопрос:

для строки:

export default class Scene extends React.Component<SceneProps & React.HTMLAttributes<HTMLCanvasElement>, {}> {

  private scene: BABYLON.Scene;
  private engine: BABYLON.Engine;
  private canvas: HTMLCanvasElement;

---

Что такое эквивалентный функциональный компонент React? (не уверен, что делать с типами в угловых скобках: -

const Scene : React.FC <> = () => { 

---

2) Закрытые переменные я должен сделать useState?

Просмотр ссылки https://doc.babylonjs.com/resources/babylonjs_and_reactjs; не могли бы мы посоветовать, как выглядит код, подобный машинописному; Я попробовал это с шаблоном CRA; невозможно получить соответствующие типы для передачи

Answer 1

1. Первый вопрос

const Scene: React.FC<
  SceneProps & 
  React.HTMLAttributes<HTMLCanvasElement>
> = props => {

  // Don't worry, they are private (equivalent)
  // i.e. their scope is within this function
  // Fun Fact: JavaScript doesn't have `private`
  // and typescript can enforce it only within it's compiler  
  // Because, JS was built as a functional programming language

  // let scene: BABYLON.Scene;
  // let engine: BABYLON.Engine;
  // let canvas: HTMLCanvasElement;

  // There's one problem in declaring variables
  // Directly like this,
  // These variables gets created or updated for 
  // Every update i.e. every function call. So, use this

  const scene = React.useRef<BABYLON.Scene>(null);
  const engine: React.useRef<BABYLON.Engine>(null);
  const canvas: React.useRef<HTMLCanvasElement>(null);


  // and access them using .current
  const bar = scene.current.bar;
  // Or reassign the same way
  scene.current = foo

Второй вопрос

  // As I have said in the previous comment,
  // The scope of this variable is within this function
  // So it's equivalent of being private variable
  const [someState, setSomeState] = React.useState<boolean>(false);