React Hooks - Должен ли я использовать 'useState' для состояния, которое не меняется? - PullRequest
Новая
       16

React Hooks - Должен ли я использовать 'useState' для состояния, которое не меняется?

1 голос
/ 28 мая 2019

Когда я изначально изучал React Component, мне всегда говорили ставить все в this.state. Будь то некоторые данные, которые часто обновляются, или те, которые вообще не обновляются.

Однако, с реализацией перехватчиков React, я не уверен, как часто я должен использовать useState, даже если состояние не будет обновляться.

Позвольте привести пример логики моей формы: 

const FormAuth = props => {
    //Frequently updates
    const [validInput, setValidInput] = useState({
        isCompletedForm: Boolean,
        firstName: Boolean,
        lastName: Boolean,
        email: Boolean,
        password: Boolean,
        confirmPassword: Boolean
    });

    // Never updates
    const [formSchema, setFormSchema] = useState({
        firstName: Joi.string().required(),
        lastName: Joi.string().required(),
        email: Joi.string().required().email().regex(emailRegex),
        password: Joi.string().required().regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$^+=!*()@%&?.]).{8,30}$/),
        confirmPassword: Joi.string().required()
    })

    // Never updates
    const [inputRef, setInputRef] = useState({
        firstNameRef: React.createRef(),
        lastNameRef: React.createRef(),
        emailRef: React.createRef(),
        passwordRef: React.createRef(),
        confirmPasswordRef: React.createRef()
    });

    // render some JSX
}

Здесь у меня 3 состояния. Первым состоянием являются логические значения, которые говорят, что входные данные выглядят хорошо. Второе состояние - это formSchema, которая никогда не будет обновлена. Наконец, третье состояние - это ссылки для каждого из входов, которые также никогда не будут обновляться.

Мой вопрос: Было бы разумнее иметь только одно состояние для validInputs, поскольку оно часто обновляется, а затем для formSchema и inputRef создать const объект с ванильным JavaScript? Или все должно перейти в состояние, как раньше?

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

Ответы [ 2 ]

1 голос
/ 28 мая 2019

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

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

//you can track your state value and state change by this function
//you can use this same function in different component
export function useFormInput(initialValue = "") {
    const [input, setInput] = useState(initialValue);
    function handleInputChange(e) {
        setInput(e.target.value);
    }

    return {
        value: input,
        onChange: handleInputChange,
    }
}


const FormAuth = props => {
  //Frequently updates
  //useFormInput function will return input value and unchange function
  const firstName = useFormInput();
  const lastName = useFormInput();

  // Never updates
  //here your not updating data is assigned in formSchema variable
  const formSchema = {
    firstName: Joi.string().required(),
    lastName: Joi.string().required(),
    email: Joi.string().required().email().regex(emailRegex),
    password: Joi.string().required().regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$^+=!*()@%&?.]).{8,30}$/),
    confirmPassword: Joi.string().required()
  }

  // Never updates
  const inputRef = {
    firstNameRef: React.createRef(),
    lastNameRef: React.createRef(),
    emailRef: React.createRef(),
    passwordRef: React.createRef(),
    confirmPasswordRef: React.createRef()
  }

  return(
    <div>
      //firstname value and onchange function will be
      //assigned useing spread operator
      <input {...firstName} placeholder="first name"/>
      <input {...lastName} placeholder="last name"/>
    </div>
  )
}
1 голос
/ 28 мая 2019

Вам нужно использовать состояние только в том случае, если:

  • контролирует какой-то элемент (например, input, select, textarea и т. Д.).
  • он контролирует некоторые виды данных, которыми необходимо манипулировать (например, список задач, который должен содержать некоторые элементы, которые создаются, читаются, обновляются и удаляются), также как и изоморфные приложения, гденекоторые данные должны быть обработаны на внешнем интерфейсе перед отправкой на внутренний сервер для хранения).
  • используется для некоторого вида условного рендеринга , где DOM необходимо повторно визуализировать с изменениями пользовательского интерфейса (например, логический isLoading, который показывает Spinner при true, нозатем отображает какую-то компоновку, когда false).

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

Проще говоря, не имеет значения, является ли это компонентом класса или функциональным компонентом с крючком, вам нужно будет использовать состояние только в том случае, если для этого требуется динамическое манипулирование / управление чем-либо внутри DOM.

Вот простой пример формы с некоторой проверкой :

Edit Form Validation

...