대응: 컴포넌트의 컨스트럭터를 한 번만 호출하는 이유는 무엇입니까?

대응: 컴포넌트의 컨스트럭터를 한 번만 호출하는 이유는 무엇입니까?

다음 예시는 다음과 같습니다.Item 2를 클릭합니다.Second 1대신 표시됩니다.Second 2왜요? 어떻게 고칠 거예요?

---

var guid = 0;

class Content extends React.Component {
  constructor() {
    guid += 1;
    this.id = guid;
    console.log('ctor', this.id); // called only once with 1
  }
  render() {
    return (
      <div className="content">
        {this.props.title} - {this.id}
      </div>
    );
  }
}

class MyApp extends React.Component {
  constructor() {
    this.items = ['Item 1', 'Item 2'];
    this.state = {
      activeItem: this.items[0]
    };
  }
  onItemClick(item) {
    this.setState({
      activeItem: item
    });
  }
  renderMenu() {
    return (
      <div className="menu">
        <div onClick={this.onItemClick.bind(this, 'Item 1')}>Item 1</div>
        <div onClick={this.onItemClick.bind(this, 'Item 2')}>Item 2</div>
      </div>
    );
  }
  renderContent() {
    if (this.state.activeItem === 'Item 1') {
      return (
        <Content title="First" />
      );
    } else {
      return (
        <Content title="Second" />
      );
    }
  }
  render() {
    return (
      <div>
        {this.renderMenu()}
        {this.renderContent()}
      </div>
    );
  }
}

React의 조정 알고리즘은 반대로 정보가 없으면 커스텀컴포넌트가 후속 렌더링의 같은 장소에 표시되는 경우 이전과 같은 컴포넌트이므로 새로운 인스턴스를 작성하지 않고 이전 인스턴스를 재사용한다고 가정합니다.

구현이 필요한 경우componentWillReceiveProps(nextProps)대신 전화가 걸려오는 것을 알 수 있습니다.

다른 노드 유형

가 될 가능성은 매우 낮다.<Header>요소는 DOM을 생성합니다.이 DOM은 DOM을 생성하기 때문에<Content>생성될 것입니다.React는 이 두 가지 구조를 조합하는 데 시간을 들이지 않고 처음부터 트리를 재구축합니다.

결론적으로, 만약 어떤 것이 있다면<Header>두 개의 연속 렌더링에서 동일한 위치에 있는 요소를 사용하면 매우 유사한 구조를 볼 수 있으므로 살펴볼 가치가 있습니다.

커스텀 컴포넌트

두 개의 커스텀 컴포넌트가 동일하다고 판단했습니다.컴포넌트는 스테이트풀하기 때문에 새로운 컴포넌트를 사용하는 것만으로 끝낼 수 없습니다.React는 새로운 컴포넌트에서 모든 Atribut을 가져와 호출한다.component[Will/Did]ReceiveProps()전번에는요.

이전 컴포넌트가 동작하게 되었습니다.그것의.render()메서드가 호출되고 diff 알고리즘이 새로운 결과 및 이전 결과로 재시작됩니다.

각 컴포넌트에 고유한 프로펠러를 지정하면 React는key컴포넌트가 실제로 대체되어 새로운 컴포넌트를 처음부터 생성하여 컴포넌트의 라이프 사이클 전체를 얻을 수 있도록 변경한다.

---

  renderContent() {
    if (this.state.activeItem === 'Item 1') {
      return (
        <Content title="First" key="first" />
      );
    } else {
      return (
        <Content title="Second" key="second" />
      );
    }
  }

언급URL : https://stackoverflow.com/questions/29074690/react-why-components-constructor-is-called-only-once