ShouldComponentUpdate всегда возвращает true, что не так? Рендер элемента происходит, как определить?

Question

[vaskadogana]

скрин пропсов storage8.static.itmages.com/i/17/0223/h_1487848793...

скрин после изменений в элементе имеющем общего предка, причем, там меняется только state.

ниже код из элемента в котором не хочу делать рендер.

shouldComponentUpdate(nextProps, nextState) {
	  		console.log('this.props: ', this.props, 'nextProps: ', nextProps);
	  		console.log('this.state: ', this.state, 'nextState: ', nextState)
	  		if ((this.props === nextProps) && (this.state === nextState)){
	            return false
	        } else { return true }

	  	}
		render(){
			console.log("render FilterForAll")

p.s. Это ж вроде фишка реакт, что ренедрится только часть которая поменялась, а не весь dom целиком, с таким раскладом выходит, что рендерится весь вирутальный dom заново. Или я что то не так понял?

Answer 1

[Боб Хоуп]

К сожалению, вот это условие не работает:

(this.props === nextProps) && (this.state === nextState)

Даже если содержание этих объектов одинаковое, с точки зрения js это разные объекты и они не равны. Если вы хотите иметь возможность легко сравнивать объекты, то стоит посмотреть в сторону immutable структур: https://facebook.github.io/immutable-js/

Comments

[Боб Хоуп]

Вот еще про равенство объектов в js: adripofjavascript.com/blog/drips/object-equality-i...
В этой статье также предлагается использовать утилиту из underscore или lodash для сравнения объектов, что, в принципе верно, однако при использовании в shouldComponentUpdate может сказаться на производительности.

[vaskadogana]

Боб Хоуп: спасибо, почитаю