Блог

В некоторых случаях методы getter становятся удобными. Но как насчет использования метода getter для рендеринга компонента React или всего DOM? Не лучше ли для этой цели использовать классический метод вместо геттера? И почему именно?

У меня такое чувство, что с этим что-то не в порядке, но также я знаю, что этот материал может быть связан с чувством автора.

Итак, вопрос в том, хороший ли это способ в целом? Или каковы ваши предпочтения?

 class Attachment extends React.Component {

  get file() {
    return this.props.fields.File;
  }
  get label() {
    return this.props.fields.Label;
  }

  // I'm asking about these 2 getters below this comment

  get editableAttachment() {
    return <SomeComponent field={this.label} />;
  }

  get attachment() {
    return (
      <a
        href={this.file amp;amp; this.file.value amp;amp; this.file.value.src}
        target="_blank"
      >
        {(this.label amp;amp; this.label.value)}
      </a>
    );
  }

  render() {
    return (
      <div className="ui-some-component">
        {this.props.isPageEditing ? this.editableAttachment : this.attachment}
      </div>
    );
  }
}

  

Заранее благодарю вас.

Это очень по вкусу потребителю, я считаю, что если вы не вводите варварства, любой код хорош.

Также верно, что чем более понятен код, тем лучше. Я бы постарался сделать код максимально простым и разборчивым для человека, который не знает мой код.

С другой стороны, я стараюсь сделать компоненты как можно более простыми и наглядными.

Возможно, это был бы пример вашего собственного кода с использованием «my style guide»:

 const Attachment = ({ isPageEditing, fields }) => {
  const { file, label } = fields;

  const attachment = isPageEditing ? (
    <SomeComponent field={fields.label} />
  ) : (
    <a href={file amp;amp; file.value amp;amp; file.value.src} target="_blank">
      {label amp;amp; label.value}
    </a>
  );

  return <div className="ui-some-component">{attachment}</div>;
};
  

Надеюсь, я помог вам,
Лучший

Я думаю, это сводится к предпочтениям. Вы не получите никаких преимуществ, отложив вычисление по сравнению с более простым if x do this, if y do that рендерингом — оба должны выполнять работу.

Мои два цента — сохранить компонент простым и читаемым. Переключение между классами для каждого условия усложняет задачу следующему разработчику.