Реакция вложенного состояния на большие формы

Question

При работе с большими данными формы в отношении производительности это состояние должно быть вложенным или не должно быть вложенным?Например, рассмотрим, была ли у вас форма с 100 или более полями:

Опция 1

state = {
    formData: {
        formItem1: value,
        formItem2: value
    }
}

Опция 2

state = {
    formItem1: value,
    formItem2: value,
    formItem3: value
}

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

this.setState({
    formData: {
        ...this.state.formData,
        formItem1: newValue
    }
});

Поскольку это технически создает новый объект для formData - ВСЕ ли поля формы пройдут процесс повторного рендеринга, так как состояние каждого из них было обновлено -и, таким образом, вызвать проблемы с производительностью для огромных форм?

Answer 1

Благодаря официальной реакции docs :

setState () всегда будет приводить к повторному рендерингу, если mustComponentUpdate () не возвращает false.Если используются изменяемые объекты и логика условного рендеринга не может быть реализована в shouldComponentUpdate (), вызов setState () только в том случае, если новое состояние отличается от предыдущего, позволит избежать ненужных повторных рендерингов.

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

• Иногда измененное состояние имеет значение для рендеринга, но не при всех обстоятельствах.Например, когда некоторые данные видны только условно.

Answer 2

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

let temp = this.state.formData;
temp.formItem1 = newValue;
this.setState({formData:temp});

это будет работать