Oglądałem kurs Pluralsight na React i instruktor stwierdził, że rekwizytów nie należy zmieniać. Teraz czytam artykuł (uberVU / reaguj-przewodnik) na temat rekwizytów vs. stan i mówi

Zarówno rekwizyty, jak i zmiany stanu wyzwalają aktualizację renderowania.

W dalszej części artykułu jest napisane:

Rekwizyty (skrót od właściwości) to konfiguracja komponentu, w razie potrzeby jego opcje. Są otrzymywane z góry i niezmienne.

• Więc rekwizyty mogą się zmieniać, ale powinny być niezmienne?
• Kiedy należy używać rekwizytów, a kiedy stanu?
• Jeśli masz dane potrzebne komponentowi React, czy należy je przekazywać przez rekwizyty lub konfigurować w komponencie React przez getInitialState?

Rekwizyty i stan są powiązane. Stan jednego komponentu często staje się rekwizytem komponentu potomnego. Rekwizyty są przekazywane do elementu podrzędnego w metodzie renderowania elementu nadrzędnego jako drugi argument React.createElement()lub, jeśli używasz JSX, bardziej znane atrybuty znacznika.

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

Wartość stanu rodzica childsNamestaje się wartością dziecka this.props.name. Z perspektywy dziecka nazwa rekwizytu jest niezmienna. Jeśli trzeba to zmienić, rodzic powinien po prostu zmienić swój stan wewnętrzny:

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

a React przekaże je dziecku. Kolejne naturalne pytanie brzmi: co zrobić, jeśli dziecko musi zmienić nazwę rekwizytu? Zwykle odbywa się to poprzez zdarzenia potomne i wywołania zwrotne rodziców. Dziecko może narazić zdarzenie o nazwie na przykład onNameChanged. Następnie rodzic subskrybuje zdarzenie, przekazując moduł obsługi wywołania zwrotnego.

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

Dziecko przekaże swoją nową nazwę jako argument do wywołania zwrotnego zdarzenia, wywołując np. this.props.onNameChanged('New name'), A rodzic użyje nazwy w procedurze obsługi zdarzeń, aby zaktualizować swój stan.

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

W celu komunikacji rodzic-dziecko wystarczy przekazać rekwizyty.

Użyj stanu do przechowywania danych, których potrzebuje Twoja bieżąca strona w widoku kontrolera.

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

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

Rekwizyty

• są niezmienne
  • co pozwala Reactowi na szybkie sprawdzanie referencji
• są używane do przekazywania danych z kontrolera widoku
  • komponent najwyższego poziomu
• mieć lepszą wydajność
  • użyj tego do przekazania danych do komponentów potomnych

Stan

• należy zarządzać w kontrolerze widoku
  • komponent najwyższego poziomu
• jest zmienny
• ma gorszą wydajność
• nie powinny być dostępne z komponentów potomnych
  • zamiast tego przekaż je rekwizytami

Do komunikacji między dwoma komponentami, które nie mają relacji rodzic-dziecko, możesz skonfigurować własny globalny system zdarzeń. Subskrybuj zdarzenia w module componentDidMount (), anuluj subskrypcję w module componentWillUnmount () i wywołaj setState () po odebraniu zdarzenia. Wzór strumienia jest jednym z możliwych sposobów na ustawienie tego. - https://facebook.github.io/react/tips/communicate-between-components.html

Jakie składniki powinny mieć stan?

Większość twoich komponentów powinna po prostu pobrać dane z rekwizytów i je renderować. Czasami jednak musisz odpowiedzieć na dane wprowadzone przez użytkownika, żądanie serwera lub upływ czasu. Do tego używasz stanu.

Staraj się, aby jak najwięcej elementów było bezstanowych . W ten sposób izolujesz stan do jego najbardziej logicznego miejsca i zminimalizujesz nadmiarowość, ułatwiając rozumowanie swojej aplikacji.

Częstym wzorcem jest tworzenie kilku bezpaństwowych komponentów, które po prostu renderują dane, i mają nad nimi komponent stanowy w hierarchii, która przekazuje swój stan swoim potomkom za pomocą rekwizytów. Składnik stanowy zawiera całą logikę interakcji, podczas gdy składniki bezstanowe zajmują się renderowaniem danych w sposób deklaratywny. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state

Co należy przejść w stan?

Stan powinien zawierać dane, które moduły obsługi zdarzeń komponentu mogą zmienić w celu uruchomienia aktualizacji interfejsu użytkownika. W prawdziwych aplikacjach dane te są zwykle bardzo małe i można je serializować w formacie JSON. Budując komponent stanowy, pomyśl o minimalnej możliwej reprezentacji jego stanu i przechowuj tylko te właściwości w tym stanie. Wewnątrz render () po prostu oblicz wszelkie inne potrzebne informacje na podstawie tego stanu. Przekonasz się, że takie myślenie i pisanie aplikacji prowadzi do najbardziej poprawnej aplikacji, ponieważ dodanie nadmiarowych lub obliczonych wartości do stanu oznacza, że ​​musisz jawnie je zsynchronizować, zamiast polegać na React, obliczając je dla Ciebie. - https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-should-go-in-state

Możesz to najlepiej zrozumieć, odnosząc to do funkcji Plain JS.

Po prostu,

Stan to lokalny stan komponentu, do którego nie można uzyskać dostępu ani modyfikować poza komponentem. Jest to równoważne zmiennym lokalnym w funkcji.

Zwykła funkcja JS

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

React Component

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

RekwizytyZ drugiej strony sprawiają, że komponenty nadają się do ponownego użycia, umożliwiając komponentom odbieranie danych z ich komponentów macierzystych w postaci rekwizytów. Są równoważne parametrom funkcji.

Zwykła funkcja JS

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

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

React Component

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

}

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

Kredyty: Manoj Singh Negi

Artykuł Link: wyjaśniono stan reakcji a rekwizyty

Podsumowanie rekwizytów i stanów, które lubię najbardziej, jest tutaj: reaguj-przewodnik Wielka wskazówka dla tych facetów. Poniżej znajduje się edytowana wersja tej strony:

rekwizyty vs stan

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

rekwizyty

Rekwizyty (skrót od właściwości) to konfiguracja komponentu. Są one odbierane z góry i niezmienne, o ile dotyczy ich Komponent. Komponent nie może zmieniać swoich rekwizytów, ale jest odpowiedzialny za składanie rekwizytów swoich komponentów potomnych. Rekwizyty nie muszą być tylko danymi - funkcje zwrotne mogą być przekazywane jako rekwizyty.

stan

Stan to struktura danych, która zaczyna się od wartości domyślnej po zamontowaniu komponentu. Może być mutowany w czasie, głównie w wyniku zdarzeń użytkownika.

Komponent zarządza wewnętrznie własnym stanem. Poza ustaleniem stanu początkowego, nie ma żadnego interesu w manipulowaniu stanem swoich dzieci. Możesz konceptualizować stan jako prywatny dla tego komponentu.

Zmiana rekwizytów i stanu

                                                   stan rekwizytów
    Czy można uzyskać wartość początkową od komponentu nadrzędnego? tak tak
    Może być zmieniony przez komponent nadrzędny? tak nie
    Czy można ustawić wartości domyślne w Component? * Tak Tak
    Czy można zmienić wewnątrz komponentu? Nie tak
    Czy można ustawić wartość początkową dla komponentów podrzędnych? tak tak
    Czy można zmienić komponenty potomne? tak nie

• Zauważ, że zarówno rekwizyty, jak i wartości początkowe stanu otrzymane od rodziców zastępują wartości domyślne zdefiniowane w komponencie.

Czy ten składnik powinien mieć stan?

Stan jest opcjonalny. Ponieważ stan zwiększa złożoność i zmniejsza przewidywalność, preferowany jest Komponent bez stanu. Mimo że wyraźnie nie da się obejść bez stanu w interaktywnej aplikacji, należy unikać zbyt wielu składników Stateful.

Typy komponentów

Stateless Component Tylko rekwizyty, bez stanu. Poza funkcją render () niewiele się dzieje. Ich logika obraca się wokół otrzymywanych rekwizytów. Dzięki temu są bardzo łatwe do śledzenia i testowania.

Składnik stanowy Zarówno rekwizyty, jak i stan. Są one używane, gdy komponent musi zachować pewien stan. Jest to dobre miejsce do komunikacji klient-serwer (XHR, gniazda sieciowe itp.), Przetwarzania danych i reagowania na zdarzenia użytkownika. Tego rodzaju logistyka powinna być zamknięta w umiarkowanej liczbie komponentów Stateful, podczas gdy cała logika wizualizacji i formatowania powinna przejść w dół do wielu komponentów bezstanowych.

źródła

• Pytanie o „rekwizyty” i „stan” - Grupy dyskusyjne Google
• Myślenie w reakcji: określ, gdzie powinien żyć twój stan

rekwizyty (skrót od „właściwości”) i stan są prostymi obiektami JavaScript. Chociaż oba przechowują informacje, które wpływają na wynik renderowania, różnią się one w jeden ważny sposób: rekwizyty są przekazywane do komponentu (podobnie do parametrów funkcji), podczas gdy stan jest zarządzany w komponencie (podobnie do zmiennych zadeklarowanych w funkcji).

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

Również w React mamy bezpaństwowe elementy, które mają tylko rekwizyty, a nie stan wewnętrzny ...

Poniższy przykład pokazuje, jak działają w Twojej aplikacji:

Nadrzędny (komponent z pełnym stanem):

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 bezstanowy):

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

Kluczową różnicą między rekwizytami a stanem jest to, że stan jest wewnętrzny i kontrolowany przez sam komponent, podczas gdy rekwizyty są zewnętrzne i kontrolowane przez cokolwiek renderuje komponent.

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

• Stan można zmienić (Mutable)
• Podczas gdy rekwizyty nie mogą (niezmienne)

Zasadniczo różnica polega na tym, że stan jest czymś w rodzaju atrybutów w OOP : jest czymś lokalnym dla klasy (komponentu), służącym do lepszego opisu. Rekwizyty są jak parametry - są przekazywane do komponentu z wywołującego komponentu (rodzica): tak jakbyś wywołał funkcję z pewnymi parametrami.

Zarówno stan, jak i rekwizyty w reakcji są używane do sterowania danymi w komponencie, generalnie rekwizyty są ustawiane przez element nadrzędny i przekazywane do komponentów podrzędnych i są ustalane w całym komponencie. W przypadku danych, które mają ulec zmianie, musimy użyć stanu. I rekwizyty są niezmienne, podczas gdy stany są zmienne , jeśli chcesz zmienić rekwizyty, możesz to zrobić z komponentu nadrzędnego, a następnie przekazać go do komponentów potomnych.

jak nauczyłem się podczas pracy z reagować.

• rekwizyty są używane przez komponent do pobierania danych ze środowiska zewnętrznego tj. inny komponent (czysty, funkcjonalny lub klasa) lub klasa ogólna lub kod javascript / maszynopis

• stany służą do zarządzania środowiskiem wewnętrznym komponentu oznacza zmiany danych wewnątrz komponentu

Rekwizyty: Rekwizyty to tylko własność komponentu, a reagowanie komponent jest niczym innym jak funkcją javascript.

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

const element =;

tutaj <Welcome name="Sara" /> przekazując obiekt {name: 'Sara'} jako rekwizyty komponentu Welcome. Do przekazywania danych z jednego komponentu nadrzędnego do komponentu podrzędnego używamy rekwizytów. Rekwizyty są niezmienne. Podczas cyklu życia elementu rekwizyty nie powinny się zmieniać (uważaj je za niezmienne).

Stan: stan jest dostępny tylko w komponencie. Do śledzenia danych w komponencie używamy stanu. możemy zmienić stan przez setState. Jeśli potrzebujemy 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>);
  }
}

Stan:

1. stany są zmienne.
2. stany związane z poszczególnymi komponentami nie mogą być używane przez inne komponenty.
3. stany są inicjowane podczas montowania komponentów.
4. stany są używane do renderowania dynamicznych zmian w komponencie.

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. Aby przejść od dziecka do rodzica, potrzebujesz 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>
      );
     }
}

Zasadniczo rekwizyty i stan to dwa sposoby, w jakie 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 twojej aplikacji niż z działaniem React. Najprostszym sposobem na podjęcie decyzji, IMO, jest zastanowienie się, czy ten konkretny fragment danych jest przydatny do zastosowania jako całość, czy też jest to informacja lokalna. Ważne jest również, aby nie powielać stanu, więc jeśli jakiś kawałek danych można obliczyć na podstawie rekwizytów - powinien on zostać obliczony na podstawie rekwizytów.

Na przykład, powiedzmy, że masz kontrolę rozwijaną (która otacza standardowy HTML wybierz do niestandardowego stylu), która może a) wybrać pewną wartość z listy, i b) otworzyć lub zamknąć (tj. Wyświetlić lub ukryć listę opcji). Załóżmy teraz, że twoja aplikacja wyświetla listę elementów, a lista kontrolna listy kontrolnej filtruje wpisy listy. Wtedy najlepiej byłoby przekazać wartość aktywnego filtra jako rekwizyt i zachować lokalny stan otwarty / zamknięty. Ponadto, aby działał, należy przekazać moduł obsługi onChange z komponentu nadrzędnego, który zostanie nazwany wewnątrz elementu rozwijanego i natychmiast wyśle ​​zaktualizowane informacje (nowy wybrany filtr) do sklepu. Z drugiej strony, stan otwarty / zamknięty może być utrzymany w rozwijanym składniku, ponieważ reszta aplikacji tak naprawdę nie dba o to, czy kontrola jest otwarta, dopóki użytkownik nie zmieni jej wartości.

Poniższy kod nie działa całkowicie, wymaga css i obsługi rozwijanych zdarzeń kliknięcia / rozmycia / zmiany, ale chciałem zachować przykład na minimalnym poziomie. Mam nadzieję, że pomaga 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 to sposób reagowania na transakcje z informacjami posiadanymi przez twój komponent.

Załóżmy, że masz komponent, który musi pobrać niektóre dane z serwera. Zwykle chcesz poinformować użytkownika, czy żądanie jest przetwarzane, czy nie powiodło się itp. Jest to informacja, która jest istotna tylko dla tego konkretnego komponentu. W tym momencie stan wchodzi do gry.

Zwykle najlepszym sposobem zdefiniowania stanu jest:

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

ale w najnowszych implementacjach React Native możesz po prostu:

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

Te dwa przykłady działają dokładnie tak samo, jest to tylko poprawa 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, z czasem będą się zmieniać, a widok będzie musiał zostać zaktualizowany, aby odzwierciedlić te zmiany. Stan oferuje tę funkcjonalność w prosty sposób.

Państwo NALEŻY BYĆ NIEZBĘDNE! i nie mogę się na to wystarczająco skoncentrować. Co to znaczy? Oznacza to, że NIGDY nie powinieneś robić czegoś takiego.

 state.key2 = newValue;

Właściwy sposób to zrobić:

this.setState({ key2: newValue });

Korzystając z this.setState, twój komponent przechodzi przez cykl aktualizacji, a jeśli jakakolwiek część stanu ulegnie zmianie, twoja metoda renderowania komponentu zostanie ponownie wywołana w celu odzwierciedlenia tych zmian.

Sprawdź dokumenty reakcji, aby uzyskać jeszcze bardziej rozbudowane wyjaśnienie: https://facebook.github.io/react/docs/state-and-lifecycle.html

Rekwizyty są po prostu skrótem dla właściwości. Rekwizyty to sposób, w jaki komponenty rozmawiają ze sobą. Jeśli w ogóle znasz React, powinieneś wiedzieć, że rekwizyty płyną w dół od elementu nadrzędnego.

Jest też przypadek, że możesz mieć domyślne rekwizyty, dzięki czemu rekwizyty są ustawione, nawet jeśli komponent nadrzędny nie przekazuje rekwizytów.

Dlatego ludzie określają React jako przepływ danych w jednym kierunku. To wymaga trochę zastanowienia i prawdopodobnie będę pisać o tym później, ale na razie pamiętaj: dane przepływają od rodzica do dziecka. Rekwizyty są niezmienne (fantazyjne słowo na to się nie zmienia)

Więc jesteśmy szczęśliwi. Komponenty odbierają dane od rodzica. Wszystko posortowane, prawda?

Cóż, niezupełnie. Co się stanie, gdy składnik odbierze dane od osoby innej niż rodzic? Co się stanie, jeśli użytkownik wprowadzi dane bezpośrednio do komponentu?

Właśnie dlatego mamy państwo.

STAN

Rekwizyty nie powinny się zmieniać, więc stan przyspiesza. Zwykle komponenty nie mają stanu i dlatego są nazywane bezpaństwowcami. Składnik używający stanu jest znany jako stanowy. Zapraszam do rzucania tego małego smakołyka na imprezy i obserwowania, jak ludzie oddalają się od ciebie.

Zatem stan jest używany, aby komponent mógł śledzić informacje pomiędzy dowolnymi renderami, które robi. Po ustawieniu setState aktualizuje obiekt stanu, a następnie ponownie renderuje komponent. Jest to super fajne, ponieważ oznacza to, że React zajmuje się ciężką pracą i jest niesamowicie szybki.

Jako mały przykład stanu, oto fragment kodu z paska wyszukiwania (warto sprawdzić ten kurs, jeśli chcesz dowiedzieć się więcej o 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);
 }
}

PODSUMOWANIE

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

Rekwizyty służą do przekazywania danych od rodzica do dziecka lub samego komponentu. Są niezmienne i dlatego nie zostaną zmienione.

Stan jest używany dla danych zmiennych lub danych, które się zmienią. Jest to szczególnie przydatne do wprowadzania danych przez użytkownika. Pomyśl na przykład paski wyszukiwania. Użytkownik wpisze dane, a to zaktualizuje to, co zobaczy.

W skrócie.

wartości rekwizytów nie można zmienić [niezmienne]

wartości stanów można zmienić za pomocą metody setState [mutable]

state - Jest to specjalna zmienna właściwość przechowująca dane Component. ma wartość domyślną podczas montowania Componet.

rekwizyty - jest to specjalna właściwość, która jest niezmienna z natury i używana w przypadku przekazywania wartości z rodzica na dziecko. rekwizyty są tylko kanałem komunikacji między komponentami, zawsze przechodząc od góry (rodzic) do buttom (dziecko).

poniżej znajduje się pełny przykład łą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>

Ogólnie stanem jednego komponentu (rodzica) jest prop dla komponentu potomnego.

1. Stan znajduje się w komponencie, w którym rekwizyty są przekazywane z rodzica na 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ę nadrzędną (Parent), która ma nazwę jako swój stan, która jest przekazywana do komponentu potomnego (klasa Child) jako rekwizyt, a komponent potomny renderuje go za pomocą {this.props.name}

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

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

2. gdziekolwiek indziej w aplikacji dane powinny być przekazywane jako rekwizyty do wszystkich innych komponentów

Tak, więc rekwizyty się zmieniają, ale są zmieniane u „źródła”, a następnie po prostu spływają stamtąd. Więc rekwizyty są niezmienne w kontekście komponentu, który je otrzymuje .

Np. Ekran danych referencyjnych, na którym użytkownicy edytują listę dostawców, zarządzałby tym stanem, co spowodowałoby następnie zapisanie zaktualizowanych danych w ReferenceDataState, które mogłoby znajdować się o jeden poziom poniżej AppState, a następnie ta lista dostawców byłaby przekazywana jako rekwizyty do wszystkich komponentów, które musiały z niego korzystać.

W React stany przechowują dane oraz rekwizyty. Różnica polega na tym, że przechowywane dane można modyfikować za pomocą różnych zmian. Nie są to nic więcej niż obiekty napisane płaskim skryptem JavaScript, więc mogą zawierać dane lub kody, reprezentujące informacje, które chcesz modelować. Jeśli potrzebujesz więcej informacji, zaleca się, aby zobaczyć te publikacje Wykorzystanie stanu w React i Wykorzystanie rekwizytów w React

• rekwizyty --- nie można zmienić jego wartości.
• stwierdza --- możesz zmienić jego wartość w kodzie, ale byłby aktywny, gdy nastąpi renderowanie.

Reagują pewne różnice między „stanem” a „rekwizytami”.

Reaguje kontrolami i renderuje DOM na podstawie stanu. Istnieją dwa typy stanów składników: rekwizyty to stan, który przenosi się między składnikami, a stan to wewnętrzny stan składników. Rekwizyty służą do przesyłania danych z komponentu nadrzędnego do komponentu podrzędnego. Komponenty mają również swój własny stan wewnątrz: stan, który można modyfikować tylko wewnątrz komponentu.

Zasadniczo stanem określonego komponentu mogą być rekwizyty komponentu potomnego, rekwizyty zostaną przekazane do potomków, co jest określone w metodzie renderowania komponentu macierzystego

Rekwizyty

• rekwizyty służą do przekazywania danych w komponencie potomnym

• rekwizyty zmieniają wartość poza komponentem (komponent potomny)

Stan

• użycie stanu wewnątrz komponentu klasy

• stan zmień wartość wewnątrz komponentu

• Jeśli renderujesz stronę, wywołujesz setState w celu aktualizacji DOM (aktualizacja wartości strony)

Państwo ma ważną rolę do odegrania

W odpowiedzi na początkowe pytanie o rekwizyty są niezmienne, mówi się, że są one niezmienne w odniesieniu do elementu potomnego, ale można je zmieniać u rodzica.

React Komponenty używają stanu do CZYTANIA / PISANIA zmiennych wewnętrznych, które można zmieniać / mutować na przykład:

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

React props to specjalny obiekt, który pozwala programiście uzyskać zmienne i metody z komponentu nadrzędnego do komponentu podrzędnego.

To coś w rodzaju okien i drzwi domu. Rekwizyty są również niezmiennymi komponentami podrzędnymi, które nie mogą ich zmieniać / aktualizować.

Istnieje kilka metod, które pomagają słuchać, gdy rekwizyty są zmieniane przez element nadrzędny.

To jest mój obecny punkt widzenia na wyjaśnienie stanu i rekwizytów

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

2. Rekwizyty to wartość, która dokładnie znajduje się w twoim sklepie redux, tak naprawdę pochodzi ze stanu, który pochodzi z reduktora. Twój komponent powinien być podłączony do redux, aby uzyskać wartość z rekwizytów. Możesz także przekazać wartość rekwizytów do elementu potomnego

Proste wyjaśnienie: STAN to lokalny stan składnika, na przykład kolor = „niebieski” lub animacja = prawda itp. Użyj this.setState, aby zmienić stan składnika. PROPS to sposób, w jaki komponenty komunikują się ze sobą (wysyłają dane od rodzica do dziecka) i umożliwiają ponowne użycie komponentów.

Stan to twoje dane, można je modyfikować, możesz zrobić z nim wszystko, co potrzebujesz, rekwizyty to dane tylko do odczytu, zwykle po przekazaniu rekwizytów masz już pracę z danymi i potrzebujesz elementu potomnego do ich renderowania lub jeśli twoje rekwizyty to funkcję wywołujesz, aby wykonać zadanie

Państwo jest źródłem prawdy, w której żyją twoje dane. Można powiedzieć, że stan manifestuje się za pomocą rekwizytów.

Udostępnianie rekwizytów komponentom zapewnia synchronizację interfejsu użytkownika z danymi. Komponent jest tak naprawdę funkcją zwracającą znaczniki.

Biorąc pod uwagę te same rekwizyty (dane do wyświetlenia), zawsze będzie generować ten sam znacznik .

Zatem rekwizyty są jak rurociągi, które przenoszą dane od źródła do funkcjonalnych komponentów.

Rekwizyty: reprezentują dane „tylko do odczytu”, które są niezmienne i odnoszą się do atrybutów komponentu nadrzędnego.

Stan: reprezentuje zmienne dane, które ostatecznie wpływają na to, co jest renderowane na stronie i zarządzane wewnętrznie przez sam komponent, i zmieniają się z czasem w wyniku wprowadzenia danych przez użytkownika.

Główną różnicą jest to, że stan jest prywatny dla komponentu i można go zmienić tylko w tym komponencie, podczas gdy rekwizyty są tylko wartością statyczną i kluczem do komponentu potomnego, który jest przekazywany przez komponent nadrzędny i nie można go zmienić w komponencie potomnym