React에서 상태와 소품의 차이점은 무엇입니까?
나는 React에서 Pluralsight 코스를보고 있었고 강사는 소품을 변경해서는 안된다고 말했습니다. 나는 소품 대 상태에 관한 기사 (uberVU / react-guide) 를 읽고 있는데
props와 state 변경은 렌더 업데이트를 유발합니다.
이 기사의 뒷부분에서 다음과 같이 말합니다.
소품 (속성의 약자)은 구성 요소의 구성이며 가능한 경우 옵션입니다. 그것들은 위에서 받고 불변입니다.
- 소품은 변할 수 있지만 불변해야합니까?
- 소품을 언제 사용해야하고 언제 상태를 사용해야합니까?
- React 컴포넌트에 필요한 데이터가 있다면
getInitialState? 를 통해 React 컴포넌트의 props 또는 setup을 통해 전달되어야합니다 .
소도구와 국가는 관련이 있습니다. 한 구성 요소의 상태는 종종 하위 구성 요소의 소품이됩니다. 소품은 부모의 render 메소드 내에서 자식에게 전달됩니다. React.createElement()JSX를 사용하는 경우 친숙한 태그 속성에 대한 두 번째 인수 입니다.
<MyChild name={this.state.childsName} />
의 부모 상태 값 childsName이 자녀의 값이 됩니다 this.props.name. 아동의 관점에서 prop이라는 이름은 변경할 수 없습니다. 변경해야 할 경우 부모는 내부 상태 만 변경하면됩니다.
this.setState({ childsName: 'New name' });
그리고 React는 그것을 당신을 위해 아이에게 전파 할 것입니다. 자연스러운 후속 질문은 아이가 이름 소품을 변경해야하는 경우 어떻게해야합니까? 이것은 일반적으로 자식 이벤트와 부모 콜백을 통해 수행됩니다. 자식은 예를 들어이라는 이벤트를 노출시킬 수 있습니다 onNameChanged. 그러면 부모는 콜백 핸들러를 전달하여 이벤트를 구독합니다.
<MyChild name={this.state.childsName} onNameChanged={this.handleName} />
자식은 예를 들어을 호출하여 요청 된 새 이름을 이벤트 콜백의 인수로 전달하고 this.props.onNameChanged('New name')부모는 이벤트 핸들러의 이름을 사용하여 상태를 업데이트합니다.
handleName: function(newName) {
this.setState({ childsName: newName });
}
부모-자식 의사 소통을 위해 소품을 전달하십시오.
state 를 사용 하여 현재 페이지에 필요한 데이터를 컨트롤러보기에 저장하십시오.
props 를 사용 하여 데이터 및 이벤트 핸들러를 하위 구성 요소로 전달하십시오.
이 목록은 구성 요소의 데이터를 작업 할 때 도움이됩니다.
소품
- 불변이다
- React가 빠른 참조 확인을 수행 할 수있게합니다.
- 뷰 컨트롤러에서 데이터를 전달하는 데 사용됩니다.
- 최상위 컴포넌트
- 더 나은 성능을
- 이것을 사용하여 자식 구성 요소에 데이터를 전달
상태
- 뷰 컨트롤러에서 관리해야합니다.
- 최상위 컴포넌트
- 변하기 쉬워
- 성능이 나쁘다
- 자식 구성 요소에서 액세스하면 안됩니다
- 대신 소품으로 전달하십시오.
부모-자식 관계가없는 두 구성 요소 간의 통신을 위해 고유 한 글로벌 이벤트 시스템을 설정할 수 있습니다. componentDidMount ()에서 이벤트를 구독하고 componentWillUnmount ()에서 구독을 취소하고 이벤트를 수신하면 setState ()를 호출하십시오. 플럭스 패턴은 이것을 배열하는 가능한 방법 중 하나입니다. -https : //facebook.github.io/react/tips/communicate-between-components.html
어떤 구성 요소에 상태가 있어야합니까?
대부분의 컴포넌트는 소품에서 데이터를 가져 와서 렌더링해야합니다. 그러나 때때로 사용자 입력, 서버 요청 또는 시간 경과에 응답해야합니다. 이를 위해 당신은 상태를 사용합니다.
가능한 많은 구성 요소를 상태 비 저장 상태 로 유지하십시오 . 이렇게하면 상태를 가장 논리적으로 격리하고 중복성을 최소화하여 응용 프로그램에 대한 추론을 쉽게 할 수 있습니다.
일반적인 패턴은 데이터를 렌더링하는 상태 비 저장 구성 요소를 여러 개 만들고 계층 구조에서 상태 기반 구성 요소를 가져와 소품을 통해 하위 상태로 전달하는 것입니다. 상태 저장 구성 요소는 모든 상호 작용 논리를 캡슐화하고 상태 비 저장 구성 요소는 선언적인 방식으로 데이터 렌더링을 처리합니다. -https : //facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state
어떤 상태로 가야합니까?
상태는 구성 요소의 이벤트 핸들러가 UI 업데이트를 트리거하기 위해 변경할 수있는 데이터를 포함해야합니다. 실제 앱에서는이 데이터가 매우 작고 JSON 직렬화 가능한 경향이 있습니다. 상태 저장 구성 요소를 빌드 할 때 가능한 상태의 최소 표현을 고려하고 해당 특성 만 this.state에 저장하십시오. render () 내부에서는이 상태를 기반으로 필요한 다른 정보 만 계산하면됩니다. 중복 또는 계산 된 값을 상태에 추가하면 React 컴퓨팅에 의존하지 않고 명시 적으로 동기화 상태를 유지해야하므로 이러한 방식으로 응용 프로그램에 대해 생각하고 작성하는 것이 가장 올바른 응용 프로그램으로 이어질 수 있습니다. -https : //facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state
가장 여기에 같은 상태 요약 I 대 소품 : - 인도 반응을 그 사람에게 큰 모자 팁을. 아래는 해당 페이지의 수정 된 버전입니다.
소품 대 상태
tl; dr 구성 요소가 특정 시점에서 속성 중 하나를 변경해야하는 경우 해당 속성은 상태의 일부 여야하며, 그렇지 않으면 해당 구성 요소의 소품이어야합니다.
소품
소품 (속성의 줄임말)은 구성 요소의 구성입니다. 그것들은 그것들을받는 컴포넌트가 관련되는 한 위에서 수신되며 불변입니다. 구성 요소는 소품을 변경할 수 없지만 자식 구성 요소의 소품을 구성하는 책임은 있습니다. 소품은 단지 데이터 일 필요는 없습니다. 콜백 함수는 소품으로 전달 될 수 있습니다.
상태
상태는 구성 요소가 마운트 될 때 기본값으로 시작하는 데이터 구조입니다. 대부분 사용자 이벤트의 결과로 시간이 지남에 따라 변경 될 수 있습니다.
구성 요소는 내부적으로 자체 상태를 관리합니다. 초기 상태를 설정하는 것 외에도 자녀의 상태를 다루는 사업은 없습니다. 상태를 해당 구성 요소의 개인용으로 개념화 할 수 있습니다.
소품과 상태 변경
소품 상태
부모 Component에서 초기 값을 얻을 수 있습니까? 예 예
상위 컴포넌트로 변경할 수 있습니까? 예 아니오
컴포넌트 내에서 기본값을 설정할 수 있습니까? * 예 예
컴포넌트 내부를 변경할 수 있습니까? 예
하위 구성 요소의 초기 값을 설정할 수 있습니까? 예 예
자식 구성 요소를 변경할 수 있습니까? 예 아니오
- 부모로부터받은 props와 state 초기 값은 컴포넌트 내부에 정의 된 기본값보다 우선합니다.
이 구성 요소에 상태가 있어야합니까?
상태는 선택 사항입니다. 상태는 복잡성을 증가시키고 예측 성을 감소 시키므로, 상태가없는 구성 요소가 바람직하다. 대화식 앱에서 상태가 없으면 명확하게 할 수 없지만 상태 저장 구성 요소가 너무 많지 않아야합니다.
구성 요소 유형
상태 비 저장 구성 요소 만 소품, 상태 없음. render () 함수 외에는 많이 진행되지 않습니다. 그들의 논리는 그들이받는 소품을 중심으로 진행됩니다. 따라서 추적 및 테스트가 매우 쉽습니다.
상태 저장 구성 요소 소품과 상태. 구성 요소가 어떤 상태를 유지해야 할 때 사용됩니다. 클라이언트-서버 통신 (XHR, 웹 소켓 등), 데이터 처리 및 사용자 이벤트 응답에 적합한 장소입니다. 이러한 종류의 물류는 적당한 수의 Stateful 구성 요소로 캡슐화해야하며 모든 시각화 및 형식 지정 논리는 여러 Stateless 구성 요소의 다운 스트림으로 이동해야합니다.
출처
대부분의 답변은 초보자를 혼란스럽게합니다. 관련시키고 이해하기가 매우 어렵습니다. Plain JS와 관련 시켜서 이해할 수 있습니다.
간단히 말해서
상태 는 구성 요소 외부에서 액세스 및 수정할 수 없으며 구성 요소 내부에서만 사용 및 수정할 수있는 구성 요소의 로컬 상태를 나타냅니다.
평범한 JS
const DummyFunction = () => {
let name = 'Manoj';
console.log(`Hey ${name}`)
}
JS와 동등한 반응
class DummyComponent extends React.Component {
state = {
name: 'Manoj'
}
render() {
return <div>Hello {this.state.name}</div>;
}
소품 , 다른 한편으로는, 메이크업 구성 요소는 구성 요소를 소품의 형태로 부모 구성 요소로부터 데이터를 수신 할 수있는 기능을 제공하여 재사용이.
평범한 JS
const DummyFunction = (name) => {
console.log(`Hey ${name}`)
}
DummyFunction('Manoj');
DummyFunction('Ajay');
JS 반응
class DummyComponent extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
// when using the component
<DummyComponent name="Manoj" />
<DummyComponent name="Ajay" />
크레딧 : Manoj Singh Negi
기사 링크 : 반응 상태 대 소품 설명
props ( "속성"의 약자)와 state 는 일반 JavaScript 객체입니다. 둘 다 렌더의 출력에 영향을 미치는 정보를 보유하고 있지만 한 가지 중요한 방식이 다릅니다. 소품은 구성 요소에 전달되고 (함수 매개 변수와 유사) 상태 는 구성 요소 내에서 관리됩니다 (함수 내에 선언 된 변수와 유사).
따라서 상태 는 현재 구성 요소로 제한되지만 소품 은 원하는 모든 구성 요소로 전달할 수 있습니다 ... 현재 구성 요소 의 상태 를 다른 구성 요소의 소품 으로 전달할 수 있습니다 ...
또한 React 에는 소품이 있고 내부 상태가 아닌 상태 비 저장 구성 요소 가 있습니다 ...
앱에서 작동하는 방식을 보여주는 아래 예 :
부모 (상태 전체 구성 요소) :
class SuperClock extends React.Component {
constructor(props) {
super(props);
this.state = {name: "Alireza", date: new Date().toLocaleTimeString()};
}
render() {
return (
<div>
<Clock name={this.state.name} date={this.state.date} />
</div>
);
}
}
어린이 (상태 비 저장 구성 요소) :
const Clock = ({name}, {date}) => (
<div>
<h1>{`Hi ${name}`}.</h1>
<h2>{`It is ${date}`}.</h2>
</div>
);
소품과 상태의 주요 차이점은 상태는 구성 요소 자체에 의해 내부적으로 제어되며 구성 요소를 렌더링하는 것은 소품으로 외부에 의해 제어됩니다.
function A(props) {
return <h1>{props.message}</h1>
}
render(<A message=”hello” />,document.getElementById(“root”));
class A extends React.Component{
constructor(props) {
super(props)
this.state={data:"Sample Data"}
}
render() {
return(<h2>Class State data: {this.state.data}</h2>)
}
}
render(<A />, document.getElementById("root"));
- 상태 변경 가능 (Mutable)
- 소품은 할 수 없지만 (불변)
기본적으로, 차이는 즉 상태가 OOP의 속성 같은 것입니다 : 그것의 어떤 지역의 더 나은 사용을 설명하는 클래스 (구성 요소)으로는. 소품 은 매개 변수와 같습니다 . 구성 요소 호출자 (부모)에서 특정 매개 변수로 함수를 호출 한 것처럼 구성 요소 로 전달 됩니다.
두 상태 와 소품 컴포넌트로 제어 데이터를 사용하는 반응으로는 일반적으로 지주가 부모에 의해 설정 및 하위 구성 요소에 전달하고이 부품 전체에 고정되어있다. 들어 바꿀 것입니다 데이터, 우리는 상태를 사용해야합니다. props는 불변 이지만 state는 mutable입니다 . props를 변경하려면 부모 구성 요소에서 수행 한 다음 자식 구성 요소로 전달할 수 있습니다.
상태는 구성 요소가 보유한 정보를 처리하는 방식입니다.
서버에서 일부 데이터를 가져와야하는 구성 요소가 있다고 가정합니다. 일반적으로 요청이 처리 중인지, 실패한 경우 등을 사용자에게 알리고 자합니다. 이는 특정 구성 요소와 관련이있는 정보입니다. 이것은 국가가 게임에 들어가는 곳입니다.
일반적으로 상태를 정의하는 가장 좋은 방법은 다음과 같습니다.
class MyComponent extends React.Component {
constructor() {
super();
this.state = { key1: value1, key2: value2 }
}
}
하지만 최신 반응 네이티브 구현에서는 다음과 같이 할 수 있습니다.
class MyComponent extends React.Component {
state = { key1: value1, key2: value2 }
}
이 두 예제는 똑같은 방식으로 실행되며 구문 개선 일뿐입니다.
OO 프로그래밍에서 항상 그렇듯이 객체 속성을 사용하는 것과 다른 점은 무엇입니까? 일반적으로 귀하의 주에 보관 된 정보는 정적 인 정보가 아니며 시간이 지남에 따라 변경되며이 변경 사항을 반영하기 위해 View를 업데이트해야합니다. State는이 기능을 간단한 방법으로 제공합니다.
상태는 변경 불가능합니다! 나는 이것에 충분한 스트레스를 줄 수 없습니다. 이것은 무엇을 의미합니까? 그것은 절대 이런 식으로 행동해서는 안된다는 것을 의미합니다.
state.key2 = newValue;
올바른 방법은 다음과 같습니다.
this.setState({ key2: newValue });
this.setState를 사용하면 업데이트주기 동안 구성 요소가 실행되며 상태의 일부가 변경되면이 변경 사항을 반영하기 위해 구성 요소 렌더 메서드가 다시 호출됩니다.
더 자세한 설명은 반응 문서를 확인하십시오 : https://facebook.github.io/react/docs/state-and-lifecycle.html
소품은 단순히 속성의 줄임말입니다. 소품은 구성 요소가 서로 대화하는 방식입니다. React에 익숙하다면 소품이 부모 구성 요소에서 아래쪽으로 흐른다는 것을 알아야합니다.
부모 구성 요소가 소품을 아래로 전달하지 않더라도 소품이 설정되도록 기본 소품을 가질 수도 있습니다.
이것이 사람들이 React를 단방향 데이터 흐름을 갖는 것으로 언급하는 이유입니다. 여기에는 약간의 시간이 걸리며 나중에 블로그에 올 것입니다. 그러나 지금은 기억하십시오. 부모에서 자식으로의 데이터 흐름. 소품은 변하지 않습니다 (변경되지 않는 멋진 단어)
그래서 우리는 행복합니다. 구성 요소는 부모로부터 데이터를받습니다. 모두 정렬 되었습니까?
글쎄요 구성 요소가 부모 이외의 다른 사람으로부터 데이터를 수신하면 어떻게됩니까? 사용자가 구성 요소에 데이터를 직접 입력하면 어떻게됩니까?
자, 이것이 우리가 상태를 갖는 이유입니다.
상태
소품은 바뀌지 않아야하므로 상태가 올라갑니다. 일반적으로 구성 요소에는 상태가 없으므로 상태 비 저장이라고합니다. 상태를 사용하는 구성 요소를 상태 저장이라고합니다. 파티에 그 작은 음식을 버리고 사람들이 당신에게서 멀어지는 것을 지켜보십시오.
따라서 state는 구성 요소가 렌더링간에 정보를 추적 할 수 있도록 사용됩니다. State를 설정하면 상태 객체가 업데이트 된 다음 구성 요소가 다시 렌더링됩니다. 이것은 React가 열심히 일을 처리하고 엄청나게 빠르다는 것을 의미하기 때문에 매우 멋집니다.
상태의 작은 예로서, 여기에 검색 창의 스 니펫이 있습니다 (React에 대해 더 자세히 알고 싶다면이 과정을 확인하십시오).
Class SearchBar extends Component {
constructor(props) {
super(props);
this.state = { term: '' };
}
render() {
return (
<div className="search-bar">
<input
value={this.state.term}
onChange={event => this.onInputChange(event.target.value)} />
</div>
);
}
onInputChange(term) {
this.setState({term});
this.props.onSearchTermChange(term);
}
}
요약
소품과 국가는 비슷한 일을하지만 다른 방식으로 사용됩니다. 구성 요소의 대부분은 상태 비 저장 상태 일 수 있습니다.
소품은 부모에서 자식으로 또는 구성 요소 자체에서 데이터를 전달하는 데 사용됩니다. 그것들은 불변이므로 변경되지 않습니다.
상태는 변경 가능한 데이터 또는 변경 될 데이터에 사용됩니다. 이것은 사용자 입력에 특히 유용합니다. 예를 들어 검색 창을 생각하십시오. 사용자가 데이터를 입력하면 표시되는 내용이 업데이트됩니다.
소품 : 소품은 컴포넌트의 속성 일 뿐이며 반응 컴포넌트는 자바 스크립트 함수일뿐입니다.
class Welcome extends React.Component {
render() {
return <h1>Hello {this.props.name}</h1>;
}
}
const 요소 =;
여기서 <Welcome name="Sara" />환영 컴포넌트의 소품으로 {name : 'Sara'} 객체를 전달합니다. 하나의 부모 구성 요소에서 자식 구성 요소로 데이터를 전달하기 위해 props를 사용합니다. 소품은 불변입니다. 구성 요소의 수명주기 동안 소품은 변경되지 않아야합니다 (불변으로 간주).
State : state는 Component 내에서만 액세스 할 수 있습니다. 컴포넌트 내에서 데이터를 추적하기 위해 state를 사용합니다. setState로 상태를 변경할 수 있습니다. 우리가 자녀에게 상태를 전달해야하는 경우,이를 소품으로 전달해야합니다.
class Button extends React.Component {
constructor() {
super();
this.state = {
count: 0,
};
}
updateCount() {
this.setState((prevState, props) => {
return { count: prevState.count + 1 }
});
}
render() {
return (<button
onClick={() => this.updateCount()}
>
Clicked {this.state.count} times
</button>);
}
}
상태:
- 상태는 변경 가능합니다.
- 상태는 개별 구성 요소와 연관되어 있으며 다른 구성 요소에서는 사용할 수 없습니다.
- 구성 요소 마운트시 상태가 초기화됩니다.
- 상태는 컴포넌트 내에서 동적 변경 사항을 렌더링하는 데 사용됩니다.
소품:
- 소품은 불변입니다.
- 구성 요소간에 소품을 전달할 수 있습니다.
- 소품은 주로 구성 요소 간 통신에 사용되며 부모에서 자식으로 직접 전달할 수 있습니다. 자녀를 부모에게 전달하려면 상태를 높이는 개념을 사용해야합니다.
class Parent extends React.Component{
render()
{
return(
<div>
<Child name = {"ron"}/>
</div>
);
}
}
class Child extends React.Component{
{
render(){
return(
<div>
{this.props.name}
</div>
);
}
}한마디로.
소품 값을 변경할 수 없습니다 [불변]
setState 메소드를 사용하여 상태 값을 변경할 수 있음 [mutable]
기본적으로 props와 state는 컴포넌트가 무엇을 어떻게 렌더링하는지 알 수있는 두 가지 방법입니다. 애플리케이션 상태의 어느 부분이 상태에 속하고 어떤 최상위 레벨 저장소에 있는지는 React의 작동 방식보다 앱 디자인과 더 관련이 있습니다. 가장 간단한 결정 방법 인 IMO는이 특정 데이터가 전체 응용 프로그램에 유용한 지 또는 일부 로컬 정보인지 생각하는 것입니다. 또한 상태를 복제하지 않는 것이 중요하므로 소품에서 일부 데이터를 계산할 수 있으면 소품에서 계산해야합니다.
For example, let's say you have some dropdown control (which wraps standart HTML select for custom styling), which can a) select some value from list, and b) be opened or closed (i.e., the options list displayed or hidden). Now, let's say your app displays a list of items of some sort and your dropdown controls filter for list entries. Then, it would be best to pass active filter value as a prop, and keep opened/closed state local. Also, to make it functional, you would pass an onChange handler from parent component, which would be called inside dropdown element and send updated information (new selected filter) to the store immediately. On the other hand, opened/closed state can be kept inside dropdown component, because the rest of the application doesn't really care if the control is opened, until user actually changes it value.
다음 코드는 완전히 작동하지 않으므로 CSS와 드롭 다운 클릭 / 블러 / 변경 이벤트 처리가 필요하지만 예제를 최소화하고 싶었습니다. 차이를 이해하는 데 도움이되기를 바랍니다.
const _store = {
items: [
{ id: 1, label: 'One' },
{ id: 2, label: 'Two' },
{ id: 3, label: 'Three', new: true },
{ id: 4, label: 'Four', new: true },
{ id: 5, label: 'Five', important: true },
{ id: 6, label: 'Six' },
{ id: 7, label: 'Seven', important: true },
],
activeFilter: 'important',
possibleFilters: [
{ key: 'all', label: 'All' },
{ key: 'new', label: 'New' },
{ key: 'important', label: 'Important' }
]
}
function getFilteredItems(items, filter) {
switch (filter) {
case 'all':
return items;
case 'new':
return items.filter(function(item) { return Boolean(item.new); });
case 'important':
return items.filter(function(item) { return Boolean(item.important); });
default:
return items;
}
}
const App = React.createClass({
render: function() {
return (
<div>
My list:
<ItemList items={this.props.listItems} />
<div>
<Dropdown
onFilterChange={function(e) {
_store.activeFilter = e.currentTarget.value;
console.log(_store); // in real life, some action would be dispatched here
}}
filterOptions={this.props.filterOptions}
value={this.props.activeFilter}
/>
</div>
</div>
);
}
});
const ItemList = React.createClass({
render: function() {
return (
<div>
{this.props.items.map(function(item) {
return <div key={item.id}>{item.id}: {item.label}</div>;
})}
</div>
);
}
});
const Dropdown = React.createClass({
getInitialState: function() {
return {
isOpen: false
};
},
render: function() {
return (
<div>
<select
className="hidden-select"
onChange={this.props.onFilterChange}
value={this.props.value}>
{this.props.filterOptions.map(function(option) {
return <option value={option.key} key={option.key}>{option.label}</option>
})}
</select>
<div className={'custom-select' + (this.state.isOpen ? ' open' : '')} onClick={this.onClick}>
<div className="selected-value">{this.props.activeFilter}</div>
{this.props.filterOptions.map(function(option) {
return <div data-value={option.key} key={option.key}>{option.label}</div>
})}
</div>
</div>
);
},
onClick: function(e) {
this.setState({
isOpen: !this.state.isOpen
});
}
});
ReactDOM.render(
<App
listItems={getFilteredItems(_store.items, _store.activeFilter)}
filterOptions={_store.possibleFilters}
activeFilter={_store.activeFilter}
/>,
document.getElementById('root')
);
상태는 - 그것은 구성 요소 데이터를 보유 특별 변경할 속성입니다. Componet가 마운트 될 때 기본값이 있습니다.
props- 그것은 본질적으로 불변이며 부모에서 자식으로 가치가 전달되는 경우에 사용되는 특별한 재산입니다. props는 컴포넌트 사이의 통신 채널이며 항상 상위 (부모)에서 buttom (자식)으로 이동합니다.
아래는 상태 및 소품을 결합하는 완전한 예입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>state&props example</title>
<script src="https://unpkg.com/react@0.14.8/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@0.14.8/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
var TodoList = React.createClass({
render(){
return <div className='tacos-list'>
{
this.props.list.map( ( todo, index ) => {
return <p key={ `taco-${ index }` }>{ todo }</p>;
})}
</div>;
}
});
var Todo = React.createClass({
getInitialState(){
return {
list : [ 'Banana', 'Apple', 'Beans' ]
}
},
handleReverse(){
this.setState({list : this.state.list.reverse()});
},
render(){
return <div className='parent-component'>
<h3 onClick={this.handleReverse}>List of todo:</h3>
<TodoList list={ this.state.list } />
</div>;
}
});
ReactDOM.render(
<Todo/>,
document.getElementById('root')
);
</script>
</body>
</html>
일반적으로 하나의 구성 요소 (부모)의 상태는 하위 구성 요소에 대한 prop입니다.
- 상태는 소품이 부모에서 자식으로 전달되는 구성 요소 내에 있습니다.
소품은 일반적으로 불변입니다.
class Parent extends React.Component { constructor() { super(); this.state = { name : "John", } } render() { return ( <Child name={this.state.name}> ) } } class Child extends React.Component { constructor() { super(); } render() { return( {this.props.name} ) } }
위의 코드에는 하위 구성 요소 (자식 클래스)에 소품으로 전달되는 상태가 이름 인 상위 클래스 (부모)가 있으며 하위 구성 요소는 {this.props.name}을 사용하여 렌더링합니다.
애플리케이션 어딘가에 사용자가 입력 한 일부 데이터가 있습니다.
데이터를 입력하는 구성 요소는 데이터를 입력 하는 동안 데이터를 조작하고 변경해야하므로이 데이터 의 상태를 가져야합니다.
응용 프로그램의 다른 곳에서 데이터는 다른 모든 구성 요소에 대한 소품 으로 전달되어야합니다.
그렇습니다. 소품은 바뀌고 있지만 '소스'에서 바뀌면 간단히 거기에서 흘러 나옵니다. 따라서 소품을 받는 구성 요소의 맥락에서 소품은 변경할 수 없습니다 .
예를 들어 사용자가 공급 업체 목록을 편집하는 참조 데이터 화면에서 상태를 관리하면 AppState 아래의 한 수준 일 수있는 업데이트 된 데이터가 ReferenceDataState에 저장되고이 공급 업체 목록이 소품으로 전달됩니다. 그것을 사용하는 데 필요한 모든 구성 요소에.
React에서 상태는 소품과 데이터를 저장합니다. 후자의 차이점은 저장된 데이터가 다른 변경으로 수정 될 수 있다는 것입니다. 이것들은 플랫 JavaScript로 작성된 객체에 지나지 않으므로 데이터 또는 코드를 포함하고 모델링하려는 정보를 나타냅니다. 자세한 내용이 필요하면 다음과 같은 간행물을 참조하십시오 . React에서 상태 사용 및 React 에서 소품 사용
- props --- 값을 변경할 수 없습니다.
- states --- 코드에서 값을 변경할 수 있지만 렌더링이 발생하면 활성화됩니다.
반응에서 "상태"와 "프로 프"의 일부 차이점.
React는 상태에 따라 DOM을 제어하고 렌더링합니다. 구성 요소 상태에는 두 가지 유형이 있습니다. props는 구성 요소간에 전송되는 상태이고 state는 구성 요소의 내부 상태입니다. 소품은 부모 구성 요소에서 자식 구성 요소로의 데이터 전송에 사용됩니다. 구성 요소는 구성 요소 내에서만 수정할 수있는 자체 내부 상태 : 상태입니다.
일반적으로 특정 구성 요소의 상태는 하위 구성 요소의 소품 일 수 있으며 소품은 부모 구성 요소의 렌더링 방법에 명시된 하위 항목으로 전달됩니다.
소품이 불변이라는 초기 질문에 대한 응답 으로, 하위 구성 요소에 관한 것이지만 부모에서 변경할 수있는 한 불변이라고합니다 .
React Components는 상태를 사용하여 예를 들어 다음과 같이 변경 / 돌연변이 할 수있는 내부 변수를 READ / WRITE합니다.
this.setState({name: 'Lila'})
React props는 프로그래머가 Parent Component에서 Child Component로 변수와 메소드를 가져올 수있는 특수 객체입니다.
그것은 창문과 집의 문과 같은 것입니다. 소품은 또한 불변입니다 자식 구성 요소는 변경 / 업데이트 할 수 없습니다.
부모 구성 요소가 소품을 변경할 때 청취하는 데 도움이되는 몇 가지 방법이 있습니다.
이것은 상태와 소품 사이의 설명에 관한 나의 현재 관점입니다.
상태는 컴포넌트 내부의 로컬 변수와 같습니다. set state를 사용하여 state 값을 조작 할 수 있습니다. 그런 다음 상태 값을 하위 구성 요소로 전달할 수 있습니다.
Props는 redux 상점 내부에 정확히 위치한 값입니다. 이것은 실제로 리듀서에서 시작된 상태에서 나옵니다. 소품에서 가치를 얻으려면 구성 요소를 redux에 연결해야합니다. 소품 값을 자식 구성 요소에 전달할 수도 있습니다
간단한 설명은 다음과 같습니다. STATE는 구성 요소의 로컬 상태입니다 (예 : color = "blue"또는 animation = true 등). this.setState를 사용하여 구성 요소의 상태를 변경하십시오. PROPS는 구성 요소가 서로 통신하고 (부모에서 자식으로 데이터를 전송) 구성 요소를 재사용 할 수있게 만드는 방법입니다.
상태는 데이터이며 변경 가능하며 필요한 모든 것을 할 수 있습니다. 소품은 데이터 만 읽을 수 있습니다. 일반적으로 소품을 전달할 때 이미 데이터로 작업했으며 데이터를 렌더링하기 위해 하위 구성 요소가 필요하거나 소품이 기능 u 작업을 수행하기 위해 호출
상태는 데이터가 사는 진실의 기원입니다. 소품을 통해 국가가 나타납니다.
구성 요소에 소품을 제공하는 것은 UI가 데이터와 동기화되도록 유지하는 것입니다. 컴포넌트는 실제로 마크 업을 반환하는 함수일뿐입니다.
동일한 소품 (표시 할 데이터)이 주어지면 항상 동일한 마크 업을 생성합니다 .
따라서 소품은 데이터를 원점에서 기능적 구성 요소로 전달하는 파이프 라인과 같습니다.
Props : "읽기 전용"데이터를 나타내며 변경할 수 없으며 부모 구성 요소의 특성을 나타냅니다.
상태 : 변경 가능한 데이터를 나타내며 궁극적으로 페이지에 렌더링되고 구성 요소 자체에 의해 내부적으로 관리되고 사용자 입력으로 인해 초과 근무 시간이 변경됩니다.
상태는 소품이 부모에서 자식으로 전달되는 구성 요소 내에 있습니다. 소품은 일반적으로 불변입니다.
class Parent extends React.Component {
constructor() {
super();
this.state = {
name : "John",
}
}
render() {
return (
<Child name={this.state.name}>
)
}
}
class Child extends React.Component {
constructor() {
super();
}
render() {
return(
{this.props.name}
)
}
}
위의 코드에는 하위 구성 요소 (자식 클래스)에 소품으로 전달되는 상태가 이름 인 상위 클래스 (부모)가 있으며 하위 구성 요소는 {this.props.name}을 사용하여 렌더링합니다.
출처 : Andrea Chiarelli 서적 :“React 시작 : React로 프론트 엔드 개발 워크 플로우를 단순화하고 애플리케이션의 사용자 경험을 향상 시키십시오”:
모든 React 컴포넌트에는 props 속성이 있습니다. 이 특성의 목적은 구성 요소 자체에 전달 된 데이터 입력을 수집하는 것입니다. JSX 속성은 React 요소에 연결되고 동일한 이름의 속성은 props 객체에 연결됩니다 . 연결된 속성을 사용하여 전달 된 데이터에 액세스 할 수 있습니다. 또한 props 의 불변성은 컴포넌트 를 순수한 함수 로 생각할 수있게하는데 , 이는 입력 데이터를 변경하지 않기 때문에 부작용이없는 함수입니다. 한 구성 요소에서 다른 구성 요소로 전달되는 데이터는 상위 구성 요소에서 하위 구성 요소로의 단방향 데이터 흐름으로 생각할 수 있습니다. 이것은 우리에게 더 통제 가능한 시스템을 제공합니다.
React는 데이터가 변경 될 때 컴포넌트의 자동 렌더링을 지원하는 메커니즘을 제공합니다. 이러한 메커니즘은 국가 의 개념을 기반으로합니다 . 반응 상태 는 시간이 지남에 따라 변경되는 데이터를 나타내는 속성입니다. 모든 구성 요소는 state 속성을 지원 하지만주의해서 사용해야합니다. 시간이 지남에 따라 변경 될 수있는 데이터를 저장하는 구성 요소는 상태 저장 구성 요소 라고합니다 . 상태 저장 요소 에 저장 상태 에 this.state 속성. 구성 요소에 상태가 변경되었음을 알리려면 setState () 메소드를 사용해야합니다 . 상태 초기화는 사용자에게 값을 할당 할 수있는 유일한 경우입니다.this.state 사용하지 않고 특성 setState를 ()를 .
setState () 는 상태에 이미 포함 된 이전 데이터와 새 데이터를 병합하고 이전 상태를 덮어 씁니다. setState () 는 render () 메서드 의 실행을 트리거 하므로 render ()를 명시 적으로 호출하면 안됩니다
React Components는 상태를 사용하여 예를 들어 다음과 같이 변경 / 돌연변이 할 수있는 내부 변수를 READ / WRITE합니다.
this.setState({name: 'Lila'})
React props는 프로그래머가 Parent Component에서 Child Component로 변수와 메소드를 가져올 수있는 특수 객체입니다.
그것은 창문과 집의 문과 같은 것입니다. 소품은 또한 불변입니다 자식 구성 요소는 변경 / 업데이트 할 수 없습니다.
부모 구성 요소가 소품을 변경할 때 청취하는 데 도움이되는 몇 가지 방법이 있습니다.
참고 URL : https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react
'Programing' 카테고리의 다른 글
| 언제 레디 스에? (0) | 2020.02.15 |
|---|---|
| Java에서 Runnable 인터페이스와 Callable 인터페이스의 차이점 (0) | 2020.02.15 |
| 하이픈으로 구분 된 케이스의 이름은 무엇입니까? (0) | 2020.02.15 |
| 주어진 Linux가 32 비트인지 64 비트인지 확인하는 방법은 무엇입니까? (0) | 2020.02.15 |
| C #에서 #region에 해당하는 Java (0) | 2020.02.15 |