Я пытаюсь преобразовать эту классную анимацию <canvas>
я нашел здесь, в повторно используемый компонент React. Похоже, что для этого компонента потребуется один родительский компонент для холста и много дочерних компонентов для function Ball()
.
По соображениям производительности, вероятно, было бы лучше превратить Balls
в компоненты без состояния, так как их будет много. Я не так хорошо знаком с созданием компонентов без сохранения состояния, и мне было интересно, где я должен определить функции this.update()
и this.draw
, которые определены в function Ball()
.
Функции для компонентов без состояния идут внутри компонента или снаружи? Другими словами, что из следующего лучше?
1:
const Ball = (props) => {
const update = () => {
...
}
const draw = () => {
...
}
return (
...
);
}
2:
function update() {
...
}
function draw() {
...
}
const Ball = (props) => {
return (
...
);
}
Каковы плюсы/минусы каждого из них и являются ли они лучше для конкретных случаев использования, таких как мой?