Component 또는 PureComponent

Component 또는 PureComponent
Pure Component, 전신 은 Pure Render Mixin 입 니 다. Component 와 기본적으로 같 습 니 다. render 전에 구성 요 소 를 도와 shallow Equal (얕 은 비교) 을 자동 으로 실행 하여 구성 요 소 를 업데이트 할 지 여 부 를 결정 합 니 다. 얕 은 비 교 는 얕 은 복사 와 유사 하고 1 층 만 비교 합 니 다.
Component 는 setState () 와 props 의 변화 만 있 으 면 render 를 촉발 합 니 다.
페이지 를 다시 render 하고 싶 지 않 으 면 shouldComponentUpdate 를 써 서 render 를 차단 해 야 합 니 다.

shouldComponentUpdate(nextProps, nextState) {
  return nextProps.xxx.xx === props.xxx.xx;
}

PureComponent
Pure Component 가 shouldComponent 업데이트 이 벤트 를 처리 합 니 다.props 나 state 가 변화 하면 Pure Component 는 둘 다 얕 게 비교 합 니 다.반면 Component 는 이들 의 신 구 치 를 비교 하지 않 는 다.

if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps)
  || !shallowEqual(inst.state, nextState);
}

얕 은 비교
얕 은 비 교 는 기본 데이터 형식의 값 이 같 는 지 만 검사 합 니 다 (예 를 들 어 1 은 1 또는 true 는 true 와 같 습 니 다). 복잡 합 니 다. 예 를 들 어 대상 과 배열 은 인용 값 만 비교 하고 1 층 만 비교 하 며 재 귀적 으로 비교 하지 않 습 니 다. 그러면 render 는 더욱 복잡 합 니 다.
문제 에 주의 하 다
변 하기 쉬 운 데 이 터 는 인용 을 사용 할 수 없습니다.
delete 단 추 를 아무리 눌 러 도 li 는 줄 어 들 지 않 습 니 다. items 는 하나의 인용 을 사용 하기 때문에 shallow Equal 의 결 과 는 true 입 니 다.
이 items 는 사실 state 의 items 를 가리 키 며 작 동 합 니 다. 본질 적 으로 인용 은 변 하지 않 았 고 render 를 촉발 하지 않 습 니 다.

class App extends PureComponent {
  state = {
    items: [1, 2, 3]
  }
  handleClick = () => {
    const { items } = this.state;
    items.pop();
    this.setState({ items });
  }
  render() {
    return (

      

        {this.state.items.map(i => 
{i}
)}
      
      delete
    
)
  }
}

render 를 실행 하려 면 인용 을 바 꿔 야 합 니 다.

handleClick = () => {
  const { items } = this.state;
  items.pop();
  this.setState({ items: [].concat(items) });
}

부모 구성 요소 하위 구성 요소 에 함수 전달
부모 구성 요소 에는 하위 구성 요소 목록 이 있 습 니 다. 각각 부모 구성 요소 방법 에 유일한 매개 변 수 를 전달 합 니 다.이 매개 변 수 를 연결 하기 위해 서 이렇게 할 수 있 습 니 다:

 this.likeComment(user.id)} />

문 제 는 부모 구성 요소 의 render 방법 이 호출 될 때마다 () = > this. likeComment (user. id) 는 새 함수 (새로운 인용 과 함께) 를 되 돌려 주 고 likeComment 속성 에 전달 합 니 다.이러한 구성 요소 의 props 를 얕 게 비교 할 때 props 참조 가 변 하여 render 가 되 었 음 을 발견 할 수 있 습 니 다. 그래서 우 리 는 이렇게 쓰 면 render 를 줄 일 수 있 습 니 다.

render 방법 에서 데 이 터 를 얻 는 데 는 특별한 주의 가 필요 합 니 다.
다음 코드 에서 부모 구성 요 소 는 render topTen 의 참조 가 다시 생 성 될 때마다 하위 구성 요소 가 이 변수의 render 를 사용 하 게 됩 니 다.

render() {
  const { posts } = this.props
  const topTen = posts.sort((a, b) => b.likes - a.likes).slice(0, 9)
  return //...
}