Странно использовать компоненты React без состояния - PullRequest
Новая
       54

Странно использовать компоненты React без состояния

0 голосов
/ 09 февраля 2020

Кто-нибудь из ваших знакомых знает причину использовать компонент без сохранения состояния для огромных компонентов с методами, определенными как переменная и т. Д. c. Я недавно присоединился к проекту, где используется такой подход. Я сильно запутался.

Я думаю, что лучше использовать небольшие компоненты, но все же

Может быть, есть какое-то логическое объяснение, например, производительность и т. Д. c.

простой пример кода: 

const myComponent = ({p1, p2, p3}) => {
    const buttonProps = {
        className: 'button',
        onClick: () => { console.log('clicked'); }
    };
    const getButtonName = () => 'Submit'; 
    const getButton = () => {
        return (
            <button ...buttonProps>{getButtonName()}<button>
        );
    }
    /* a lot of defined objects like above */
    return (
        <div>
            {getButton()}
        </div>
    );
}

Главный вопрос , почему вместо создания компонента MyButton использовались такие методы, как getButton (). Я думаю, это было бы легко понять, отладить и т. Д. c.

Ответы [ 3 ]

1 голос
/ 09 февраля 2020

В React вы можете использовать компоненты на основе классов или компоненты на основе функций (функциональные компоненты).

Функциональные компоненты, как правило, легче тестировать и понимать, и они легче.

Тенденция в мире React связана с функциональными компонентами. Это имело место в еще большей степени в последний год или около того, с введением крючков (то есть useState, useEffect, et c.), Которые позволяют иметь легкий функциональный компонент, но с доступом к вещи, которые дали компонентам на основе классов свои дополнительные возможности.

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

Вас может заинтересовать одно из видео React Conf от 2018 года, посвященное хукам: React Conf 2018 Соответствующая часть начинается примерно с 11 : 30.

1 голос
/ 09 февраля 2020

A stateless component означает, что у него нет state, а компонент React в вашем примере будет считаться functional component. Что касается самого шаблона, то он может быть реализован и в class component - это не то, что задает c только для functional components.

Например, приведенный выше код мог быть написан как нижеприведенный, и он даст тот же точный результат: 

class MyComponent extends React.Component {
  render() {
    const buttonProps = {
      className: `button`,
      onClick: () => {}
    }
    const getButtonName = () => `Submit`
    const getButton = () => {
      return (
        <button {...buttonProps}>{getButtonName()}</button>
      )
    }
    return (
      <div>{getButton()}</div>
    )
  }
}

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

К сожалению, или к счастью, React неубедителен, и люди могут делать все, что им заблагорассудится, что может привести к «странному» "шаблоны, которые не всегда хороши.

Предоставленный вами фрагмент кода создает ненужные абстракции, которые на первый взгляд не ясны - мне пришлось выяснить, что делает getButton, а затем go до getButtonName, чтобы увидеть, что визуализируется внутри * Элемент 1021 *, а затем мне пришлось искать buttonProps, чтобы выяснить, что было передано props.

Если вам действительно нужна многократно используемая функция, которая возвращает компонент, то почему бы просто не сделать это Способ «React»? 

function Button({ children, ...rest }) {
  const defaultProps = {
    className: `button`,
    onClick: () => {}
  }
  const props = { ...defaultProps, ...rest }

  return (
    <button {...props}>
      {children}
    </button>
  )
}

Который затем, возвращаясь к вашему примеру, можно использовать, как в следующем примере: 

// by the way, start with an uppercase when naming React components
const MyComponent = ({ p1, p2, p3 }) => {
  return (
    <div>
      <Button>I am a button #1!</Button>
      <Button
        onClick={() => console.log(`HelloWorld`)}
      >
        I am a button #2 with a custom `onClick` handler!
      </Button>
    </div>
  )
}

Этот подход намного лучше и чище, поэтому, как вы и предлагали в комментариях, getButton должен быть записан как фактический React компонент.

1 голос
/ 09 февраля 2020

Компонент с состоянием, который расширяет React.Component имеет много дополнений. Вы в основном импортируете все переменные и функции, встроенные в React.Component, такие как функции жизненного цикла. Если они вам не нужны, тогда безгражданство просто создает более легкий компонент. Например, когда ваш компонент монтируется, компонент с состоянием будет вызывать componentDidMount (), но у лица без состояния даже нет componentDidMount ().

Редактировать: чтобы ответить на более конкретный вопрос c: эта функция является компонентом, функциональным компонентом, созданным для повторного использования, но внутри функции рендеринга функционального компонента этот компонент не может быть вызван с синтаксисом <>. Он находится внутри другого компонента, так что его область действия ограничена родительским объектом и имеет доступ к реквизиту. Это основано на мнении, потому что использование одного вида компонента над другим - это просто баланс читаемости, возможности повторного использования и функциональности.

...