[JS]Shallow Compare

Shallow Compare

import

import shallowCompare from 'react-addons-shallow-compare'; //ES6

var shallowCompare = require("react-addons-shallow-compare"); //ES5

Overview

React.PureComponent가 소개되기 전에, React와 ES6에서는 shallowCompare이 PureRenderMixin과 함수적으로 동일한 기능을 담당했었습니다. 

만약 React 컴포넌트의 render 함수가 "pure"( 동일한 state와 props로 동일한 결과를 렌더링할 때를 말합니다.) 이면, 이 helper함수를 성능향상에 사용할 수 있습니다.

Example :

export class SampleComponent extends

React.Component {

shouldComponentUpdate(nextProps, nextState) {

return shallowCompare(this, nextProps, nextState);

}

render() {

return <div className = {this.props.className}> foo </div>

}

}

shallowCompare는 현재 props와 next props 객체를 얕은 비교할 뿐만 아니라, 현재 state와 next state 객체 또한 비교할 수 있습니다.

이것은 객체의 키들이 반복되면서 비교하며, 만약 키의 값이 서로 엄격하게 같으면(strictly equal) true를 반환합니다.

shallowCompare은 만약 props 혹은 state를 얕은 비교를 했을 때 비교한 객체가 서로 동등하지않고, 그 결과로 컴포넌트가 업데이트 되야 할 때 true를 반환합니다.

shallowCompare은 또한 만약 props 와 state가 얕은 비교를 했을 때 비교한 객체가 서로 같고, 결과로 업데이트 하지 않아도 될 때 false를 반환합니다.