선택적 하위 구성요소 렌더

선택적 하위 구성요소 렌더

여기 도움이 필요한 기본적인 질문.이럴 때마다.상위 구성요소에서 호출되는 setState, 모든 하위 구성요소가 렌더링된다.이것은 내가 엄청난 양의 아동 구성품을 가지고 있다면 성능 문제를 일으킬 것이다.

예를 들어보자.

상위 구성 요소

handleToggleTick() {
    const newObj = Object.assign({}, this.state, { iconName: ''});
    this.setState({
      iconName: newObj.iconName,
    });
}

render() {
  return(
    <ChildComponentA iconName={this.state.iconName} toggleTick={() => this.handleToggleTick}></ChildComponentA>
    <ChildComponentB></ChildComponentA>
    <ChildComponentC></ChildComponentA>
  )
}

위의 예에 따라 handleToggleTick이 childcomponentA에서 호출될 때마다 setState가 새 iconName에 대해 호출된다.내가 원하는 것은 오직 ChildComponentA만 sprops.iconName은 그것과 관련이 있지만 ChildComponentB와 ChildC는 아니다.

렌더링을 방지하기 위해 childComponentUpdate를 check할 수 있는 옵션이 있는 것으로 알고 있다.그러나 자식 구성 요소가 100개 이상 있다고 가정해 보십시오. 구성 요소 업데이트 방법을 100번 이상 쓰는 것이 불만스러울까?

난 여기 도움이 필요해, 조언 좀 해줘!

리액션은 아이들을 선택적으로 낳게 하는 어떤 방법도 제공하지 않는다.구성 요소는 렌더링하거나 렌더링하지 않는다.하지만 우리가 실제로 리액션을 사용할 때 왜 이것이 문제가 되지 않는지 몇 가지 점을 강조할 필요가 있다.

우선 수동으로 구현할 필요가 없다.shouldComponentUpdate각 구성 요소에 대해소품이나 상태가 바뀌지 않은 경우 구성요소를 리렌더하지 않으려면 단지 수업에서 벗어나면 된다.Componentclass. 참고하십시오.React.PureComponent's shouldComponentUpdate()상태와 소품에만 얕은 비교를 사용한다.하지만 만약 여러분이 모범 사례를 따르고 국가를 변이시키는 것을 피한다면 이것은 문제가 되지 않을 것이다.

또한, 한 렌더 방식으로 100개 이상의 다른 구성요소를 갖는 것은 실용적이지 않다.항상 UI를 더 작은 구성 요소로 분해하고 구성 요소 구성을 사용하도록 권장하십시오.우리가 이 접근법을 따를 때, 구성요소는 한 렌더 방법으로 많은 수의 구성요소를 갖는 대신 서로 다른 수준으로 서로 내포될 것이다.

내가 설명하고자 하는 것은 큰 용기 구성 요소(1) 안에 많은 구성 요소를 가지고 있는 것보다 중첩된 방식(2)으로 구성했을 때 보다 실용적이고 관리하기 쉽다는 것이다.

예를 들어 ChildComponentB와 ChildComponentC가 ChildConaterComponent라고 하는 다른 구성 요소 안에 있다면 우리는 단지 구현만 하면 된다.shouldComponentUpdate()ChildConaterComponent의 경우. 으로 그 안에 있는 어떤 그러면 자동으로 그 안에 있는 모든 하위 요소의 렌더링을 중지할 것이다.

render() {
  return(
    <ChildComponentA iconName={this.state.iconName}
      toggleTick={() => this.handleToggleTick}/>
    <ChildConatainerComponent/>
  )
}

class ChildConatainerComponent extends PureComponent {
  render() {
    return (
      <div>
       <ChildComponentB/>
       <ChildComponentC/>
      </div>
    );
  }
}

명심해야 할 또 다른 중요한 개념은 전화를 거는 것이다.render함수는 React가 모든 DOM 요소를 다시 생성한다는 것을 의미하지는 않는다.그renderMethod는 DOM의 메모리 내 표현인 Reactive virtual DOM만 변경하고 실제 DOM보다 빠르다.그런 다음 업데이트 전, 업데이트 후의 가상 DOM 버전 비교 및 실제 DOM은 실제로 변경된 버전만 업데이트된다.

고려할 수 있는 또 다른 해결책은 움직이는 것이다.iconNameChildComponentA이것만이 그것과 관련된 유일한 요소라는 것을 고려한다.

참조URL: https://stackoverflow.com/questions/44099444/selective-children-component-render