Do komunikacji rodzic-dziecko, po prostu przekaż rekwizyty.

Użyj state, Aby zapisać dane, których potrzebuje Twoja bieżąca strona w widoku kontrolera.

Użyj właściwości , aby przekazać procedury obsługi danych i zdarzeń do komponentów potomnych.

Te listy powinny pomóc ci w pracy z danymi w Twoich komponentach.

Rekwizyty

• są niezmienne
  • który pozwala Reactowi na szybkie sprawdzanie referencji
• są używane do przekazywania dane z widoku-kontroler
  • Twój komponent najwyższego poziomu
• mają lepszą wydajność
  • użyj tego, aby przekazać dane do komponentów potomnych

Stan

• powinny być zarządzane w kontrolerze widoku
  • Twój komponent najwyższego poziomu
• jest zmienna
• ma gorsze osiągi
• nie powinny być dostępne z komponentów potomnych
  • podaj to z rekwizytami zamiast

Do komunikacji pomiędzy dwoma komponentami, które nie mają relacje rodzic-dziecko, możesz skonfigurować własne globalne wydarzenie system. Subscribe to events in componentDidMount (), unsubscribe in componentWillUnmount() i wywołanie setState () po otrzymaniu zdarzenia. Wzór strumienia jest jednym z możliwych sposobów, aby to zorganizować. - https://facebook.github.io/react/tips/communicate-between-components.html

Co? Komponenty Powinny Mieć Stan?

Większość twoich komponentów powinna po prostu pobierać dane z rekwizytów i Renderuj. Jednak czasami trzeba odpowiedzieć na wejście użytkownika, a żądanie serwera lub upływ czasu. Do tego używasz stanu.

Staraj się zachować jak najwięcej swoich komponentów bez statusu. Robiąc to wyizolujesz stan na jego najbardziej logiczne miejsce i zminimalizujesz redundancji, co ułatwia rozumowanie o aplikacji.

Wspólnym wzorcem jest tworzenie kilku bezstanowych elementów, które po prostu renderować Dane i mieć nad nimi w hierarchii Stanowy komponent który przekazuje swój stan swoim dzieciom za pomocą rekwizytów. Stateful komponent zawiera całą logikę interakcji, podczas gdy komponenty bezstanowe dbają o renderowanie danych w sposób deklaratywny. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

Co powinno pójść w stanie?

Stan powinien zawierać dane, które mogą zmienić procedury obsługi zdarzeń komponentu aby uruchomić aktualizację interfejsu użytkownika. W rzeczywistych aplikacjach dane te są bardzo małe i JSON-serializowalny. Budując komponent Stanowy, pomyśl o minimalną możliwą reprezentację jego stanu, a przechowuje tylko te właściwości w tym.stan. Wewnątrz render () po prostu Oblicz inne informacje, których potrzebujesz na podstawie tego stanu. Przekonasz się, że myślenie o i pisanie aplikacji w ten sposób prowadzi najczęściej do prawidłowej aplikacji, ponieważ dodawanie nadmiarowych lub obliczonych wartości do stan oznacza, że musisz je wyraźnie zsynchronizować, a nie polegaj na Reactowym przetwarzaniu ich za Ciebie. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

Podsumowanie rekwizytów vs Stan, które lubię najbardziej jest tutaj: https://github.com/uberVU/react-guide/blob/master/props-vs-state.md Wielka wskazówka dla tych gości. Poniżej znajduje się edytowana wersja tej strony:

Props vs state

Tl; dr jeśli komponent musi zmienić jeden ze swoich atrybutów w pewnym momencie, ten atrybut powinien być częścią jego stanu, w przeciwnym razie powinien być tylko rekwizytem dla tego komponentu.

Rekwizyty

Props (skrót od właściwości) są konfiguracją komponentu. Są one odbierane z góry i niezmienne, jeśli chodzi o komponent, który je otrzymuje. Komponent nie może zmieniać swoich właściwości, ale jest odpowiedzialny za łączenie właściwości swoich komponentów potomnych. Rekwizyty nie muszą być tylko danymi - funkcje zwrotne mogą być przekazywane jako rekwizyty.

Stan

Stan jest strukturą danych, która zaczyna się od wartości domyślnej podczas montowania komponentu. Może być mutowany w czasie, głównie jako wynik zdarzeń użytkownika.

Komponent zarządza własnym stanem wewnętrznie. Poza ustalaniem stanu początkowego, nie ma potrzeby manipulowania stanem swoich dzieci. Możesz określić stan jako prywatny dla tego komponentu.

Zmiana właściwości i stanu

                                                   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

• zauważ, że zarówno właściwości, jak i wartości początkowe stanu otrzymane od rodziców zastępują wartości domyślne zdefiniowane wewnątrz komponentu.

Czy ten komponent powinien mieć stan?

Stan jest opcjonalnie. Ponieważ stan zwiększa złożoność i zmniejsza przewidywalność, preferowany jest komponent bez stanu. Nawet jeśli wyraźnie nie możesz obejść się bez stanu w interaktywnej aplikacji, powinieneś unikać zbyt wielu składowych stanu.

Typy komponentów

Stateless Component Only props, no state. Niewiele się dzieje poza funkcją render (). Ich logika obraca się wokół rekwizytów, które otrzymują. To sprawia, że są one bardzo łatwe do naśladowania, a do test.

Komponent Stateful zarówno props, jak i state. Są one używane, gdy komponent musi zachować pewien stan. Jest to dobre miejsce do komunikacji klient-serwer (XHR, web sockets, itp.), przetwarzanie danych i reagowanie na zdarzenia użytkownika. Tego rodzaju logistyka powinna być zamknięta w umiarkowanej liczbie stanowych komponentów, podczas gdy cała logika wizualizacji i formatowania powinna przejść w dół do wielu bezstanowych Komponenty.

Źródła

• pytanie o ' props 'i' state ' - Google Groups
• myślenie w Reaccie: Określ, gdzie powinien mieszkać twój stan

Większość odpowiedzi jest myląca dla początkujących, a raczej wyjaśniająca. To bardzo trudne do odnosić się i rozumieć. możesz to zrozumieć, odnosząc to do zwykłego JS.

W prostych słowach,

Stan odnosi się do lokalnego stanu komponentu, do którego nie można uzyskać dostępu i modyfikować poza komponentem, a tylko można go używać i modyfikować wewnątrz komponentu.

zwykły JS

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

React JS Odpowiednik

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

Props , z drugiej strony, sprawia, że komponenty mogą być wielokrotnego użytku, dając komponentom możliwość odbierania danych z komponentu macierzystego w formie rekwizytów.

Zwykły JS

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

React JS

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

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

Napisy: https://medium.com/@manojsinghnegi

Artykuł Linke: https://medium.com/@manojsinghnegi/react-state-vs-props-explained-51beebd73b21

Props (skrót od "properties") i state są prostym JavaScript obiektów. Podczas gdy oba zawierają informacje, które wpływają na wyjście z renderowania, różnią się one w jeden ważny sposób: rekwizyty są przekazywane do składowa (zbliżona do parametrów funkcji), natomiast stan jest zarządzane wewnątrz komponentu (podobnie jak zmienne zadeklarowane w funkcja).

Więc po prostu Stan jest ograniczony do bieżącego komponentu, ale rekwizyty można przekazać do dowolnego komponentu... Możesz przekazać Stan bieżącego komponentu jako prop do innych komponentów...

Również w Reaccie mamybezstanowe komponenty , które mają tylko właściwości, a nie stan wewnętrzny...

Poniższy przykład pokazujący, jak działają one w Twojej aplikacji:

Parent (state - full component):

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

Dziecko (komponent bez stanu):

const Clock = ({name}, {date}) => (
    <div>
      <h1>{`Hi ${name}`}.</h1>
      <h2>{`It is ${date}`}.</h2>
    </div>
);

Zasadniczo różnica polega na tym, że Stan jest czymś w rodzaju atrybutów w OOP : jest to coś lokalnego do klasy( komponentu), używanego do lepszego jej opisania. rekwizyty są jak parametry-są przekazywane do komponentu od wywołującego komponent (rodzica) : tak, jakbyś wywołał funkcję o określonych parametrach.

Zarówno state jak i props w reaccie są używane do kontrolowania danych w komponencie, zazwyczaj props jest ustawiany przez rodzica i przekazywany do komponentów potomnych i są one stałe w całym komponencie. Dla danych, które ulegną zmianie, musimy użyć state. I właściwości są niezmienne podczas gdy stany są mutowalne, jeśli chcesz zmienić właściwości, możesz to zrobić z komponentu nadrzędnego, a następnie przekazać je komponentom potomnym.

Props: Props jest niczym innym jak właściwością komponentu, a komponent reactowy niczym innym jak funkcją javascript.

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

Const element =;

Tutaj <Welcome name="Sara" /> przekazanie obiektu {name: 'Sara'} jako rekwizytów komponentu powitalnego. Aby przekazać dane z jednego komponentu nadrzędnego do komponentu podrzędnego, używamy właściwości. Rekwizyty są niezmienne. Podczas cyklu życia komponentu rekwizyty nie powinny się zmieniać (uważać je za niezmienne).

State: stan jest dostępny tylko wewnątrz komponentu. Aby śledzić dane wewnątrz komponentu używamy state. stan możemy zmienić za pomocą setState. Jeśli musimy przekazać stan dziecku, musimy przekazać go jako rekwizyty.

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

Zasadniczo właściwości i stan są dwoma sposobami, na które komponent może wiedzieć, co i jak renderować. Która część stanu aplikacji należy do stanu, a która do jakiegoś sklepu najwyższego poziomu, jest bardziej związana z projektem aplikacji, niż z tym, jak działa React. Najprostszym sposobem na podjęcie decyzji, IMO, jest zastanowienie się, czy ten konkretny fragment danych jest przydatny dla całej aplikacji, czy też jest to jakaś lokalna informacja. Ważne jest również, aby nie powielać stanu, więc jeśli jakiś fragment danych można obliczyć z właściwości - powinno być obliczane z rekwizytów.

Na przykład, załóżmy, że masz jakąś rozwijaną kontrolę (która zawija standardowy HTML select dla niestandardowego stylu), która może a) wybrać jakąś wartość z listy i B) być otwarta lub zamknięta (tj. lista opcji wyświetlana lub ukryta). Załóżmy teraz, że Twoja aplikacja wyświetla listę elementów pewnego rodzaju, a rozwijane kontrolki filtrują wpisy na liście. Następnie najlepiej byłoby przekazać aktywną wartość filtra jako właściwość i zachować stan otwarty/zamknięty lokalny. Również, aby to funkcjonalnie, przekazywałbyś obsługę onChange z komponentu nadrzędnego, który byłby wywoływany wewnątrz elementu rozwijanego i natychmiast wysyłał zaktualizowane informacje (nowy wybrany filtr) do sklepu. Z drugiej strony, stan otwarty/zamknięty może być zachowany wewnątrz komponentu rozwijanego, ponieważ reszta aplikacji nie dba o to, czy kontrolka jest otwarta, dopóki użytkownik nie zmieni jej wartości.

Poniższy kod nie działa do końca, wymaga css i obsługi rozwijanej kliknij/blur / change events, ale chciałem, aby przykład był minimalny. Mam nadzieję, że to pomoże zrozumieć różnicę.

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

Stan jest sposobem, w jaki react radzi sobie z informacjami przechowywanymi przez twój komponent.

Załóżmy, że masz komponent, który musi pobrać niektóre dane z serwera. Zazwyczaj chcesz poinformować użytkownika, czy żądanie jest przetwarzane, czy się nie powiodło, itp. Jest to informacja, która jest po prostu istotna dla tego konkretnego komponentu. To tutaj Państwo wchodzi do gry.

Zazwyczaj najlepszym sposobem na zdefiniowanie stanu jest:

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

Ale w ostatnich implementacje React native można po prostu zrobić:

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

Te dwa przykłady działają dokładnie w ten sam sposób, to tylko ulepszenie składni.

Czym więc różni się od używania atrybutów obiektów jak zawsze w programowaniu OO? Zazwyczaj informacje przechowywane w Twoim stanie nie mają być statyczne, zmienią się z czasem, a Twój widok będzie musiał zaktualizować, aby odzwierciedlić te zmiany. State oferuje tę funkcjonalność w prosty sposób.

Stan ma być INMUTABLE! i nie mogę się nad tym wystarczająco stresować. Co to oznacza? To znaczy, że nigdy nie powinieneś robić czegoś takiego.

 state.key2 = newValue;

Prawidłowy sposób to:

this.setState({ key2: newValue });

Używając tego.setState komponent przechodzi przez cykl aktualizacji i jeśli jakakolwiek część stanu ulegnie zmianie, metoda renderowania komponentu zostanie ponownie wywołana, aby odzwierciedlić te zmiany.

Sprawdź react docs dla jeszcze bardziej rozbudowanych Wyjaśnienie: https://facebook.github.io/react/docs/state-and-lifecycle.html

State - jest to specjalna zmienna właściwość przechowująca dane komponentu. ma domyślną wartość podczas montowania Componet.

Props - jest to specjalna właściwość, która z natury jest niezmienna i używana w przypadku przekazywania wartości z rodzica do dziecka. rekwizyty są tylko kanałem komunikacyjnym pomiędzy komponentami, zawsze przechodzącym od góry (rodzica) do przycisku(dziecka).

Poniżej znajduje się kompletny przykład połączenia stanu i rekwizytów :-

<!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>

Rekwizyty są skrótem od właściwości. Rekwizyty to sposób, w jaki komponenty ze sobą rozmawiają. Jeśli jesteś zaznajomiony z Reactem, powinieneś wiedzieć, że właściwości przepływają w dół od komponentu nadrzędnego.

Istnieje również przypadek, że możesz mieć domyślne właściwości tak, że właściwości są ustawione nawet jeśli komponent nadrzędny nie przekazuje właściwości w dół.

Dlatego ludzie nazywają Reacta jednokierunkowym przepływem danych. To wymaga trochę ogarnięcia głowy i prawdopodobnie będę blogować na to później, ale na razie tylko pamiętaj: dane przepływają od rodzica do dziecka. Props are immutable (fancy word for it not changing)

Stan

Rekwizyty nie powinny się zmieniać, więc stan się podnosi. Zwykle komponenty nie mają stanu i dlatego są określane jako bezpaństwowe. Komponent wykorzystujący stan jest znany jako stateful. Nie krępuj się upuścić tę małą ciekawostkę na imprezach i patrzeć, jak ludzie oddalają się od Ciebie.

Więc stan jest używany tak, że komponent może śledzić informacje pomiędzy dowolnymi renderami, które robi. Po ustawieniu stan aktualizuje obiekt state, a następnie ponownie renderuje komponent. Jest to super fajne, ponieważ oznacza to, że React dba o ciężką pracę i jest niesamowicie szybko.

Jako mały przykład stanu, oto fragment z paska wyszukiwania (warto sprawdzić ten kurs, Jeśli chcesz dowiedzieć się więcej o Reaccie)

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

Podsumowanie

Rekwizyty i stan robią podobne rzeczy, ale są używane na różne sposoby. Większość twoich komponentów prawdopodobnie będzie bezpaństwowa.

Właściwości są używane do przekazywania danych z rodzica do dziecka lub przez sam komponent. Są niezmienne i dlatego nie zostaną zmienione.

Stan jest używany do mutowalnych danych, lub dane, które się zmienią. Jest to szczególnie przydatne przy wprowadzaniu danych przez użytkownika. Pomyśl na przykład o paskach wyszukiwania. Użytkownik wpisuje dane, a to zaktualizuje to, co widzi.

W skrócie.

Wartości właściwości nie mogą być zmieniane [immutable]

Wartości stanu można zmieniać, używając metody setState [mutable]

W odpowiedzi na pierwsze pytanie o właściwości są niezmienne, mówi się, że są niezmienne jeśli chodzi o komponent potomny, ale są zmienne w rodzicu.

Komponenty Reactowe używają state do odczytu / zapisu wewnętrznych zmiennych, które mogą być zmieniane/mutowane na przykład przez:

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

React props jest specjalnym obiektem, który umożliwia programiście pobieranie zmiennych i metod z komponentu nadrzędnego do komponentu podrzędnego.

Istnieje kilka metod, które pomagają słuchać, gdy rekwizyty są zmieniane przez rodzica Komponent.

To jest mój obecny punkt widzenia odnośnie wyjaśnienia między stanem a rekwizytami

1. Stan jest jak zmienna lokalna wewnątrz komponentu. Możesz manipulować wartość state za pomocą set state. Następnie możesz przekazać wartość state na przykład do komponentu dziecka.

2. Rekwizyty to wartość, która dokładnie znajduje się w Twoim sklepie redux, to w rzeczywistości pochodzi ze stanu, który pochodzi z reduktora. Twój komponent powinien być podłączony do redux do uzyskaj wartość z rekwizytów. Można również przejść wartość właściwości dla komponentu potomnego

Ogólnie rzecz biorąc, stan jednego komponentu (rodzica) jest prop dla komponentu potomnego.

1. Stan znajduje się wewnątrz komponentu, gdzie jako właściwości są przekazywane z rodzica do dziecko.

2. Rekwizyty są na ogół niezmienne.

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

W powyższym kodzie mamy klasę rodzica (Parent), która ma nazwę jako swój stan, który jest przekazywany komponentowi potomnemu (klasie potomnej) jako Propp i komponent potomny renderuje go za pomocą {this.props.name

Stan:

1. stany są zmienne.
2. stany są związane z poszczególnymi komponentami, nie mogą być używane przez inne komponenty.
3. stany są inicjalizowane przy montowaniu komponentu.
4. stany są używane do renderowania dynamicznych zmian wewnątrz komponentu.

Rekwizyty:

1. rekwizyty są niezmienne.
2. możesz przekazywać rekwizyty między komponentami.
3. rekwizyty są najczęściej używane do komunikacji między komponentami.Możesz przejść bezpośrednio z rodzica na dziecko. Za przejście z dziecka Na rodzica musisz użyć koncepcji podnoszenia Stanów.

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

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

Masz pewne dane, które są wprowadzane przez użytkowników gdzieś w aplikacji.

1. Komponent, w którym wprowadzane są dane, powinien mieć te dane w swoim stanie , ponieważ musi je manipulować i zmieniać podczas wprowadzania danych

2. Gdziekolwiek indziej w aplikacji dane powinny być przekazywane jako props do wszystkich pozostałych komponentów

Więc tak rekwizyty się zmieniają, ale są zmieniane w "źródle" i będą następnie po prostu spływaj stamtąd. Tak więc właściwości są niezmienne w kontekście otrzymującego je komponentu .

Np. ekran danych referencyjnych, na którym użytkownicy edytują listę dostawców, zarządzałby tym w stanie, który następnie miałby działanie powodujące zapisanie zaktualizowanych danych w ReferenceDataState, który mógłby być o jeden poziom niższy od AppState, a następnie ta lista dostawców byłaby przekazywana jako rekwizyty do wszystkich komponentów, które potrzebowały jej użycia.

Właściwości są wartościami, obiektami lub tablicami przekazywanymi do komponentu podczas renderowania. Właściwości te są często wartościami potrzebnymi w komponencie do tworzenia interfejsu użytkownika, ustawiania pewnych domyślnych funkcji lub do wypełniania pól. Właściwości mogą również występować w postaci funkcji przekazywanych z komponentu nadrzędnego, które mogą być wywoływane przez komponent potomny.

Stan jest zarządzany wewnątrz komponentu (dziecka lub rodzica).

Oto definicja, którą znalazłem na poparcie tego: