Реквизит против состояния в React

В компоненте React реквизиты являются переменными, переданными ему родительским компонентом. Состояние , с другой стороны, по-прежнему является переменным, но непосредственно инициализируется и управляется компонентом.

Состояние может быть инициализировано реквизитами.

Например, родительский компонент может включать дочерний компонент путем вызова

Родитель может передать реквизит, используя этот синтаксис:

Внутри конструктора дочернего компонента мы могли бы получить доступ к реквизиту:

class ChildComponent extends React.Component {
  constructor(props) {
    super(props)
    console.log(props.color)
  }
}

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

Реквизит можно использовать для установки внутреннего состояния на основе значения реквизита в конструкторе, например:

class ChildComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state.colorName = props.color
  }
}

Конечно, компонент также может инициализировать состояние, не глядя на реквизиты.

В этом случае ничего полезного не происходит, но представьте, что вы делаете что-то другое, основываясь на значении prop, возможно, лучше всего установить значение состояния.

Реквизиты никогда не должны изменяться в дочернем компоненте, поэтому, если происходит что-то, что изменяет какую-либо переменную, эта переменная должна принадлежать состоянию компонента.

Реквизиты также используются для предоставления дочерним компонентам доступа к методам, определенным в родительском компоненте. Это хороший способ централизовать управление состоянием в родительском компоненте и избежать необходимости иметь собственное состояние у детей.

Большинство ваших компонентов будут просто отображать некоторую информацию, основанную на полученных реквизитах, и оставаться без гражданства .

Оригинал: “https://flaviocopes.com/react-state-vs-props/”