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

Як реквізит, так і зміни стану викликають оновлення візуалізації.

Пізніше у статті йдеться про:

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

• Так реквізит може змінюватися, але вони повинні бути незмінні?
• Коли слід використовувати реквізит і коли слід використовувати стан?
• Якщо у вас є дані, необхідні компоненту React, чи повинні вони передаватися через реквізити або налаштування в компоненті React через getInitialState?

Реквізит і стан пов'язані. Стан одного компонента часто стає реквізитом дочірнього компонента. Реквізити передаються дитині в рамках методу візуалізації батьків як другий аргумент React.createElement()або, якщо ви використовуєте JSX, більш звичні атрибути тегів.

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

Державна цінність для батьків childsNameстає дитиною this.props.name. З точки зору дитини, ім'я опора незмінне. Якщо це потрібно змінити, батько повинен просто змінити свій внутрішній стан:

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

Для спілкування батько-дитина просто передайте реквізит.

Використовуйте стан щоб зберігати дані, які потрібні вашій поточній сторінці, у режимі перегляду контролера.

Використовуйте реквізит щоб передати обробники даних і подій до компонентів вашої дитини.

Ці списки повинні допомогти вам орієнтуватися при роботі з даними у ваших компонентах.

Реквізити

• незмінні
  • що дозволяє React робити швидку перевірку довідок
• використовуються для передачі даних з вашого контролера перегляду
  • ваш компонент верхнього рівня
• мають кращі показники
  • використовуйте це для передачі даних дочірнім компонентам

Держава

• слід керувати у вашому контролері перегляду
  • ваш компонент верхнього рівня
• є змінним
• має гірші показники
• не слід отримувати доступ до дочірніх компонентів
  • передайте його замість реквізиту

Для зв'язку між двома компонентами, які не мають стосунків батько-дитина, ви можете налаштувати власну глобальну систему подій. Підпишіться на події компонента компонентDidMount (), скасуйте підписку на компонент компонент WillUnmount () та зателефонуйте setState () при отриманні події. Флюсовий малюнок - це один із можливих способів влаштувати це. - https://facebook.github.io/react/tips/communicate-between-components.html

Які компоненти повинні мати стан?

Більшість ваших компонентів повинні просто взяти деякі дані з реквізиту та віддати їх. Однак іноді потрібно відповісти на введення користувачів, запит сервера або проходження часу. Для цього ви використовуєте стан.

Постарайтеся зберегти якомога більше своїх компонентів без громадянства . Роблячи це, ви ізолюєте стан до найбільш логічного місця та мінімізуєте надмірність, полегшуючи міркування про вашу заявку.

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

Що має бути державою?

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

Ви можете зрозуміти це найкраще, пов’язавши його з функціями Plain 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.

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

Компонент без громадянства Лише реквізит, немає штату. Окрім функції render (), багато нічого не відбувається. Їх логіка обертається навколо реквізиту, який вони отримують. Це робить їх дуже простими для проходження та тестування.

Компонент Stateful Як реквізит, так і стан. Вони використовуються, коли ваш компонент повинен зберігати деякий стан. Це гарне місце для спілкування клієнт-сервер (XHR, веб-сокети тощо), обробки даних та реагування на події користувача. Такі типи логістики повинні бути укладені в помірну кількість компонентів Stateful, тоді як вся логіка візуалізації та форматування повинна рухатися вниз за течією багатьох компонентів без громадянства.

джерела

• Питання про "реквізит" та "стан" - Групи Google
• Мислення в реагуванні: визначте, де має жити ваша держава

реквізити (скорочення «властивості») та стан - це звичайні об’єкти 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"));

• Держава може бути змінена (змінний)
• Тоді як реквізит не може (незмінний)

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

І стан, і реквізит у реакції використовуються для управління даними в компоненті, як правило, реквізити встановлюються батьком і передаються дочірнім компонентам, і вони фіксуються протягом усього компонента. Для даних, які будуть змінюватися, ми повинні використовувати стан. І реквізит є незмінним, тоді як стани є змінними , якщо ви хочете змінити реквізит, який ви можете зробити з батьківського компонента, а потім передати його дочірнім компонентам.

як я дізнався під час роботи з react.

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

• стани використовуються для управління внутрішнім середовищем компонента, означає зміни даних всередині компонента

Реквізит: Реквізит - це не що інше, як властивість компонента, а реагує компонент - це не що інше, як функція javascript.

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

елемент const =;

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

Держава: стан доступний лише в межах Компонента. Для відстеження даних всередині компонента ми використовуємо стан. ми можемо змінити стан за допомогою 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 для вибору користувальницького стилю), який може: a) вибрати деяке значення зі списку, і b) відкрити чи закрити (тобто список параметрів відображається чи приховується). Скажімо, у вашому додатку відображається певний перелік елементів, а випадаючі елементи контролю фільтрують записи списку. Тоді, найкраще буде передавати значення активного фільтра як опору та зберігати відкритий / закритий стан локальним. Крім того, щоб зробити його функціональним, ви передасте обробник onChange від батьківського компонента, який буде викликатися всередині спадного елемента та негайно відправити оновлену інформацію (новий вибраний фільтр) у магазин. З іншого боку, відкритий / закритий стан можна зберігати всередині випадаючого компонента, оскільки решта програми не дуже важлива, якщо керування відкрито, поки користувач фактично не змінить його значення.

Наступний код не працює повністю, йому потрібні css та обробка подій клацання / розмиття / зміни, що випадає, але я хотів, щоб приклад був мінімальним. Сподіваюся, це допомагає зрозуміти різницю.

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

Держава - це спосіб реагування на інформацію, що зберігається вашим компонентом.

Припустимо, у вас є компонент, який потребує отримання деяких даних із сервера. Зазвичай ви хочете повідомити користувача, якщо запит обробляється, якщо він не вдався і т. Д. Це інформаційна інформація, яка є актуальною саме для цього конкретного компонента. Саме тут держава входить у гру.

Зазвичай найкращим способом визначення стану є такий:

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

але в пізніх варіантах реагування рідного ви можете просто зробити:

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

Ці два приклади виконуються точно так само, це лише поліпшення синтаксису.

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

Держава ОБ'ЄДНА БЕЗПЕЧНА! і я не можу зробити на цьому достатньо стресу. Що це означає? Це означає, що НІКОЛИ не слід робити щось подібне.

 state.key2 = newValue;

Правильний спосіб це зробити:

this.setState({ key2: newValue });

Використовуючи this.setState, ваш компонент працює через цикл оновлення, і якщо будь-яка частина стану зміниться, ваш метод візуалізації компонентів буде викликаний знову, щоб відобразити ці зміни.

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

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

Існує також випадок, що у вас можуть бути реквізити за замовчуванням, щоб реквізити були встановлені, навіть якщо батьківський компонент не передає реквізит вниз.

Ось чому люди називають React таким, що має однонаправлений потік даних. Це потребує трохи вашої голови, і я, мабуть, буду вести блог про це пізніше, але поки пам’ятайте лише: дані передаються від батьків до дитини. Реквізит незмінний (фантазійне слово для нього не змінюється)

Тож ми щасливі. Компоненти отримують дані від батьківського. Все відсортовано, правда?

Ну, не зовсім. Що відбувається, коли компонент отримує дані від когось іншого, ніж батьківський? Що робити, якщо користувач вводить дані безпосередньо до компонента?

Ну, ось чому ми маємо державу.

ДЕРЖАВ

Реквізити не повинні змінюватися, тому стан посилює. Зазвичай компоненти не мають стану, тому їх називають бездержавними. Компонент, що використовує стан, відомий як stateful. Сміливо киньте цей маленький примружок на вечірках і спостерігайте за тим, як люди віддаляються від вас.

Таким чином, стан використовується для того, щоб компонент міг відслідковувати інформацію між будь-якими рендерами, які він робить. Коли Ви встановитеState, він оновлює об'єкт стану, а потім повторно надає компонент. Це супер круто, тому що це означає, що 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]

стан - це особливе змінне властивість, яке містить дані компонента. воно має значення за замовчуванням, коли Componet монтується.

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

нижче наведено повний приклад поєднання стану та реквізиту: -

<!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), у якого є ім'я як його стан, яке передається дочірньому компоненту (Child child) як опора, і дочірній компонент надає його за допомогою {this.props.name}

У вас є деякі дані, які користувачі вводять десь у програмі.

1. компонент, в який вводяться дані, повинен мати ці дані у своєму стані, оскільки йому потрібно маніпулювати та змінювати їх під час введення даних

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

Так, так, реквізити змінюються, але вони змінюються у "джерела", а потім просто стікають звідти. Тож реквізит незмінний у контексті того, що компонент їх отримує .

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

У React-станах зберігаються дані, а також реквізити. Його відмінність від останнього полягає в тому, що збережені дані можуть змінюватися різними змінами. Це не що інше, як об’єкти, написані на плоскому JavaScript, тому вони можуть містити дані або коди, представляти інформацію, яку потрібно моделювати. Якщо вам потрібні додаткові деталі, рекомендується переглянути ці публікації Використання держави в реагуванні та використання реквізитів в реагуванні

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

Деякі відмінності між "станом" та "реквізитом" у реакції.

Реагує на керування та робить DOM на основі стану. Існує два типи компонентних станів: реквізит - це стан, який передається між компонентами, а стан - це внутрішній стан компонентів. Реквізит використовується для передачі даних від батьківського компонента до дочірнього компонента. Компоненти також мають свій власний стан всередині: стан, який можна змінювати лише всередині компонента.

Зазвичай стан певного компонента може бути реквізитом дочірнього компонента, реквізит передаватиметься дітям, що зазначено всередині методу візуалізації батьківського компонента

Реквізити

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

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

Держава

• використання стану всередині класового компонента

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

• Якщо ви візуалізуєте сторінку, ви зателефонуєте setState, щоб оновити DOM (оновити значення сторінки)

Держава відіграє важливу роль у реагуванні

У відповідь на початкове запитання про те, що реквізит є незмінним, вони кажуть, що вони непорушні , що стосується дочірнього компонента, але можуть змінюватися у батьків.

Реактивні компоненти використовують стан для ЧИТАННЯ / ЗАПИСУВАННЯ внутрішніх змінних, які можна змінити / мутувати, наприклад:

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

Реактивні реквізити - це спеціальний об’єкт, який дозволяє програмісту отримувати змінні та методи з батьківського компонента в дочірній компонент.

Це щось на кшталт вікон та дверей будинку. Реквізити також незмінні дочірніх компонентів не можуть їх змінити / оновити.

Існує кілька методів, які допомагають слухати, коли реквізит змінюється батьківським компонентом.

Це моя сьогоднішня точка зору щодо пояснення між станом та реквізитом

1. Стан - це як ваша локальна змінна всередині вашого компонента. Ви можете маніпулювати значенням стану, використовуючи встановлений стан. Потім ви можете передати значення стану, наприклад, своєму дочірньому компоненту.

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

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

Штат - це ваші дані, змінюється, ви можете робити все, що вам потрібно, реквізит - це лише читання даних, як правило, коли ви передаєте реквізит, ви вже працювали з вашими даними, і вам потрібен дочірній компонент для його відображення, або якщо ваш реквізит є функція u викликати її для виконання завдання

Держава - це джерело істини, де живуть ваші дані. Можна сказати, що стан проявляється через реквізит.

Надання реквізиту компонентам - це те, що підтримує ваш інтерфейс користувача синхронізований з вашими даними. Компонент насправді є лише функцією, яка повертає розмітку.

Враховуючи однакові реквізити (дані для відображення), вони завжди вироблятимуть однакову розмітку .

Тож реквізит - це як трубопроводи, які передають дані від походження до функціональних компонентів.

Реквізит: представляє дані "лише для читання", які є незмінними і відносяться до атрибутів батьківського компонента.

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

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