es6 클래스를 사용할 때 React에서“super ()”와“super (props)”의 차이점은 무엇입니까?

때 통과하는 것이 중요하다 props에 super(), 그 이유는 무엇입니까?

class MyComponent extends React.Component {
  constructor(props) {
    super(); // or super(props) ?
  }
}

하나를 통과해야하는 한 가지 이유 만 존재 props로는 super():

this.props생성자 에서 액세스하려는 경우

통과:

class MyComponent extends React.Component {    
    constructor(props) {
        super(props)

        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

통과하지 않음 :

class MyComponent extends React.Component {    
    constructor(props) {
        super()

        console.log(this.props)
        // -> undefined

        // Props parameter is still available
        console.log(props)
        // -> { icon: 'home', … }
    }

    render() {
        // No difference outside constructor
        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

통과 여부가 통과하는 것을 주 props에가 super없습니다 효과 이후 사용에 this.props외부 constructor. 즉 render, shouldComponentUpdate또는 이벤트 핸들러 항상 그것을 액세스 할 수 있습니다.

이것은 비슷한 질문에 대한 Sophie Alpert의 답변 에서 명시 적으로 언급됩니다 .

설명서 - 클래스, 지점 2 지역 주 추가 주 및 라이프 사이클, -recommends :

클래스 컴포넌트는 항상로 기본 생성자를 호출해야합니다 props.

그러나 이유는 없습니다. 서브 클래 싱 때문이거나 향후 호환성을위한 것으로 추측 할 수 있습니다.

(링크에 대한 @MattBrowne 감사합니다)

이 예제에서는 React.Component클래스를 확장하고 있으며 ES2015 사양에 따라 자식 클래스 생성자는 호출 this될 때까지 사용할 수 없습니다 super(). 또한 ES2015 클래스 생성자 super()는 하위 클래스 인 경우 호출 해야합니다.

class MyComponent extends React.Component {
  constructor() {
    console.log(this); // Reference Error
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

대조적으로 :

class MyComponent extends React.Component {
  constructor() {
    super();
    console.log(this); // this logged to console
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

이 우수한 스택 오버플로 답변에 따라 자세한 내용

React.Component호출하지 않는 클래스를 확장하여 만든 구성 요소의 예를 볼 수 있습니다super() 있지만 이러한 요소가없는 것을 constructor알 수 있습니다.

class MyOtherComponent extends React.Component {
  render() {
    return <div>Hi {this.props.name}</div>;
  }
}

내가 말한 일부 개발자들에게서 본 혼란의 한 가지 점은 아무 constructor것도없고 호출 할 수없는 구성 요소가 super()여전히 메소드 this.props에서 사용 가능 하다는 것 render()입니다. 이 규칙과이 규칙에 대한 this바인딩 constructor만 작성해야 합니다 constructor.

당신이 통과하는 경우 props에 super, 소품을 할당받을 this. 다음 시나리오를 살펴보십시오.

constructor(props) {
    super();
    console.log(this.props) //undefined
}

언제 당신이 할 :

constructor(props) {
    super(props);
    console.log(this.props) //props will get logged.
}

에 따라 소스 코드

function ReactComponent(props, context) {
  this.props = props;
  this.context = context;
}

props소품이있을 때마다 통과해야하며 this.props수동으로 넣지 마십시오 .

Dan Abramov는이 주제에 관한 기사를 썼습니다.

왜 super (props)를 작성합니까?

그리고 그 요점은 이 시나리오를 피하기 위해 그것을 통과 시키는 습관을 갖는 것이 도움 이된다는 것입니다.

// Inside React
class Component {
  constructor(props) {
    this.props = props;
    // ...
  }
}

// Inside your code
class Button extends React.Component {
  constructor(props) {
    super(); // 😬 We forgot to pass props
    console.log(props);      // ✅ {}
    console.log(this.props); // 😬 undefined 
  }
  // ...
}

super() 부모 생성자를 호출하는 데 사용됩니다.

super(props)props부모 생성자에게 전달 됩니다.

귀하의 예 에서 인수로 전달 super(props)되는 React.Component생성자를 호출합니다 props.

에 대한 자세한 정보 super: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super

constructor()React 컴포넌트 내부 에서 함수를 구현할 때 super()요구 사항입니다. MyComponent컴포넌트가 React.Component기본 클래스 에서 기능을 확장하거나 차용 하고 있음을 명심하십시오 .

이 기본 클래스에는 constructor()React 컴포넌트를 설정하기위한 코드가 포함 된 자체 기능이 있습니다.

우리가 정의 할 때 constructor()우리의 내부 기능 MyComponent클래스를, 우리는 무시하거나 교체, 본질적으로 constructor()내부입니다 기능 React.Component클래스를,하지만 우리는 여전히이 모든 설정 코드 내부에 있는지 확인해야합니다constructor() 함수가 여전히 호출됩니다.

그래서 있는지 확인 React.Component의 constructor()함수가 호출됩니다, 우리는 전화 super(props). super(props)부모 constructor()함수에 대한 참조 입니다.

클래스 기반 컴포넌트 내에서 함수를 super(props)정의 할 때마다 매번 추가해야합니다 constructor().

그렇지 않으면에 전화해야한다는 오류 메시지가 표시됩니다 super(props).

이 constructor()기능 을 정의하는 전체 이유 는 상태 객체를 초기화하기위한 것입니다.

따라서 상태 객체를 초기화하기 위해 슈퍼 콜 아래에 작성하겠습니다.

class App extends React.Component {
  constructor(props) {
      super(props);

      this.state = {};
   }

  // React says we have to define render()
  render() {
    return <div>Hello world</div>;
  }
};

따라서 constructor()메소드를 정의하고 JavaScript 객체를 생성하고 속성 또는 키 / 값 쌍을 할당하고 그 결과를에 할당하여 상태 객체를 초기화했습니다 this.state. 물론 이것은 단지 예제 일뿐이므로 키 / 값 쌍을 상태 객체, 즉 빈 객체에 실제로 할당하지 않았습니다.

내가 만든 바이올린은 다음과 같습니다. jsfiddle.net . props가 기본적으로 생성자에 지정되지 않았 음을 나타냅니다. 내가 이해하는 것처럼 그들은 방법에서 주장된다 React.createElement. 따라서 super(props)경우에만 슈퍼 클래스의 생성자 수동의 assings를 호출 할 필요가 props에 this.props. 당신이 React.Component전화 super(props)를 연장하면 소품으로 아무것도하지 않습니다. 다음 버전의 React에서 변경 될 수 있습니다.

여기서 우리는 이것을 생성자에서 얻지 못하여 정의되지 않은 것을 반환하지만, 생성자 함수 외부에서 이것을 가져올 수 있습니다

class MyComponent extends React.Component {
  constructor() {
    console.log(this); // Reference Error i.e return undefined
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

super ()를 사용하는 경우 생성자 내에서 "this"변수를 가져올 수도 있습니다.

class MyComponent extends React.Component {
  constructor() {
    super();
    console.log(this); // this logged to console
  }

  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

우리가 super ()를 사용할 때; 이것을 가져올 수는 있지만 this.props는 생성자에서 정의되지 않습니다. 그러나 생성자 이외의 this.props는 undefined를 반환하지 않습니다.

super (props)를 사용하면 생성자 내부에서도 this.props 값을 사용할 수 있습니다

소피 알퍼트의 답변

생성자에서 this.props를 사용하려면 prop을 super로 전달해야합니다. 그렇지 않으면 React가 생성자를 호출 한 직후 외부에서 인스턴스에 .props를 설정하기 때문에 중요하지 않습니다.

반응 버전 16.6.3의 경우 super (props) 를 사용 하여 상태 요소 이름 을 초기화합니다 . this.props.name

constructor(props){
    super(props);        
}
state = {
  name:this.props.name 
    //otherwise not defined
};