Функции в компонентах без сохранения состояния?

23

Я пытаюсь преобразовать эту классную анимацию <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 (
       ...
    );
}

Каковы плюсы/минусы каждого из них и являются ли они лучше для конкретных случаев использования, таких как мой?

  • 0
    Можете ли вы опубликовать существующий код, чтобы мы увидели, как он будет использоваться?
  • 0
    @Scimonster Scimonster Я разместил это во встроенной ссылке, может быть, вы пропустили это. Вот ссылка: codepen.io/awendland/pen/XJExGv
Теги:

2 ответа

28

Прежде всего следует отметить, что функциональные компоненты без состояния не могут иметь методы, вы не должны рассчитывать на вызов update или draw на рендеринге Ball, если это функциональный компонент без состояния.

В большинстве случаев вы должны объявлять функции вне функции компонента, поэтому вы объявляете их только один раз и всегда повторно используете одну и ту же ссылку. Когда вы объявляете функцию внутри, каждый раз, когда компонент отображается, функция будет определена снова.

Есть случаи, когда вам нужно определить функцию внутри компонента, например, назначить ее как обработчик события, который ведет себя по-разному на основе свойств компонента. Но вы можете определить функцию вне Ball и связать ее со свойствами, делая код намного чище и делая функции update или draw повторно используемыми.

// You can use update somewhere else
const update (propX, a, b) => { ... };

const Ball = props => (
  <Something onClick={update.bind(null, props.x)} />
);

вместо:

const Ball = props => {
  function update(a, b) {
    // props.x is visible here
  }

  return (
    <Something onClick={update} />
  );
}
Поделиться
  • 0
    Спасибо Марко, это немного проясняет ситуацию. В моем случае я запутался в функции this.draw внутри Ball . Он использует ctx из того, что будет родительским <canvas> а также использует ключевое слово this для того, что будет дочерним компонентом Ball . Как лучше интегрировать реализацию компонента без сохранения состояния, чтобы оба эти свойства были доступны?
  • 0
    нет this при использовании апатридов функциональных компонентов, имеют в виду. Для контекста холста, вы должны будете передать его каждому Ball , что звучит не очень хорошо.
Показать ещё 9 комментариев
0

Мы можем иметь функции внутри функциональных компонентов без сохранения состояния, ниже приведен пример:

 const Action = () => {
  function  handlePick(){
     alert("test");
  }
  return (
    <div>
      <input type="button" onClick={handlePick} value="What you want to do ?" />
    </div>
  );
}

Но это не очень хорошая практика, так как функция handlePick() будет определяться каждый раз, когда вызывается компонент.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню