React/React Native에서 컨스트럭터를 사용하는 것과 getInitialState를 사용하는 것의 차이점은 무엇입니까?
둘 다 서로 바꿔 사용하는 걸 봤어요.
두 가지 주요 사용 사례는 무엇입니까?장점/단점이 있습니까?그게 더 나은 방법인가요?
이 두 가지 접근법은 서로 호환되지 않습니다.ES6하고 ES6를 해야 .getInitialStateReact.createClass.
ES6 클래스의 주제에 대해서는 React 공식 문서를 참조하십시오.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { /* initial state */ };
}
}
와 동등하다
var MyComponent = React.createClass({
getInitialState() {
return { /* initial state */ };
},
});
「 」의 constructor ★★★★★★★★★★★★★★★★★」getInitialStateES6와 ES5의 차이점입니다.
getInitialState요.React.createClass...
constructor요.React.Component.
따라서 질문은 ES6 또는 ES5를 사용하는 것의 장점과 단점으로 요약됩니다.
코드의 차이를 봅시다.
ES5
var TodoApp = React.createClass({
propTypes: {
title: PropTypes.string.isRequired
},
getInitialState () {
return {
items: []
};
}
});
ES6
class TodoApp extends React.Component {
constructor () {
super()
this.state = {
items: []
}
}
};
이와 관련하여 흥미로운 레딧 스레드가 있습니다.
리액트 커뮤니티는 ES6에 가까워지고 있습니다.또, 베스트 프랙티스로 여겨지고 있습니다.
다른 점이 있다React.createClass ★★★★★★★★★★★★★★★★★」React.Component를 들어, 어떻게, 어떻게this이 경우 처리됩니다.이러한 차이점에 대한 자세한 내용은 이 블로그 포스트와 자동 바인딩에 대한 Facebook의 콘텐츠를 참조하십시오.
constructor이러한 상황에 대처하기 위해서도 사용할 수 있습니다. , 「」에 할 수 .constructor이런 멋진 일을 하기에 좋은 재료입니다.
프랙티스에 더
jsReact.js 상태의
에서 변환
갱신일 : 2019년 4월 9일 :
Javascript 클래스 API의 새로운 변경으로 컨스트럭터가 필요 없습니다.
할 수 있다
class TodoApp extends React.Component {
this.state = {items: []}
};
이 파일은 컨스트럭터 형식으로 변환되지만 걱정할 필요는 없습니다.보다 읽기 쉬운 형식을 사용할 수 있습니다.
리액트 훅 포함
React 버전 16.8부터는 React hooks라는 새로운 API가 있습니다.
주(州)를 갖기 위해 클래스 구성 요소도 필요하지 않습니다.기능적인 컴포넌트에서도 가능합니다.
import React, { useState } from 'react';
function TodoApp () {
const items = useState([]);
됩니다.useStateuseState([])
리액트 훅에 대한 자세한 내용은 공식 문서를 참조하십시오.
큰 , , 이, 이, 는, 는, 는, 는, 는, 는, 는, 는, 는, 는, 는, 는, 는, 는, 는, 는, 는는, 는, 는, 는, 는, 는, 는, ok,constructor는 JavaScript에서이며, 에는 JavaScript가 있습니다.getInitialState의 일부입니다.lifecycleReact.
constructor네 수업이 시작되는 곳이야
컨스트럭터
생성자 메서드는 클래스로 생성된 개체를 만들고 초기화하는 특별한 메서드입니다.클래스에 "컨스트럭터"라는 이름의 특수 메서드는 하나만 있을 수 있습니다.클래스에 컨스트럭터 메서드가 여러 개 포함되어 있는 경우 SyntaxError가 느려집니다.
컨스트럭터는 super 키워드를 사용하여 부모 클래스의 컨스트럭터를 호출할 수 있습니다.
대해 만, React v16은 프리퍼런스가 합니다.getInitialState를 사용하는 createReactClass()
초기 상태 설정
ES6 클래스에서는 컨스트럭터에서 this.state를 할당함으로써 초기 상태를 정의할 수 있습니다.
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
}
// ...
}
createReactClass()에서는 초기 상태를 반환하는 별도의 getInitialState 메서드를 제공해야 합니다.
var Counter = createReactClass({
getInitialState: function() {
return {count: this.props.initialCount};
},
// ...
});
자세한 내용은 여기를 참조하십시오.
또한 리액트 컴포넌트의 라이프 사이클을 거의 나타내기 위해 아래 이미지를 작성했습니다.
ES6를 사용하여 React-Native 클래스를 작성하는 경우 다음 형식을 따릅니다.네트워크 콜을 발신하는 클래스에 대한 RN의 라이프 사이클 메서드가 포함됩니다.
import React, {Component} from 'react';
import {
AppRegistry, StyleSheet, View, Text, Image
ToastAndroid
} from 'react-native';
import * as Progress from 'react-native-progress';
export default class RNClass extends Component{
constructor(props){
super(props);
this.state= {
uri: this.props.uri,
loading:false
}
}
renderLoadingView(){
return(
<View style={{justifyContent:'center',alignItems:'center',flex:1}}>
<Progress.Circle size={30} indeterminate={true} />
<Text>
Loading Data...
</Text>
</View>
);
}
renderLoadedView(){
return(
<View>
</View>
);
}
fetchData(){
fetch(this.state.uri)
.then((response) => response.json())
.then((result)=>{
})
.done();
this.setState({
loading:true
});
this.renderLoadedView();
}
componentDidMount(){
this.fetchData();
}
render(){
if(!this.state.loading){
return(
this.renderLoadingView()
);
}
else{
return(
this.renderLoadedView()
);
}
}
}
var style = StyleSheet.create({
});
안에 필요가 전화를 걸 수 .직접 전화할 수 있습니다.state={something:""} 이외의 경우는 super() React.Component그 후 , internal constructor를 합니다.
「 」를 하고 있는 React.createClass 후 합니다.getInitialState★★★★★★ 。
큰 차이는 어디서부터 시작하느냐입니다.따라서 컨스트럭터는 JavaScript 클래스의 컨스트럭터이며, getInitialState는 React의 라이프 사이클의 일부입니다.생성자 메서드는 클래스로 생성된 개체를 만들고 초기화하는 특별한 메서드입니다.
아직 답을 찾고 있는 사람이 있다면 이 링크가 도움이 될 것입니다.
React의 컨스트럭터와 getInitialState는 모두 상태를 초기화하기 위해 사용되지만 서로 바꾸어 사용할 수는 없습니다.
getInitialState는 React.createClass와 함께 사용하고 컨스트럭터는 React와 함께 사용합니다.요소.
생성자는 구성 요소의 초기 상태를 설정하는 데 이상적인 위치입니다.다른 메서드에서 setState()를 사용하는 대신 초기 상태를 직접 할당해야 합니다.
class Hello extends React.Component {
constructor(props) {
super(props);
this.setState({
title: 'This is the first test'
});
}
render() {
return <div>{this.state.title} </div>
}
}
ReactDOM.render(<Hello />, document.getElementById('container'));
ES5와 ES6의 근본적인 차이는 new class 키워드에 있습니다.ES5는 React 컴포넌트를 클래스로 정의하는 편리함을 제공하지 않았지만 ES는 react 컴포넌트를 클래스로 정의하는 편리함을 제공했습니다.
그리고 더 간단한 것은,InitialState는 Resact 컴포넌트의 초기 상태를 정의하기 위한 ES5 친화적인 방법입니다.getInitialState는 React.createClass와 함께 사용하고 컨스트럭터는 React와 함께 사용합니다.요소
예:
class Goodmorning extends React.Component {
render() {
return <span>Good Morning</span>;
}
}
It would rely on helper module called create-react-class:
var createGoodmorningReactClass = require('create-react-class');
var Goodmorning = createReactClass({
render: function() {
return <span>Good Morning</span>;
}
});
The object passed into create-react-class that is defined in initial stage by calling the getInitialState attribute:
var Goodmorning = createReactClass({
getInitialState: function() {
return {name: this.props.name};
},
render: function() {
return <span>Good {this.state.name}</span>;
}
});
In ES6 implementation:
class Goodmorning extends React.Component {
constructor(props) {
super(props);
this.state = {
name: props.name
}
}
render() {
return <span>Good {this.state.name}</span>;
}
}
답을 찾는 사람이 있다면 이 기사도 읽어보세요.링크
컨스트럭터에서는 항상 상태를 초기화해야 합니다.
언급URL : https://stackoverflow.com/questions/30668326/what-is-the-difference-between-using-constructor-vs-getinitialstate-in-react-r
'programing' 카테고리의 다른 글
| woocommerce_update_product 액션– 제품 업데이트마다 한 번만 실행 (0) | 2023.04.06 |
|---|---|
| 슬라이더가 표시되지 않음: setREVStartSize가 정의되지 않았습니다. (0) | 2023.04.06 |
| 반응과 함께 구글 사인 버튼 사용 (0) | 2023.04.06 |
| Ajax를 사용하여 Select2를 사용하여 로드 시 초기 값 설정 (0) | 2023.04.06 |
| JQuery - 글로벌 변수에 Ajax 응답 저장 (0) | 2023.04.06 |