Где объявить вспомогательные функции для функционального компонента React. Внутри или снаружи? - PullRequest
Новая
       6

Где объявить вспомогательные функции для функционального компонента React. Внутри или снаружи?

1 голос
/ 25 марта 2019

Я создаю <BasicForm> компонент, который будет использоваться для создания форм внутри моего приложения.Он должен обрабатывать отправку, проверку, а также должен отслеживать состояние входных данных (например, касался, загрязнен и т. Д.).

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

Я использую перехватчики React 16.8 и связывание с Webpack.

Пока что вот чтоУ меня есть:

BasicForm.js 

/* I moved those validating functions to a different file
because I thought they are helpers and not directly related 
to my BasicForm functionality */

import { validateText, validatePassword, validateEmail } from './Parts/ValidationHelpers';

function BasicForm(props) {

  const [inputs, setInputs] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  // These are functions to handle these events
  function onChange(event) {...}
  function onBlur(event) {...}
  function onFocus(event) {...}

  // This function creates the initial state for each form input
  function setInputInitialState(inputProps) {...}

  // This functions does what it name says
  function validateAllFields() {...}

  // This one also
  function checkValidationAndSubmit() {...}

  return(
    <FormContext.Provider value={{
      onBlur: onBlur,
      onFocus: onFocus,
      onChange: onChange,
      inputs: inputs,
      setInputInitialState: setInputInitialState
    }}>
      <form onSubmit={onSubmit} method='POST' noValidate>
        {props.children}
      </form>
    </FormContext.Provider>
  );

}

Мой вопрос: как вы можете видеть, до этого момента я объявлял все функциичто мой <BasicForm> использует (onChange, onBlur, onFocus, setInputInitialState, validateAllFields, checkValidationAndSubmit) внутри тела моей BasicForm функции компонента React.

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

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

Получу или потеряю что-нибудь, если объявлю их вне моей BasicForm функции?Помните, что это модуль, который поставляется вместе с Webpack.

1 Ответ

1 голос
/ 25 марта 2019

Если функция не зависит от реквизита или состояния, то лучше определить ее вне функции компонента.Если он опирается на реквизит или состояние, то, как правило, имеет смысл определить его внутри функции компонента, но если вы передаете функцию в качестве реквизита дочернему компоненту, тогда вам, как правило, следует использовать useCallback* 1003.*.

Когда функция зависит от реквизита или состояния, если вы переместите функцию из компонента и передадите ей аргументы, вам в конечном итоге потребуется заключить этот вызов в другую функцию (например, ()=>helperFunc(prop1, someState)) вЧтобы передать его как опору дочернему компоненту.Если функция большая, вы все равно можете извлечь ее из компонента таким способом, но это просто сводится к предпочтениям стиля.

Для получения дополнительной информации о useCallback см. Мой ответ здесь: Проблема с простым примером использования React HooksCallback

...