Реагируйте на setState с глубоким вложением, используя Object.assign и Lodash cloneDeep - PullRequest
Новая
       7

Реагируйте на setState с глубоким вложением, используя Object.assign и Lodash cloneDeep

0 голосов
/ 15 октября 2018

У меня довольно глубокая структура состояний (в приведенных ниже примерах myObjects).

Этот код работает:

Пример 1 (Object.assign) 

import set from 'lodash/set'

changeObjectProperty = (key = '', path = '', value = null) => {
    const updatedMyObject = Object.assign({}, this.state.myObjects[key])
    set(updatedMyObject, path, value)
    const newMyObjects = Object.assign({}, this.state.myObjects, { [key]: updatedMyObject })
    this.setState({ myObjects: newMyObjects })
}

... но это не глубокий клон, поэтому я повторно использую ссылки.

Пример 2 (cloneDeep)

Если вместо этого я использую cloneDeep: 

import set from 'lodash/set'
import cloneDeep from 'lodash/cloneDeep'

changeObjectProperty = (key = '', path = '', value = null) => {
    const updatedMyObject = cloneDeep(this.state.myObjects[key])
    set(updatedMyObject, path, value)
    const newMyObjects = Object.assign({}, this.state.myObjects, { [key]: updatedMyObject })
    this.setState({ myObjects: newMyObjects })
}

... Реакт, похоже, не замечает изменения состояния.Почему?

Кроме того, в статье «Обработка состояния в действии: четыре неизменных подхода к рассмотрению» (Кори Дэш на Medium.com) говорится:

«Глубокое клонирование приводит к ненужным визуализациям, поскольку React считает, что все изменилось, хотя на самом деле, возможно, изменился только конкретный дочерний объект ». *

... так что, может быть, предпочтителен Пример 1 с мелким слиянием?

...