Навигация по Props и State в React 🚀

Для любого нового разработчика React разница между props и состоянием может быть не совсем ясной. Оба они похожи друг на друга, но различаются по функциям и использованию. В этом посте я расскажу о разнице между ними и рассмотрю пару примеров. Давайте начнем!

Итак, что такое реквизит?

Свойства - это свойства, которые большую часть времени передаются как аргументы от родительского компонента. Они работают как внешнее воздействие, над которым компонент не может повлиять. Представьте, что у нас есть родительский компонент, единственная функция которого - передать имя дочернему компоненту. Эта передача информации по вертикали обычно осуществляется через реквизит.

import React from 'react'
import ChildComponent from './ChildComponent'
class ParentComponent extends React.Component {
render() {
  return <ChildComponent name='John'/>
}}
export default ParentComponent;

После передачи данных дочерний компонент сможет получить доступ к этим данным через this.props, как показано ниже:

import React from 'react'
class ChildComponent extends React.Component {
render() {
  return <p>Hi {this.props.name}</p>
}}
export default ChildComponent;

ПРИМЕЧАНИЕ. Реквизит может быть любым. В этом примере мы передаем String, но можем передать любой тип данных в качестве реквизита.

Хорошо, а как насчет состояния?

Состояние также представляет собой набор свойств, однако состояние является внутренним для компонента и может изменяться в ходе взаимодействия. В отличие от props, состояние не передается от любого типа Component. Состояние инициализируется большую часть времени в начале жизненного цикла компонента следующим образом:

import React from 'react'
class ChildComponent extends React.Component {
   constructor() {
      super()
   this.state = {
     name: "John"
   }}
render() {
  return <p>Welcome {this.state.name}</p>
}}
export default ChildComponent;

Как и в случае с props, после определения состояния к нему можно получить доступ через this.state, как показано выше. С другой стороны, в отличие от props, состояние может изменяться, что означает, что мы можем изменить значение любого конкретного состояния с помощью this.setState. В качестве примера предположим, что мы пытаемся подсчитать, сколько раз была нажата кнопка. Поскольку значение нашей переменной count со временем должно измениться, нам нужно будет использовать State.

import React from 'react'
class ButtonCounter extends React.Component {
   constructor() {
      super()
this.state = {
  numberOfTimesClicked: 0
}}
onClick = () => {
  const newClickCount = this.state.numberOfTimesClicked + 1
  this.setState({
    numberOfTimesClicked: newClickCount
  })
}
render() {
  return (
    <div>
      <p>{this.state.numberOfTimesClicked} times clicked!</p>
      <button onClick={this.handleClick}>Click me!</button>
    </div>
)}}
export default ButtonCounter;

В приведенном выше примере мы отслеживаем количество кликов в состоянии компонента. Каждый раз, когда нажимается кнопка, вызывается функция обратного вызова, и состояние обновляется с помощью this.setState.

Собираем все вместе!

До сих пор мы рассматривали как пример реквизита, так и пример состояния. Давайте посмотрим, как будет выглядеть их использование в одном компоненте. В этом примере мы собираемся использовать два компонента: ButtonParent (родительский компонент) и ButtonCounter (дочерний компонент). Кнопка Родитель выглядит так:

import React from 'react'
import ButtonCounter from './ButtonCounter'
class ButtonParent extends React.Component {
render() {
  return <ButtonCounter name='John'/>
}}
export default ButtonParent;

Как видите, мы передаем имя как опору от родительского компонента к дочернему компоненту. Сделав это, дочерний компонент сможет получить доступ к этим данным с помощью this.props.

import React from 'react'
class ButtonCounter extends React.Component {
   constructor() {
      super()
this.state = {
  numberOfTimesClicked: 0
}}
onClick = () => {
  const newClickCount = this.state.numberOfTimesClicked + 1
  this.setState({
    numberOfTimesClicked: newClickCount
  })
}
render() {
  return (
    <div>
      <h1>Welcome, {this.props.name} </h1>
      <p>{this.state.numberOfTimesClicked} times clicked!</p>
      <button onClick={this.handleClick}>Click me!</button>
    </div>
)}}
export default ButtonCounter;

Окончательный результат будет:

# The zero will update every time the user clicks the button
# Output
Welcome, John! # Got name from this.props
0 times clicked! # Got zero from this.state
Click me!

Заключение

Свойства - это свойства, которые обычно передаются от родительского компонента к дочернему компоненту, и они не изменяются, в то время как состояние - это набор свойств, которыми компонент управляет внутри и которые могут изменяться с течением времени. Я действительно надеюсь, что этот пост был полезен и что вы сможете принимать более обоснованные решения при разработке приложения React. Удачного кодирования!

Навигация по Props и State в React 🚀

Вопросы по теме