React 생성자에서 super () 호출은 무엇을합니까?
문서 에서 React를 배우고이 예제를 보았습니다 .
class Square extends React.Component {
constructor() {
super();
this.state = {
value: null,
};
}
...
}
Mozilla 에 따르면 super는 this
생성자에서 사용할 수 있습니다 . 독립형을 사용하는 다른 이유가 있습니까 super
( super
부모 클래스의 메서드에도 액세스 할 수 있음을 알고 있습니다).하지만 React를 사용하면 super()
자체적으로 호출 하는 다른 사용 사례가 있습니까?
super()
생성자가있는 경우에만 반응 구성 요소 내에서 호출됩니다. 예를 들어 아래 코드에는 super가 필요하지 않습니다.
class App extends React.component {
render(){
return <div>Hello { this.props.world }</div>;
}
}
그러나 생성자 super()
가 있으면 필수입니다.
class App extends React.component {
constructor(){
console.log(this) //Error: 'this' is not allowed before super()
}
}
this
이전 super()
에 허용되지 않는 이유 this
는를 super()
호출하지 않으면 초기화되지 않았기 때문 입니다 . 그러나 사용하지 않더라도 생성자 내부 this
가 필요합니다 . 따라서 생성자가있는 한 호출 해야합니다. (그러나 서브 클래스는 생성자를 가질 필요가 없습니다).super()
ES6 class constructors MUST call super if they are subclasses
super()
super(props)
를 사용해야하는 경우 생성자 내부에서 호출 this.props
합니다. 예를 들면 다음과 같습니다.
class App extends React.component{
constructor(props){
super(props);
console.log(this.props); // prints out whatever is inside props
}
}
분명히 할 수 있기를 바랍니다.
super()
constructor
해당 parent
클래스 의 를 호출합니다 . 부모 클래스에서 일부 변수에 액세스해야 할 때 필요합니다.
React에서 super
props로 호출 할 때 . 것 반응 props
구성 요소를 통해 가로 질러 가능 this.props
. 아래 예 2 참조
없이 super()
class A {
constructor() {
this.a = 'hello'
}
}
class B extends A {
constructor(){
console.log(this.a) //throws an error
}
}
console.log(new B())
와 super()
class A {
constructor(props) {
this.props = props
}
}
class B extends A {
constructor(props) {
super(props)
console.log(this.props)
}
}
console.log(new B({title: 'hello world'}))
도움이 되었기를 바랍니다!
When implementing the constructor for a React.Component subclass
, you should call super(props)
before any other statement. Otherwise, this.props
will be undefined
in the constructor, which can lead to bugs.
To use this
keyword we should use the super
keyword before it. Why? super
is used to call the parent class's constructor
.
Now why do we need to call the parent's constructor
? The answer is to initialize the properties values which we are referring through this
keyword.
참고URL : https://stackoverflow.com/questions/40433463/what-does-calling-super-in-a-react-constructor-do
'IT Share you' 카테고리의 다른 글
임의 키에 대한 Java Lambda Stream Distinct ()? (0) | 2020.12.06 |
---|---|
통합 테스트를위한 Spring-boot 기본 프로필 (0) | 2020.12.06 |
Android Studio 3.0 버전에서 AVD 관리자를 여는 방법은 무엇입니까? (0) | 2020.12.06 |
Big Endian과 Little Endian 바이트 순서의 차이점 (0) | 2020.12.06 |
Oracle에서 SELECT COUNT (*) FROM sometable에 대한 더 빠른 대안 (0) | 2020.12.06 |