Идиоматический способ кэширования вычисленных значений на основе состояния в React?

Реагирующая документация говорит

Не беспокойтесь о предварительных вычислениях значений на основе состояния - проще убедиться, что ваш пользовательский интерфейс согласован, если вы выполняете все вычисления в render().

http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html

Это имеет смысл, когда вычисления малы.

Но я храню кучу больших массивов в this.state для визуализации данных, которую я передаю на SVG. Я должен вычислить несколько значений на их основе. Дело в том, что эти вычисления довольно тяжелые, и невозможно вычислить их всегда в рендере.

Итак, как мне следует кэшировать эти вычисления, гарантируя, что я не получаю несогласованное состояние с this.state и этими вычисленными переменными?

Ответы

Ответ 1

Думаю, я это понял.

Я переместил большие массивы в состояние родительского компонента, и я просто передам их как опоры для компонента визуализации. Затем я просто вычисляю значения в componentDidMount и componentWillReceiveProps и сохраняю их в состоянии компонента визуализации.

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

UPDATE: теперь, когда я больше работал с React, я думаю, что это нужно сделать, используя memoizing. Reselect - это хорошая lib для этого.

Ответ 2

Я попробовал визуализацию данных с помощью React и SVG, но пока не имел проблем с производительностью. Реагировать только на rerender при изменении состояния или изменении состояния родительского компонента, чтобы эти вычисления не выполнялись очень часто.

Если в вашем случае компоненты часто обновляются, вы можете попробовать memoize вычислительные функции с помощью lodash.