Для общения между родителями и детьми просто пройдите реквизит.

Используйте состояние для хранения данных, необходимых вашей текущей странице, в виде контроллера.

Используйте реквизиты для передачи данных и обработчиков событий вашим дочерним компонентам.

Эти списки должны помочь вам при работе с данными в ваших компонентах.

Реквизит

• неизменны
  • что позволяет React делать быстрые проверки ссылок
• используются для передачи данных из вашего view-контроллера
  • ваш компонент высшего уровня
• иметь лучшую производительность
  • используйте это для передачи данных дочерним компонентам

государственный

• должен управляться в вашем view-контроллере
  • ваш компонент высшего уровня
• изменчиво
• имеет худшую производительность
• не должны быть доступны из дочерних компонентов
  • передайте это с реквизитом вместо

Для связи между двумя компонентами, которые не имеют отношения родитель-потомок, вы можете настроить собственную глобальную систему событий. Подписаться на события в componentDidMount(), отписаться в componentWillUnmount() и вызвать setState() при получении события. Флюс-паттерн является одним из возможных способов устроить это. - https://facebook.github.io/react/tips/communicate-between-components.html

Какие компоненты должны иметь состояние?

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

Постарайтесь сохранить как можно больше ваших компонентов без сохранения состояния. Делая это, вы изолируете состояние в наиболее логичном месте и минимизируете избыточность, упрощая анализ вашего приложения.

Обычным шаблоном является создание нескольких компонентов без сохранения состояния, которые просто визуализируют данные и имеют над ними компонент с отслеживанием состояния в иерархии, которая передает свое состояние своим дочерним элементам через реквизиты. Компонент с состоянием инкапсулирует всю логику взаимодействия, в то время как компоненты без состояния заботятся о представлении данных декларативным способом. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

Что должно идти в государстве?

Состояние должно содержать данные, которые обработчики событий компонента могут изменить, чтобы вызвать обновление пользовательского интерфейса. В реальных приложениях эти данные имеют тенденцию быть очень маленькими и JSON-сериализуемыми. При создании компонента с состоянием подумайте о минимально возможном представлении его состояния и сохраняйте только эти свойства в этом.state. Внутри render() просто вычислите любую другую информацию, которая вам нужна, основываясь на этом состоянии. Вы обнаружите, что обдумывание и написание приложений таким способом ведет к созданию наиболее правильного приложения, поскольку добавление избыточных или вычисляемых значений в состояние означает, что вам необходимо явно сохранять их синхронизацию, а не полагаться на то, что React вычислит их для вас. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

Реквизит vs state summary Мне больше всего нравится: https://github.com/uberVU/react-guide/blob/master/props-vs-state.md Большая подсказка для тех ребят. Ниже приведена отредактированная версия этой страницы:

реквизит vs state

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

реквизита

Реквизиты (short для свойств) - это компонентная конфигурация. Они получены сверху и неизменны, если речь идет о Компоненте, принимающем их. Компонент не может изменить свои реквизиты, но он отвечает за объединение реквизитов своих дочерних Компонентов. Реквизиты не должны просто быть данными - функции обратного вызова могут передаваться как реквизиты.

состояние

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

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

Изменение реквизита и состояния

                                                   props   state
    Can get initial value from parent Component?    Yes     Yes
    Can be changed by parent Component?             Yes     No
    Can set default values inside Component?*       Yes     Yes
    Can change inside Component?                    No      Yes
    Can set initial value for child Components?     Yes     Yes
    Can change in child Components?                 Yes     No

• Обратите внимание, что как реквизиты, так и начальные значения состояния, полученные от родителей, переопределяют значения по умолчанию, определенные внутри Компонента.

Если этот компонент имеет состояние?

Состояние необязательно. Поскольку состояние увеличивает сложность и снижает предсказуемость, предпочтительным является компонент без состояния. Несмотря на то, что вы явно не можете обойтись без состояния в интерактивном приложении, вам следует избегать слишком большого количества компонентов с поддержкой состояния.

Типы компонентов

Компонент без учета состояния Только реквизит, не состояние. Там не много происходит, кроме функции render(). Их логика вращается вокруг реквизита, который они получают. Это позволяет им очень легко следить и тестировать.

Компонент состояния > . Оба реквизита и состояние. Они используются, когда ваш компонент должен сохранять определенное состояние. Это хорошее место для взаимодействия клиент-сервер (XHR, веб-сокеты и т.д.), Обработки данных и реагирования на пользовательские события. Такая логистика должна быть инкапсулирована в умеренное количество компонентов Stateful, в то время как вся логика визуализации и форматирования должна перемещаться вниз по потоку во многие компоненты без учета состояния.

Источники

• Вопрос о 'реквизитах' и 'состоянии' - Группы Google
• Мышление в реале: укажите, где должно жить ваше государство

Большинство ответов сбивают с толку начинающих, а скорее уточняющих. Это очень трудно связать и понять. Вы можете понять это, связав это с Plain JS.

Проще говоря,

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

Plain JS

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

React JS Эквивалент

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

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

Plain JS

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

Реагировать JS

class DummyComponent extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }

}
// when using the component
<DummyComponent name="Manoj" />
<DummyComponent name="Ajay" />

Кредиты: https://medium.com/@manojsinghnegi

Статья Линке: https://medium.com/@manojsinghnegi/react-state-vs-props-explained-51beebd73b21

props (сокращение от "properties") и state являются простыми объектами JavaScript. Хотя оба хранят информацию, которая влияет на результаты рендеринга, они отличаются одним важным способом: реквизиты передаются компоненту (аналогично параметрам функции), тогда как состояние управляется внутри компонента (аналогично переменным, объявленным внутри функции).

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

Также в React у нас есть компоненты без состояния, которые имеют только реквизиты, а не внутреннее состояние...

Пример ниже показывает, как они работают в вашем приложении:

Родитель (компонент с полным состоянием):

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

В основном, разница в том, что состояние - это что-то вроде атрибутов в ООП: это что-то локальное для класса (компонента), которое используется для лучшего описания. Реквизиты похожи на параметры - они передаются компоненту от вызывающего компонента (родителя): как если бы вы вызывали функцию с определенными параметрами.

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

Короче.

значения реквизита не могут быть изменены [неизменяемые]

значения состояния могут быть изменены с помощью метода setState [mutable]

Props: Props - это не что иное, как свойство компонента, а реагирующий компонент - это не что иное, как функция javascript.

  class Welcome extends React.Component {
    render() {
      return <h1>Hello {this.props.name}</h1>;
    }
  }

элемент const =;

здесь <Welcome name="Sara"/> передача объекта {name: 'Sara'} в качестве реквизита компонента Welcome. Для передачи данных из одного родительского компонента в дочерний компонент мы используем реквизиты. Реквизит неизменен. Во время жизненного цикла компонентов подпорки не должны меняться (считайте их неизменными).

Состояние: состояние доступно только внутри компонента. Для отслеживания данных внутри компонента мы используем состояние. мы можем изменить состояние с помощью setState. Если нам нужно передать состояние ребенку, мы должны передать его как реквизит.

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

  render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }
}

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

Существует также случай, когда вы можете использовать реквизиты по умолчанию, чтобы реквизиты были установлены, даже если родительский компонент не пропустил реквизиты.

Вот почему люди называют React однонаправленным потоком данных. Это займет немного времени, и я, вероятно, позже напишу об этом в блоге, но сейчас просто помните: данные передаются от родителя к ребенку. Реквизит неизменен (причудливое название для него не меняется)

Так были счастливы. Компоненты получают данные от родителя. Все отсортировано, верно?

Ну, не совсем. Что происходит, когда компонент получает данные от кого-то, кроме родителя? Что если пользователь вводит данные непосредственно в компонент?

Ну, вот почему у нас есть государство.

ГОСУДАРСТВО

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

Таким образом, состояние используется для того, чтобы компонент мог отслеживать информацию между любыми визуализациями, которые он делает. Когда вы устанавливаете setState, он обновляет объект состояния, а затем повторно отображает компонент. Это очень круто, потому что это означает, что React заботится о тяжелой работе и невероятно быстр.

В качестве небольшого примера состояния приведен фрагмент из строки поиска (стоит проверить этот курс, если вы хотите узнать больше о React)

Class SearchBar extends Component {
 constructor(props) {
  super(props);
this.state = { term: '' };
 }
render() {
  return (
   <div className="search-bar">
   <input 
   value={this.state.term}
   onChange={event => this.onInputChange(event.target.value)} />
   </div>
   );
 }
onInputChange(term) {
  this.setState({term});
  this.props.onSearchTermChange(term);
 }
}

РЕЗЮМЕ

Реквизит и Государство делают подобные вещи, но используются по-разному. Большинство ваших компонентов, вероятно, будут без сохранения состояния.

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

Состояние используется для изменяемых данных или данных, которые будут меняться. Это особенно полезно для пользовательского ввода. Вспомните, например, панель поиска. Пользователь будет вводить данные, и это будет обновлять то, что они видят.

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

1. компонент, в который вводятся данные, должен иметь эти данные в своем состоянии, потому что он должен манипулировать и изменять их во время ввода данных

2. где-либо еще в приложении данные должны передаваться в качестве подпорки для всех других компонентов

Так что да, реквизиты меняются, но они меняются в "источнике" и затем просто текут оттуда. Таким образом, реквизиты являются неизменными в контексте компонента, получающего их.

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

Государственный:

1. состояния изменчивы.
2. состояния, связанные с отдельными компонентами, не могут использоваться другими компонентами.
3. состояния инициализируются при монтировании компонента.
4. состояния используются для визуализации динамических изменений внутри компонента.

реквизит:

1. реквизит неизменны.
2. Вы можете передавать реквизит между компонентами.
3. реквизиты в основном используются для связи между компонентами. Вы можете напрямую переходить от родителя к ребенку. Для перехода от ребенка к родителю необходимо использовать концепцию подъема состояний.

class Parent extends React.Component{
  render()
  {
     return(
        <div>
            <Child name = {"ron"}/>
        </div>
      );
  }
}

class Child extends React.Component{
{
    render(){
      return(
         <div>
              {this.props.name}
        </div>
      );
     }
}

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

props - это специальное свойство, которое является неизменным по своей природе и используется в случае передачи по значению от родителя к ребенку. реквизиты - это просто канал связи между Компонентами, всегда перемещающийся сверху (родитель) в нижний (дочерний элемент).

ниже приведен полный пример объединения состояния и реквизита: -

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>state&props example</title>

        <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
        <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
        <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

      </head>
      <body>
      <div id="root"></div>
        <script type="text/babel">

            var TodoList = React.createClass({
                render(){
                    return <div className='tacos-list'>
                                {
                                    this.props.list.map( ( todo, index ) => {
                                    return <p key={ 'taco-${ index }' }>{ todo }</p>;
                            })}
                            </div>;
                }
            });

            var Todo = React.createClass({
                getInitialState(){
                    return {
                        list : [ 'Banana', 'Apple', 'Beans' ]       
                    }
                },
                handleReverse(){
                    this.setState({list : this.state.list.reverse()});
                },
                render(){
                    return <div className='parent-component'>
                              <h3 onClick={this.handleReverse}>List of todo:</h3>
                              <TodoList list={ this.state.list }  />
                           </div>;
                }
            });

            ReactDOM.render(
                <Todo/>,
                document.getElementById('root')
            );

        </script>
      </body>
      </html>

Состояние - это способ реагирования на информацию, содержащуюся в вашем компоненте.

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

Обычно лучший способ определить состояние выглядит следующим образом:

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = { key1: value1, key2: value2 }    
  }
}

но в реализациях latests реакции native вы можете просто сделать:

class MyComponent extends React.Component {
  state = { key1: value1, key2: value2 }    
}

Эти два примера выполняются точно так же, это просто улучшение синтаксиса.

Итак, что отличаетс от того, как использовать атрибуты объектов, как это всегда имеет место при программировании OO? Обычно информация, хранящаяся в вашем состоянии, не должна быть статичной, она со временем изменится, и вам необходимо будет обновить View, чтобы отразить эти изменения. State предлагает эту функцию простым способом.

СОСТОЯНИЕ МОЖЕТ БЫТЬ ВХОДНЫМИ! и я не могу сделать этого достаточно. Что это значит? Это означает, что вы НИКОГДА не должны делать что-то вроде этого.

 state.key2 = newValue;

Правильный способ сделать это:

this.setState({ key2: newValue });

Используя this.setState, ваш компонент запускается через цикл обновления, и если какая-либо часть состояния изменяется, ваш метод визуализации Component будет вызван снова, чтобы отразить эти изменения.

Проверяйте документы для более подробного объяснения: https://facebook.github.io/react/docs/state-and-lifecycle.html

В принципе, реквизиты и состояние - это два способа, которыми компонент может знать, что и как визуализировать. Какая часть состояния приложения принадлежит государству и которая принадлежит некоторому магазину верхнего уровня, больше связана с дизайном вашего приложения, чем с тем, как работает React. Самый простой способ решения - ИМО - подумать, полезен ли этот конкретный фрагмент для приложения в целом или какая-то локальная информация. Кроме того, важно не дублировать состояние, поэтому, если какой-то фрагмент данных можно вычислить из реквизита - он должен рассчитываться из реквизита.

Например, скажем, у вас есть элемент управления выпадающим списком (который включает стандартный HTML-код для пользовательского стиля), который может: a) выбрать какое-либо значение из списка и b) открыть или закрыть (т.е. список опций, отображаемый или скрытый). Теперь предположим, что ваше приложение отображает список элементов определенного типа и ваш фильтр выпадающего списка для записей списка. Тогда было бы лучше передать значение активного фильтра в качестве опоры и сохранить открытое/закрытое состояние локально. Кроме того, чтобы сделать его функциональным, вы должны передать обработчик onChange из родительского компонента, который будет вызываться внутри элемента выпадающего списка и немедленно отправить обновленную информацию (новый выбранный фильтр) в магазин. С другой стороны, открытое/закрытое состояние может храниться внутри выпадающего компонента, потому что остальная часть приложения действительно не заботится о том, открыт ли элемент управления, пока пользователь не изменит его значение.

Следующий код не работает полностью, ему нужны css и обработка выпадающего меню click/blur/change, но я хотел бы сохранить пример минимальным. Надеюсь, это поможет понять разницу.

const _store = {
    items: [
    { id: 1, label: 'One' },
    { id: 2, label: 'Two' },
    { id: 3, label: 'Three', new: true },
    { id: 4, label: 'Four', new: true },
    { id: 5, label: 'Five', important: true },
    { id: 6, label: 'Six' },
    { id: 7, label: 'Seven', important: true },
    ],
  activeFilter: 'important',
  possibleFilters: [
    { key: 'all', label: 'All' },
    { key: 'new', label: 'New' },
    { key: 'important', label: 'Important' }
  ]
}

function getFilteredItems(items, filter) {
    switch (filter) {
    case 'all':
        return items;

    case 'new':
        return items.filter(function(item) { return Boolean(item.new); });

    case 'important':
        return items.filter(function(item) { return Boolean(item.important); });

    default:
        return items;
  }
}

const App = React.createClass({
  render: function() {
    return (
            <div>
            My list:

            <ItemList   items={this.props.listItems} />
          <div>
            <Dropdown 
              onFilterChange={function(e) {
                _store.activeFilter = e.currentTarget.value;
                console.log(_store); // in real life, some action would be dispatched here
              }}
              filterOptions={this.props.filterOptions}
              value={this.props.activeFilter}
              />
          </div>
        </div>
      );
  }
});

const ItemList = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.items.map(function(item) {
          return <div key={item.id}>{item.id}: {item.label}</div>;
        })}
      </div>
    );
  }
});

const Dropdown = React.createClass({
    getInitialState: function() {
    return {
        isOpen: false
    };
  },

  render: function() {
    return (
        <div>
            <select 
            className="hidden-select" 
          onChange={this.props.onFilterChange}
          value={this.props.value}>
            {this.props.filterOptions.map(function(option) {
            return <option value={option.key} key={option.key}>{option.label}</option>
          })}
        </select>

        <div className={'custom-select' + (this.state.isOpen ? ' open' : '')} onClick={this.onClick}>
            <div className="selected-value">{this.props.activeFilter}</div>
          {this.props.filterOptions.map(function(option) {
            return <div data-value={option.key} key={option.key}>{option.label}</div>
          })}
        </div>
      </div>
    );
  },

  onClick: function(e) {
    this.setState({
        isOpen: !this.state.isOpen
    });
  }
});

ReactDOM.render(
  <App 
    listItems={getFilteredItems(_store.items, _store.activeFilter)} 
    filterOptions={_store.possibleFilters}
    activeFilter={_store.activeFilter}
    />,
  document.getElementById('root')
);

В React состояния хранят данные, а также реквизиты. Его отличие от последнего заключается в том, что хранимые данные могут быть изменены различными изменениями. Это не что иное, как объекты, написанные на простом JavaScript, поэтому они могут содержать данные или коды, представляющие информацию, которую вы хотите смоделировать. Если вам нужны более подробные сведения, рекомендуем вам ознакомиться с этими публикациями. Использование состояния в реакции и использование реквизита в реакции.

Государство - источник истины, где живут ваши данные. Можно сказать, что государство проявляется через реквизит.

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

При одинаковых реквизитах (данные для отображения) всегда будет создаваться одинаковая разметка.

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

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

Простое объяснение: STATE - это локальное состояние компонента, например color = "blue" или animation = true и т.д. Используйте this.setState для изменения состояния компонента. PROPS - это то, как компоненты общаются друг с другом (отправляют данные от родителя к потомку) и делают компоненты повторно используемыми.

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

Состояние управляется внутри компонента (дочерний или родительский).

Вот определение, которое я нашел, чтобы поддержать это:

Это моя текущая точка зрения относительно объяснения состояния и реквизита.

1. Состояние похоже на локальную переменную внутри вашего компонента. Вы можете манипулировать значением состояния с помощью установки состояния. Затем вы можете передать значение состояния вашему дочернему компоненту, например.

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

Реактивные компоненты используют состояние для ЧТЕНИЯ/ЗАПИСИ внутренних переменных, которые могут быть изменены/изменены, например:

this.setState({name: 'Lila'})

React props - это специальный объект, который позволяет программисту получать переменные и методы из родительского компонента в дочерний компонент.

Это что-то вроде окон и дверей дома. Реквизиты также неизменны, дочерний компонент не может их менять/обновлять.

Есть несколько методов, которые помогают прослушивать изменения реквизитов родительским компонентом.

В общем, состояние одного компонента (родителя) является опорой для дочернего компонента.

1. Состояние находится в компоненте, где реквизиты передаются от родителя к потомку.

2. Реквизит, как правило, неизменяем.

   class Parent extends React.Component {
       constructor() {
           super();
           this.state = {
               name : "John",
           }
       }
       render() {
           return (
               <Child name={this.state.name}>
           )
       }
   }
   
   class Child extends React.Component {
       constructor() {
           super();
       }
   
       render() {
           return(
               {this.props.name} 
           )
       }
   }
   

В приведенном выше коде у нас есть родительский класс (Parent) с именем в качестве состояния, которое передается дочернему компоненту (дочернему классу) в качестве реквизита, а дочерний компонент отображает его с помощью {this.props.name}

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