1. 앞말

React에서 Component Update 여부를 결정하는 중
ComponentshouldComponentUpdate를 실행하여 Update가 필요한지 판단합니다.
React는 shoulld ComponentUpdate입니다.
True로 돌아가면 Update가 필요한 것으로 판단됨
휴가를 반환할 때 Update가 필요하지 않은지 확인합니다.

2. PureComponent는

React PureComponent는 기본값shouldComponentUpdateComponent을 변경했습니다.
얕은 비교를 통해 Update 여부를 결정합니다.

React.PureComponent의 이미지

class PureComponent extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        return !(shallowEqual(this.props, nextProps) && shallowEqual(this.state, nextState));
    }
    …
}

공식 소스 코드의 해당 부분 코드

3. Component와 Pure Component의 State와 Propos가 변경되었을 때의 비교도

Component와 PureComponent의 차이점 사용

(1) 원칙

render 함수의 점화 횟수가 적을수록
React의 성능을 발휘할 수 있습니다.

(2) 결론

props와state가 자주 변하면PureComponent를 사용하지 말고Component를 사용해야 합니다.(이유: shouldComponentUpdate내shallowEqual도 시간이 걸린다)

props와state에 큰 변화가 없다면 PureComponent을 사용해야 합니다.

props와state가 변하지 않으면 어느 것이든 좋습니다.

React 자체는VirtualDOM 기구에서 차분한 렌더링만 해서 성능을 확보하기 때문에 초보자는 신경 쓸 필요가 없다Component.Bottle Neck이 되면 최적화하면 됩니다.

4. 사용 예

TODO

5. 주의사항

Pure Component를 사용할 때 shouldComponentUpdate 내의 비교적 얕음(object의reference만 비교)setState의 경우 Immutable 규칙을 준수하지 않으면 render가 받지 않는trap에 빠진다.

이른바 Immutable(불변) 규칙

기존 State 및 Propos를 직접 수정하지 않음
Object를 다시 만든 후 변경합니다.

올바른 사용법

const props = {
  id: 1,
  list: [1, 2, 3]

}

const nextProps = {
  ...props,
  list: [...props.list, 4]
}

잘못된 사용 방법

const props = {
  id: 1,
  list: [1, 2, 3]
}

const list = props.list; // 変更前のpropsと同じreferenceになるため
list.push(4)

nextProps = {
  ...props,
  list
}

6. 혜택

React Lifecycle

7. 참조

http://mp.weixin.qq.com/s/05SWQW7XeHHsk4QvACiMeA
https://kunigami.blog/2015/04/28/react-js-introduction/
http://jyane.jp/2016/08/12/react-purecomponent.html