javascript - React에서 상태와 소품의 차이점은 무엇입니까?

프롭과 상태는 관련이 있습니다. 한 구성 요소의 상태는 종종 하위 구성 요소의 소품이됩니다. 소품은 React.createElement() 에 대한 두 번째 인수로 부모의 render 메소드 내에서 자식에게 전달됩니다.  또는 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 });
}

부모-자식 의사 소통을 위해 소품을 전달하십시오.

상태를 사용하여 현재 페이지에 필요한 데이터를 컨트롤러보기에 저장하십시오.

props를 사용하여 데이터 및 이벤트 핸들러를 하위 구성 요소로 전달하십시오.

이러한 목록은 구성 요소의 데이터를 작업 할 때 도움이됩니다.

프롭

불변이다

React가 빠른 참조 확인을 수행 할 수있게합니다.

보기 컨트롤러에서 데이터를 전달하는 데 사용됩니다

최상위 구성 요소

성능 향상

이를 사용하여 데이터를 하위 구성 요소로 전달

상태

뷰 컨트롤러에서 관리해야합니다.

최상위 구성 요소

변경 가능

성능이 저하되었습니다

하위 구성 요소에서 액세스 할 수 없습니다

대신 소품으로 전달하십시오

와이즈 비즈

가장 좋아하는 소품 대 상태 요약은 여기에 있습니다 : https://github.com/uberVU/react-guide/blob/master/props-vs-state.md 그 사람들에게 큰 모자 팁. 아래는 해당 페이지의 수정 된 버전입니다 :

<시간> 소품 대 상태

tl;dr구성 요소가 특정 시점에서 속성 중 하나를 변경해야하는 경우 해당 속성은 상태의 일부 여야하며, 그렇지 않으면 해당 구성 요소의 소품이어야합니다.

<시간> 소품

Props (속성의 줄임말)는 구성 요소의 구성입니다. 그것들은 그것들을받는 컴포넌트가 관련되는 한 위에서 수신되며 불변입니다. 구성 요소는 소품을 변경할 수 없지만 자식 구성 요소의 소품을 구성하는 책임은 있습니다. 소품은 단지 데이터 일 필요는 없습니다. 콜백 함수는 소품으로 전달 될 수 있습니다.

상태

상태는 구성 요소가 마운트 될 때 기본값으로 시작하는 데이터 구조입니다. 대부분 사용자 이벤트의 결과로 시간이 지남에 따라 변경 될 수 있습니다.

구성 요소는 내부적으로 자체 상태를 관리합니다. 초기 상태를 설정하는 것 외에도 자녀의 상태를 다루는 사업은 없습니다. 상태를 해당 구성 요소의 비공개로 개념화 할 수 있습니다.

소품 및 상태 변경

                                                   소품 상태
    부모 Component에서 초기 값을 얻을 수 있습니까? 예 예
    상위 컴포넌트로 변경할 수 있습니까? 예 아니오
    컴포넌트 내에서 기본값을 설정할 수 있습니까? * 예 예
    컴포넌트 내부를 변경할 수 있습니까? 예
    하위 구성 요소의 초기 값을 설정할 수 있습니까? 예 예
    자식 구성 요소를 변경할 수 있습니까? 예 아니오

부모로부터받은 소품과 상태 초기 값은 컴포넌트 내부에 정의 된 기본값보다 우선합니다.

이 구성 요소에 상태가 있어야합니까?

상태는 선택 사항입니다. 상태는 복잡성을 증가시키고 예측 가능성을 감소 시키므로, 상태가없는 구성 요소가 바람직하다. 대화 형 앱에서 상태가 없으면 명확하게 할 수 없지만 상태 저장 구성 요소가 너무 많지 않아야합니다.

구성 요소 유형

상태 비 저장 구성 요소상태 만없는 소품 만. render () 함수 외에는 많이 진행되지 않습니다. 그들의 논리는 그들이받는 소품을 중심으로 진행됩니다. 이렇게하면 쉽게 따라하고 테스트 할 수 있습니다.

상태 저장 구성 요소소품과 상태 모두. 구성 요소가 어떤 상태를 유지해야 할 때 사용됩니다. 클라이언트-서버 통신 (XHR, 웹 소켓 등), 데이터 처리 및 사용자 이벤트 응답에 적합한 장소입니다. 이러한 종류의 물류는 적당한 수의 Stateful 구성 요소로 캡슐화해야하며 모든 시각화 및 형식 지정 논리는 여러 Stateless 구성 요소의 다운 스트림으로 이동해야합니다.

소스

'props'및 'state'에 대한 질문-Google 그룹스

사고 생각하기 : 주가 어디에서 살아야하는지 식별

For communication between two components that don't have a parent-child relationship, you can set up your own global event system. Subscribe to events in componentDidMount(), unsubscribe in componentWillUnmount(), and call setState() when you receive an event. Flux pattern is one of the possible ways to arrange this. - https://facebook.github.io/react/tips/communicate-between-components.html

What Components Should Have State?

Most of your components should simply take some data from props and render it. However, sometimes you need to respond to user input, a server request or the passage of time. For this you use state.

Try to keep as many of your components as possiblestateless. By doing this you'll isolate the state to its most logical place and minimize redundancy, making it easier to reason about your application.

A common pattern is to create severalstatelesscomponents that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via props. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

What Should Go in State?

State should contain data that a component's event handlers may change to trigger a UI update. In real apps this data tends to be very small and JSON-serializable. When building a stateful component, think about the minimal possible representation of its state, and only store those properties in this.state. Inside of render() simply compute any other information you need based on this state. You'll find that thinking about and writing applications in this way tends to lead to the most correct application, since adding redundant or computed values to state means that you need to explicitly keep them in sync rather than rely on React computing them for you. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

간단히 말하면

상태는 구성 요소 외부에서 액세스 및 수정할 수 없으며 구성 요소 내에서만 사용 및 수정할 수있는 구성 요소의 로컬 상태를 나타냅니다.

일반 JS

 
Most of the answers are confusing Beginners rather clarifying. It's very hard to
  relate and understand.You can understand it by relating it to Plain
  JS.

React JS Equivalent

const DummyFunction = () => {
  let name = 'Manoj';
  console.log(`Hey ${name}`)
}

반면

Props는 구성 요소에 소품 형태로 부모 구성 요소로부터 데이터를 수신 할 수있는 기능을 제공하여 구성 요소를 재사용 할 수있게합니다.

일반 JS

class DummyComponent extends React.Component {
  state = {
    name: 'Manoj'
  }
  render() {
    return <div>Hello {this.state.name}</div>;
  }

React JS

const DummyFunction = (name) => {
  console.log(`Hey ${name}`)
}
DummyFunction('Manoj');
DummyFunction('Ajay');

크레딧 : https://medium.com/@manojsinghnegi

기사 링크 : https : //medium.com/@manojsinghnegi/react-state-vs-props-explained-51beebd73b21

class DummyComponent extends React.Component { render() { return <div>Hello {this.props.name}</div>; } } // when using the component <DummyComponent name="Manoj" /> <DummyComponent name="Ajay" />

따라서상태는 현재 구성 요소로 제한되지만소품은 원하는 구성 요소로 전달 될 수 있습니다 ...상태를 전달할 수 있습니다. >현재 구성 요소를 다른 구성 요소로prop로 설정합니다.

또한 React에는 소품이 있고 내부 상태가 아닌상태 비 저장 요소가 있습니다 ...

앱에서 작동 방식을 보여주는 아래 예 :

부모(상태 전체 구성 요소) :

 
props(short for “properties”) andstateare both plain JavaScript
  objects. While both hold information that influences the output of
  render, they are different in one important way: props get passed to
  the component (similar to function parameters) whereasstateis
  managed within the component (similar to variables declared within a
  function).

자식(상태 비 저장 구성 요소) :

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> );