ReactJS: Проверить опоры и состояние на shouldComponentUpdate

Question

Я хочу проверить все свойства и состояние, если они изменены, вернуть true, если они были изменены, и создать базовый компонент для всех моих корневых компонентов.

Мне интересно, не будет ли это лучшей практикой и сделает мои компоненты медленными. Кроме того, что я всегда возвращает истину:

1. Что случилось с моим кодом?
2. Должен ли я проверять каждую переменную внутри реквизита и состояния?
3. Не будет проверять наличие внутри объектов, чтобы они замедлялись в зависимости от их размера?

Answer 1

Считается, что лучше всего сравнить реквизиты и состояние в shouldComponentUpdate, чтобы определить, следует ли повторно отображать компонент.

Что касается того, почему он всегда оценивает значение true, я считаю, что ваш оператор if не выполняет глубокое сравнение объектов и регистрирует ваши предыдущие и текущие реквизиты и состояние как разные объекты.

Я не знаю, почему вы хотите проверить каждое поле в обоих объектах так или иначе, потому что React даже не попытается повторно отобразить компонент, если реквизит или состояние не изменились, поэтому сам факт, что метод shouldComponentUpdate был называется что-то ДОЛЖНО измениться. shouldComponentUpdate намного лучше реализован, чтобы проверить, может быть, несколько реквизитов или состояние изменений и решить, следует ли повторно отображать на основе этого.

Answer 2

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

// MyStore.js 

var _data = {}; 

var MyStore = merge(EventEmitter.prototype, { 

    get: function() { 
    return _data; 
    }, 

    ... 

}); 

Когда я использовал эту модель, я обнаружил, что newProps и newState функций, таких как shouldComponentUpdate всегда оценивают равным this.props и this.state. Я думаю, причина в том, что магазин возвращает прямую ссылку на свой изменяемый объект _data.

В моем случае проблема была решена путем возврата копии _data, а не самого объекта, например, так:

get: function() { 
    return JSON.parse(JSON.stringify(_data)); 
    }, 

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

Answer 3

Для эффективного сравнения есть вспомогательная функция.

var shallowCompare = require('react-addons-shallow-compare'); 
export class SampleComponent extends React.Component { 
    shouldComponentUpdate(nextProps, nextState) { 
    return shallowCompare(this, nextProps, nextState); 
    } 

    render() { 
    return <div className={this.props.className}>foo</div>; 
    } 
}