Ответ 1

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

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

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

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

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

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

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

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

Ответ 2

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

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

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

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

Реквизит

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

Ответ 3

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

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

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

реквизита

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

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

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

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

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

                                                   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, веб-сокеты и т.д.), Обработки данных и реагирования на пользовательские события. Такого рода логистика должна быть заключена в умеренном количестве компонентов с сохранением состояния, тогда как вся логика визуализации и форматирования должна переходить вниз во многие компоненты без сохранения состояния.

источники

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

Ответ 4

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

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

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

Обычный JS

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

Реагировать на эквивалент JS

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

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

Обычный 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" />

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

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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

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

Ответ 9

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

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

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

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

Ответ 10

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

РЕЗЮМЕ

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

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

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

Ответ 11

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

Ответ 12

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

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

Ответ 13

Короче.

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

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

Ответ 14

В принципе, реквизиты и состояние - это два способа, которыми компонент может знать, что и как визуализировать. Какая часть состояния приложения принадлежит государству и которая принадлежит некоторому магазину верхнего уровня, больше связана с дизайном вашего приложения, чем с тем, как работает 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')
);

Ответ 15

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

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}

Ответ 16

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

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>

Ответ 17

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

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

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

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

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

Ответ 18

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

Ответ 19

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

Ответ 20

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

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

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

Ответ 21

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

Ответ 22

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

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

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

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

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

Ответ 23

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

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

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

Ответ 24

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

Ответ 25

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

Ответ 26

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

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

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

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

Ответ 27

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

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

Ответ 28

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

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

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

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

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

Ответ 29

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

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}

Ответ 30

От: Андреа Кьярелли, книга "Начало React: упростите ваш рабочий процесс разработки веб-интерфейса и улучшите работу ваших приложений с React":

Каждый компонент React имеет свойство props. Целью этого свойства является сбор данных, передаваемых самому компоненту. Атрибут JSX присоединен к элементу React, свойство с тем же именем присоединено к объекту props. Таким образом, мы можем получить доступ к переданным данным, используя прикрепленное свойство. Кроме того, неизменность реквизита props позволяет нам думать о компонентах components как о чистых функциях, которые являются функциями без побочных эффектов (так как они не изменяются их входные данные). Мы можем представить данные, передаваемые из одного компонента в другой, как однонаправленный поток данных от родительского компонента к дочерним компонентам. Это дает нам более управляемую систему.

React предоставляет механизм поддержки автоматического рендеринга компонента при изменении данных. Такой механизм основан на концепции состояния state. Состояние реакции state - это свойство, представляющее данные, которые со временем меняются. Каждый компонент поддерживает свойство state, но его следует использовать осторожно. Компоненты, которые хранят данные, которые могут изменяться со временем, называются компонентами с состоянием. Компонент состояния stateful component сохраняет состояние state в свойстве this.state. Чтобы сообщить компоненту об изменении состояния, вы должны использовать метод setState(). Состояние - это единственный случай, когда вы можете присвоить значение свойству this.state без использования setState().

setState() объединяет новые данные со старыми данными, уже содержащимися в состоянии, и перезаписывает предыдущее состояние setState() запускает выполнение метода render(), поэтому никогда не следует явно вызывать render() explicitly