반응: 부모 구성 요소가 다시 렌더링될 때 어린이가 항상 다시 렌더링합니까?

반응: 부모 구성 요소가 다시 렌더링될 때 어린이가 항상 다시 렌더링합니까?

컴포넌트가 재렌더된 그 으로 알고 .다만, 이 컴포넌트가 실장되지 않는 한, 재렌더 .shouldComponentUpdate()사실이 아닌 것 같은 예를 들어봤습니다.

는 3가지되어 있습니다: 3가지로 나누어져 있습니다.<DynamicParent/>,<StaticParent/> ★★★★★★★★★★★★★★★★★」<Child/> . 。<Parent/>는, 「이러다」의 하고 있습니다.<Child/>지른

<StaticParent/>는 " " " 를 정적으로 <Child/>을 사용하다

 <StaticParent>
    <Child />
 </StaticParent>

★★★★★<DynamicParent/>는 수신 및 합니다.<Child/>

 <DynamicParent>
    { this.props.children }
 </DynamicParent>

다.<DynamicParent/> ★★★★★★★★★★★★★★★★★」<StaticParent/> 가지다onClick[청취자] '청취자'했을 때 알 수 있었습니다.<StaticParent/>과 그 <Child/>시시시렌렌렌다다다, 을 클릭하면<DynamicParent/> NOT, " " " 입니다.<Child/>시시시렌렌렌다다다

<Child/> 컴포넌트입니다.shouldComponentUpdate()왜 다시 렌더링되지 않는지 이해가 안 돼요.왜 이런 일이 일어나는지 누가 설명 좀 해줄래?이 사용 사례와 관련된 문서는 찾을 수 없습니다.

컨텍스트를 위해 실제 코드를 게시합니다.

class Application extends React.Component {
  render() {
    return (
      <div>
        {/* 
          Clicking this component only logs 
          the parents render function 
        */}
        <DynamicParent>
          <Child />
        </DynamicParent>

        {/* 
          Clicking this component logs both the 
          parents and child render functions 
        */}
        <StaticParent />
      </div>
    );
  }
}

class DynamicParent extends React.Component {
  state = { x: false };
  render() {
    console.log("DynamicParent");
    return (
      <div onClick={() => this.setState({ x: !this.state.x })}>
        {this.props.children}
      </div>
    );
  }
}

class StaticParent extends React.Component {
  state = { x: false };
  render() {
    console.log("StaticParent");
    return (
      <div onClick={() => this.setState({ x: !this.state.x })}>
        <Child />
      </div>
    );
  }
}

function Child(props) {
  console.log("child");
  return <div>Child Text</div>;
}

응용 프로그램 렌더링에 이 코드를 쓸 때:

<StaticParent />

결과는 다음과 같습니다.

 <div onClick={() => this.setState({ x: !this.state.x })}>
    <Child />
 </div>

실제로 (대략적으로) 다음과 같은 일이 발생합니다.

function StaticParent(props) {
  return React.createElement(
    "div",
    { onClick: () => this.setState({ x: !this.state.x }) },
    React.createElement(Child, null)
  );
}

React.createElement(StaticParent, null);

DynamicParent를 다음과 같이 렌더링하는 경우:

<DynamicParent>
    <Child />
</DynamicParent>

이것이 실제로 일어나는 일입니다(다시 대략적으로 말하면).

function DynamicParent(props) {
    return React.createElement(
        "div",
        { 
            onClick: () => this.setState({ x: !this.state.x }), 
            children: props.children 
        }
    );
}

React.createElement(
      DynamicParent,
      { children: React.createElement(Child, null) },
);

그리고 이것은 두 경우 모두 아이입니다.

function Child(props) {
    return React.createElement("div", props, "Child Text");
}

것은은 ?엇 ?? ????StaticParent를 StaticParent라고 React.createElement(Child, null)StaticParent는 StaticParent로, StaticParent는 StaticParent입니다.DynamicParent는 DynamicParent로, Dynamic Parent는 Dynamic Parent로, Dynamic Parent는 Dynamic Parent입니다. 그 이후로React.createElement순수한 기능이라면 아마 퍼포먼스를 위해 어딘가에 메모되어 있을 겁니다.

DynamicParent 케이스에서 Child의 렌더링을 다시 실행할 수 있는 것은 Child의 소품 변경입니다.예를 들어 부모 상태가 자녀에 대한 지지물로 사용된 경우 두 경우 모두 렌더가 트리거됩니다.

Dan Abramov가 이 답변을 망치기 위해 댓글에 나타나지 않았으면 좋겠어요.쓰기가 힘들었지만 재미있었어요.

두 명의 "아이"가 있는 것이 주된 원인입니다.

• this.http.children
• <Child/>

prop에서 전해진Application -> DynamicParent은 " " " 입니다Component rendered로 StaticParent 사이클이 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

동봉된 예

class Application extends React.Component {
  render() {
    return (
      <div>
        {/* 
          Clicking this component only logs 
          the parents render function 
        */}
        <DynamicParent>
          <Child />
        </DynamicParent>

        {/* 
          Clicking this component logs both the 
          parents and child render functions 
        */}
        <StaticParent />
      </div>
    );
  }
}

말 그대로 다음과 같습니다.

class Application extends React.Component {
  render() {
    // If you want <Child/> to re-render here
    // you need to `setState` for this Application component.
    const childEl = <Child />;
    return (
      <div>
        {/* 
          Clicking this component only logs 
          the parents render function 
        */}
        <DynamicParent>
          {childEl}
        </DynamicParent>

        {/* 
          Clicking this component logs both the 
          parents and child render functions 
        */}
        <StaticParent />
      </div>
    );
  }
}

SrThompsons에 대한 코멘트는 다음과 같습니다.DynamicParent 케이스에서 Child의 렌더링을 다시 실행할 수 있는 것은 Child의 소품 변경입니다.예를 들어 부모 상태가 자녀에 대한 버팀목으로 사용되면 두 경우 모두 재렌더가 트리거됩니다."따라서 소품 또는 소품 이외의 소품이 아이 컴포넌트에 전달되지만 외관상으로는 부모가 렌더하면 렌더가 발생합니다(따라서 사용).React.memo소품 없는 어린이용 :)

"React를 확장하는 클래스 컴포넌트로 컴포넌트를 구현하고 있는지 여부.컴포넌트 또는 기능 컴포넌트로서 부모 컨테이너가 다시 렌더링 할 때마다 렌더 함수가 다시 호출됩니다."자세한 내용은 이쪽을 참조해 주세요.왜냐하면 훌륭한 기사이기 때문입니다.https://medium.com/free-code-camp/yeah-hooks-are-good-but-have-you-tried-faster-react-components-e698a8db468c"

변경된 컴포넌트만 재렌더합니다.하위 구성 요소에서 변경된 내용이 없으면 다시 렌더링되지 않습니다.

언급URL : https://stackoverflow.com/questions/50053064/react-do-children-always-rerender-when-the-parent-component-rerenders