React Native: 상태 대 소품

반응에서 대부분의 초보자를 혼란스럽게 하는 질문입니다.

소품과 상태의 차이점은 무엇인가요?

이것을 명확히합시다.

소품에는 구성 요소에 제공하는 데이터가 포함됩니다.

상태에는 해당 구성 요소에 대한 로컬 또는 비공개 데이터가 포함됩니다. 따라서 다른 구성 요소는 해당 상태에 액세스할 수 없으며 해당 구성 요소에 완전히 내부적입니다.

Counters 구성 요소가 있다고 가정해 보겠습니다.

import React, { Component } from 'react';
import Counter from './counter';

class Counters extends Component {
  state = {
    counters: [
      {id: 1, value: 0},
      {id: 2, value: 0},
      {id: 3, value: 0},
      {id: 4, value: 0}
    ]
  };
    render() {
    return (
      <div>        
        { this.state.counters.map(counter =>
          <Counter key={counter.id} value={counter.value} id={counter.id}>
          </Counter>
          )
        }
      </div>
    );
  }
}

export default Counters;

render 구성 요소의 Counters 메서드를 자세히 살펴보면 다음과 같습니다.

<Counter key={counter.id} value={counter.value} id={counter.id}></Counter>

여기에서 설정하는 모든 속성은 props 구성 요소에 대한 입력인 Counter 의 일부입니다.

이 구성 요소의 state에 액세스할 수 없습니다. 해당 구성 요소의 로컬 및 내부입니다.

Props는 읽기 전용입니다. 예를 들어 Counter 구성 요소를 살펴보겠습니다.

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    value: this.props.value
  };

  handleIncrement = product => {
    this.setState({value: this.state.value + 1});
  };

  render() {
    return (
      <div>
        <span className='badge badge-warning'>{this.state.value}</span>
        <button
          onClick={ () => this.handleIncrement({ id: 1 }) }
          className="btn btn-secondary btn-sm">click
        </button>
      </div>
    );
  }
}

export default Counter;

카운터를 1씩 증가시키는 헬퍼 메소드handleIncrement를 자세히 살펴보십시오.

handleIncrement = product => {
  this.setState({value: this.state.value + 1});
};

handleIncrement 메서드를 업데이트하여 다음과 같이 props.value를 업데이트하면:

handleIncrement = product => {
  this.props.value = 0;
  // this.setState({value: this.state.value + 1});
};

그리고 뷰에서 이를 증가시키면 다음 오류가 발생합니다.



따라서 반응은 어떤 구성 요소에 대한 소품을 변경할 수 없습니다.

구성 요소의 수명 주기 동안 입력을 수정하려면 해당 입력을 가져와 handleIncrement 메서드에서 처음에 수행된 것과 같은 상태로 설정해야 합니다.

handleIncrement = product => {
  this.setState({value: this.state.value + 1});
};

상태 및 소품에 대한 추가 정보

state 및 props에 대한 자세한 내용은 반응docs.을 참조하세요.