[reactjs] 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는이 주제에 관한 기사를 썼습니다.
그리고 그 요점은 이 시나리오를 피하기 위해 그것을 통과 시키는 습관을 갖는 것이 도움 이된다는 것입니다.
// 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. 물론 이것은 단지 예제 일뿐이므로 키 / 값 쌍을 상태 객체, 즉 빈 객체에 실제로 할당하지 않았습니다.
