Форма реакции с множеством дочерних элементов, родительское состояние

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

Что-то в этих строках:

render() {
    <form>
        <input type=text>title</input>
        {checkboxes.map(return <cell />)}
    </form>
}

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

Теперь у меня есть состояние (проверено true/false) в каждой ячейке, так что это быстрее. Я не могу использовать функцию onChecked, которая поднимает состояние до родительской причины, тогда я возвращаюсь к тому же медленному шаблону.

Мой вопрос: как родитель должен сохранить глобальное состояние (чтобы я мог отправить его, например, на сервер)?

Я думал просто сохранить все данные в переменной (в родительском, например, this.data), не связанной с состоянием, поскольку каждый дочерний элемент обрабатывает свое собственное состояние.

Спасибо


reactjs forms react-state-management
person HRK44    schedule 20.06.2018    source источник
comment
используя обработчик shouldComponentUpdate, вы можете сохранить состояние всех флажков в родительском состоянии, но повторно отображать только те, которые обновляются   -  person Umair Abid    schedule 20.06.2018

Ответы (1)


arrow_upward
2
arrow_downward

Как упоминалось в комментариях, вы должны реализовать метод shouldComponentUpdate() для вашего компонента Cell. Что-то вроде:

shouldComponentUpdate(nextProps) {
  if(nextProps.checked === this.props.checked) {
    return false;
  }

  return true;
}

Это гарантирует, что повторный рендеринг никогда не произойдет, если реквизит checked не изменился с момента последнего повторного рендеринга. Теперь вы должны иметь возможность сохранять состояние родителя без каких-либо задержек.

В качестве альтернативы, но не рекомендуется, вы можете сохранить состояние для каждого компонента и добавить ref к вашему <form>. Это позволяет вам использовать некоторые из вспомогательных методов, которые уникальны для форм и элементов формы.

Это может выглядеть так:

<form ref={el => this.formRef = el}>
  ...

и

onSubmitToServer() {
  const data = jQuery(this.formRef).serializeArray();
  //do something
}

Очевидно, вам нужно будет установить и импортировать jQuery, чтобы вышеперечисленное работало, или реализовать собственное решение для сериализации массива.

person Chris    schedule 20.06.2018
comment
И что вы думаете о хранении данных внутри класса? (например, this.data) - person HRK44; 20.06.2018
comment
@ HRK44, зависит от того, как вы его используете. Если this.data требуется для render() и его значения со временем меняются, это плохая идея и должна быть в this.state.data. Если this.data не используется в рендеринге или всегда статично, то все в порядке. - person Chris; 20.06.2018