Я смотрел курс Pluralsight по React, и инструктор заявил, что реквизит менять нельзя. Я сейчас читаю статью (uberVU / реакции-руководство) о реквизитах против состояния, и там говорится

И реквизиты, и изменения состояния запускают обновление рендера.

Далее в статье говорится:

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

• Значит, реквизит может меняться, но он должен быть неизменным?
• Когда вы должны использовать реквизит и когда вы должны использовать состояние?
• Если у вас есть данные, в которых нуждается компонент React, должны ли они передаваться через реквизиты или настраиваться в компоненте React через getInitialState?

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

<MyChild name={this.state.childsName} />

Значение состояния родителя childsNameстановится ребенком this.props.name. С точки зрения ребенка, имя опора является неизменным. Если это нужно изменить, родитель должен просто изменить свое внутреннее состояние:

this.setState({ childsName: 'New name' });

и Реакт распространит это для ребенка для вас. Естественный последующий вопрос: что, если ребенку нужно сменить опору? Обычно это делается через дочерние события и родительские обратные вызовы. Ребенок может выставить событие, которое называется, например onNameChanged,. Затем родитель подписывается на событие, передавая обработчик обратного вызова.

<MyChild name={this.state.childsName} onNameChanged={this.handleName} />

Дочерний объект будет передавать запрошенное новое имя в качестве аргумента обратного вызова события, вызывая, например this.props.onNameChanged('New name'), и родитель будет использовать имя в обработчике события для обновления своего состояния.

handleName: function(newName) {
   this.setState({ childsName: newName });
}

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

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

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

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

Реквизит

• неизменны
  • что позволяет 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

Вы можете понять это лучше всего, связав его с функциями простого JS.

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

Состояние - это локальное состояние компонента, доступ к которому и изменение за пределами компонента невозможно. Это эквивалентно локальным переменным в функции.

Обычная функция JS

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

Реагировать Компонент

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

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

Обычная функция JS

const DummyFunction = (name) => {
  console.log(`Hey ${name}`)
}

// when using the function
DummyFunction('Manoj');
DummyFunction('Ajay');

Реагировать Компонент

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

}

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

Кредиты: Манодж Сингх Неги

Ссылка на статью: React State vs Props объяснил

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

реквизит против государства

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

реквизит

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

штат

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

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

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

                                                   реквизит состояние
    Может ли получить начальное значение от родительского компонента? Да да
    Может быть изменен родительским компонентом? да нет
    Можно ли установить значения по умолчанию внутри компонента? * Да Да
    Может измениться внутри Компонента? Нет да
    Можно установить начальное значение для дочерних компонентов? Да да
    Может измениться в дочерних компонентах? да нет

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

Должен ли этот компонент иметь состояние?

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

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

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

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

источники

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

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

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

function A(props) {
  return <h1>{props.message}</h1>
}

render(<A message=”hello” />,document.getElementById(“root”));

class A extends React.Component{  
  constructor(props) {  
    super(props)  
    this.state={data:"Sample Data"}  
  }  
  render() {
    return(<h2>Class State data: {this.state.data}</h2>)  
  } 
}

render(<A />, document.getElementById("root"));

• Состояние может быть изменено (изменяемое)
• В то время как реквизит не может (неизменный)

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

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

как я узнал, работая с реагировать.

• реквизиты используются компонентом для получения данных из внешней среды, то есть другого компонента (чистый, функциональный или класс) или общего класса или кода JavaScript / машинописного текста

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

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

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

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

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

Например, допустим, у вас есть какой-то выпадающий элемент управления (который включает стандартный выбор HTML для пользовательского стиля), который может а) выбрать какое-либо значение из списка и б) открыть или закрыть (т. Е. Список параметров отображается или скрывается). Теперь предположим, что ваше приложение отображает какой-то список элементов и фильтр выпадающих элементов управления для записей в списке. Тогда было бы лучше передать значение активного фильтра в качестве пропеллера и сохранить открытое / закрытое состояние локальным. Также, чтобы сделать его функциональным, вы должны передать обработчик 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')
);

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

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

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

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

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

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

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

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

Государство ДОЛЖНО БЫТЬ НЕМНОГО! и я не могу уделять этому достаточно внимания. Что это значит? Это означает, что вы никогда не должны делать что-то подобное.

 state.key2 = newValue;

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

this.setState({ key2: newValue });

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

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

Реквизит просто является сокращением для свойств. Реквизит - это то, как компоненты общаются друг с другом. Если вы вообще знакомы с 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);
 }
}

РЕЗЮМЕ

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

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

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

Короче говоря.

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

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

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

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

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

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

        <script src="https://unpkg.com/react@0.14.8/dist/react.min.js"></script>
        <script src="https://unpkg.com/react-dom@0.14.8/dist/react-dom.min.js"></script>
        <script src="https://unpkg.com/babel-standalone@6.15.0/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>

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

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}

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

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

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

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

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

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

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

Некоторые различия между «состоянием» и «реквизитом» в реакции.

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

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

Реквизит

• реквизиты используют для передачи данных в дочерний компонент

• реквизиты изменяют значение вне компонента (дочерний компонент)

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

• использование состояния внутри компонента класса

• состояние изменить значение внутри компонента

• Если вы отображаете страницу, вы вызываете setState для обновления DOM (обновить значение страницы)

Государство играет важную роль в реагировании

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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