Component 와 Pure Component 의 차이 점

글 목록

Component 와 Pure Component 의 차이

소개

차이 점:

PureComponent 단점

PureComponent 우세

왜 퓨 어 컴 포 넌 트 는 비교적 복잡 한 데이터 구조 로 심층 적 인 데이터 불일치 로 잘못된 부정 적 판단 이 발생 할 수 있 습 니까?

ReactNative 시리즈 - 글
Component 와 Pure Component 의 차이 점
소개 하 다.
React. PureComponent 는 React. Component 와 거의 같 지만 React. PureComponent 는 props 와 state 의 얕 은 대 비 를 통 해 shouldComponent Upate () 를 실현 합 니 다.
퓨 어 컴 포 넌 트 에 서 는 비교적 복잡 한 데이터 구 조 를 포함 할 경우 심층 적 인 데이터 불일치 로 잘못된 부정 적 판단 이 발생 해 인터페이스 가 업데이트 되 지 않 을 수 있다.
shouldComponent Update () 를 정의 하면 구성 요소 가 Pure Component 이 든 아니 든 shouldComponent Update 결 과 를 실행 하여 update 여 부 를 판단 합 니 다.구성 요소 가 shouldComponent Update () 를 구현 하지 않 으 면 이 구성 요소 가 PureComponent 인지 판단 하고, 그렇다면 신 구 props, state 를 shallow Equal 로 비교 하 며, 신 구 일치 하지 않 으 면 update 를 실행 합 니 다.
얕 은 대비: 대상 의 키 를 옮 겨 다 니 며 같은 성 을 수행 하고 모든 키 가 매개 변수 간 에 엄격 하지 않 은 값 을 가지 고 있 을 때 false 로 돌아 갑 니 다.모든 키 의 값 이 엄 격 히 같 을 때 true 로 돌아 갑 니 다.shallowEqual
차이 점:

Pure Component 는 props 와 state 의 얕 은 대 비 를 통 해 shouldComponent Upate () 를 실현 하고 Component 는 없다.

PureComponent 단점

심층 데이터 가 일치 하지 않 아 잘못된 부정 판단 이 발생 할 수 있 으 므 로 shouldComponent Update 결 과 는 false 로 돌아 가 고 인터페이스 가 업데이트 되 지 않 습 니 다.

PureComponent 우위

개발 자가 스스로 shouldComponent Update 를 실현 하지 않 아 도 간단 한 판단 을 통 해 성능 을 향상 시 킬 수 있 습 니 다.

왜 PureComponent 는 비교적 복잡 한 데이터 구조 로 심층 적 인 데이터 불일치 로 인해 잘못된 부정 적 판단 이 발생 할 수 있 습 니까?
JavaScript 의 대상 은 일반적으로 가 변 적 (Mutable) 입 니 다. 인용 할당 을 사 용 했 기 때문에 새로운 대상 은 원본 대상 을 간단하게 인용 하고 새로운 대상 을 바 꾸 면 원본 대상 에 영향 을 줍 니 다.foo = {a: 1};bar=foo; bar. a = 2 이때 foo. a 도 2 로 바 뀌 었 다 는 것 을 알 게 될 것 이다.
이 문 제 를 해결 하기 위해 서 는 일반적으로 shallowCopy (얕 은 복사) 나 deepCopy (깊 은 복사) 를 사용 하여 수정 되 지 않도록 하 는 것 이지 만 이렇게 하면 CPU 와 메모리 의 낭 비 를 초래 합 니 다.

let foo = {a: {b: 1}};
let bar = foo;
bar.a.b = 2;
console.log(foo.a.b);  //    2
console.log(foo === bar); //    true

fb 의 shallow Equal 방법 소스 코드 에서 볼 수 있 습 니 다. 다음 과 같 습 니 다. 얕 은 대 비 는 Object. is () 로 Object 의 value 에 대해 기본 데이터 형식 을 비교 한 것 입 니 다.

function is(x: mixed, y: mixed): boolean {
  // SameValue algorithm
  if (x === y) { // Steps 1-5, 7-10
    // Steps 6.b-6.e: +0 != -0
    // Added the nonzero y check to make Flow happy, but it is redundant
    return x !== 0 || y !== 0 || 1 / x === 1 / y;
  } else {
    // Step 6.a: NaN == NaN
    return x !== x && y !== y;
  }
}

function shallowEqual(objA: mixed, objB: mixed): boolean {
  if (is(objA, objB)) {
    return true;
  }

  if (typeof objA !== 'object' || objA === null ||
      typeof objB !== 'object' || objB === null) {
    return false;
  }

  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) {
    return false;
  }

  // Test for A's keys different from B.
  for (let i = 0; i < keysA.length; i++) {
    if (
      !hasOwnProperty.call(objB, keysA[i]) ||
      !is(objA[keysA[i]], objB[keysA[i]])
    ) {
      return false;
    }
  }

  return true;
}

우리 먼저 is () 함수 에 대해 분석 합 시다.
js 에서 '= = =' 은 데이터 유형 이 같은 지 판단 할 수 있 지만 사실은 이런 방식 도 매우 엄밀 하지 않다. 예 를 들 어

+0 === -0; // js   true
NaN === NaN; // js   false

우 리 는 상술 한 판단 결 과 를 원 합 니 다. + 0 과 - 0 은 false 이 고, NaN 과 NaN 은 true 입 니 다. 이 럴 때 이런 방식 을 사용 할 수 있 습 니 다.

1/+0 //    Infinity
1/-0 //    -Infinity
Infinity === -Infinity; // false

   NaN === NaN false，    NaN            
x !== x && y !== y

그래서 is () 함 수 는 먼저 '= =' 을 통 해 데이터 형식 을 비교 한 다음 에 + 0 / - 0 과 NaN 의 비교 문 제 를 해결한다.
다음은 shallowEqual () 함수 분석

function shallowEqual(objA: mixed, objB: mixed): boolean {
  //                
  if (is(objA, objB)) {
    return true;
  }

  //         object   
  if (typeof objA !== 'object' || objA === null ||
      typeof objB !== 'object' || objB === null) {
    return false;
  }

  //      key
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);

  //     key       
  if (keysA.length !== keysB.length) {
    return false;
  }

  //   key    ，    for     
  for (let i = 0; i < keysA.length; i++) {
    if (
      //     B       A key，    keys    
      !hasOwnProperty.call(objB, keysA[i]) ||
      //   is()    A B key     
      !is(objA[keysA[i]], objB[keysA[i]])
    ) {
      return false;
    }
  }

다음은 구성 요소 의 사용 을 예 로 들 면:
예 를 들 면:

class ChildComponent extends React.PureComponent {
  render() {
    return(
      <div>
        {this.props.numbers}
      </div>
    )
  }
}
class MainComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      numbers: [0]
    }
  }
  handleClick() {
    const arr = this.state.numbers;
    arr.push(1);
    this.setState({
      numbers: arr
    })
    console.log(this.state.numbers)
  }
  render() {
    <div>
      <button onClick={this.handleClick} />
      <ChildComponent numbers={this.state.numbers}/>
    </div>
  }
}

그러나 MainComponent 에서 numbers 를 수정 할 때 ChildComponent 는 새로 고침 되 지 않 았 다.이 유 는 js 가 인용 할당 을 사용 하기 때 문 입 니 다. 새로운 대상 은 원본 대상 을 간단하게 인용 하고 새로운 대상 을 바 꾸 는 것 은 원본 대상 에 영향 을 주 었 지만 대상 의 주 소 는 똑 같 습 니 다. 사용 = = 비교 방식 이 같 습 니 다.Pure Component 에 서 는 render () 를 터치 하지 않 고 prop 가 같다 는 판정 을 받 습 니 다.
이러한 문 제 를 피 하 는 가장 간단 한 방법 은 사용 치가 돌변 할 수 있 는 속성 이나 상 태 를 피 하 는 것 이 아니 라 복사 본 을 사용 하여 새로운 변 수 를 되 돌려 주 는 것 이다.

handleClick() {
  this.setState(prevState => ({
    words: [...prevState.words, 'marklar'],
  }));
};

또 다른 방식 은 Immutable. js 를 사용 하 는 것 입 니 다.