React Basics: Props & State в действие

От моя собствен опит видях, че много хора не разбират Props и State в React като цяло. Аз бях един от тях и загубих толкова много време, за да получа правилния отговор на въпроса: Каква е разликата между реквизит и състояние?

Имот

В React, props (съкратено от „свойства“) са като атрибути в HTML. Можем да предаваме собственост само от компоненти родител към неговите деца. Не можем обаче да направим обратното, така че потокът от данни на React е еднопосочен. И така, да кажем, че имаме компонент Родител и Дете и искаме да предадем един атрибут от Родител към Дете.

class ParentComponent extends React.Component {
   render() {
      return <ChildComponent testProp="Hello World" />;
   }
}
class ChildComponent extends React.Component {
   render() {
      return <p>This is child property: {this.props.testProp}</p>;
   }
}

Реквизити по подразбиране

Можете също така да декларирате Default Props, когато искате да направите свойство според изискванията, поне с тази стойност. В този пример имаме родителски компонент без предадена проп, но все пак искаме да покажем нещо, така че използваме defaultProps.

class ParentComponent extend React.Component{
   render(){
      return <ChildComponent />;
   }
}
class ChildComponent extend React.Component{
   render(){
      return <p>This is child property: {this.props.testProp}</p>
   }
}
ChildComponent.defaultProps = {
   testProp: "Default Text"
};

В примера по-горе, ако визуализираме родителски компонент, ще получим текст „Това е дъщерно свойство: текст по подразбиране“, дори ако не сме предали никакво свойство на дъщерен компонент.

Щат

Ами ако се нуждаем от данни, които не идват от родителски компонент? Ами ако потребителят въведе данни директно в компонента? Там използваме състояние.

Реквизитите не трябва да се променят (те са неизменни), така че искаме да използваме и състояние. Реагиращите компоненти обаче нямат състояние и обикновено всички те са без състояние. Компонентът без състояние може да бъде написан като проста функция:

const StatelessComponent (message) => (
   <div>{`Display message: ${message}`}</div>
);

Въпреки това, когато се нуждаем от нещо неизменно, с което да работим, трябва да използваме stateи наричаме тези компоненти — компоненти със състояние.
За да актуализираме състоянието, използваме setState функция. Има пример за обработка на вход от потребител. Това е нещо, от което ще се нуждаете най-много.

class StateShow extends React.Component {
   constructor(props){
      super(props);
      
      this.state = { termToChange: '' };
   }
   render(){
      return(
         <div>
            <input 
            value={this.state.termToChange}
            onChange={event => this.onInputChange(event.target.value)} />
         </div>
      );
   }
   onInputChange(term){
      this.setState({termToChange: term});
   }
}

// Wrong
this.state.term = 'Something';
// Correct
this.setState({term: 'Something'});

// Wrong
this.setState({
   counter: this.state.counter + this.props.increment
});
// Correct
this.setState((prevState, props) => ({
   counter: prevState.counter + props.increment
}));

constructor(props){
   super(props);
   this.state = {
      terms: [],
      counters: []
   };
}
componentDidMount(){
   fetchTerms().then(response => {
      this.setState({
         terms: response.terms
      });
   });
   fetchCounters().then(response => {
      this.setState({
         counters: response.counters
      });
   });
}