Użyj state lub refs w Reaccie.js form components?

Zaczynam od Reacta.js i ja chcemy zrobić prosty formularz, ale w dokumentacji znalazłem dwa sposoby na zrobienie tego.

Pierwszy używa Refs : 

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var author = React.findDOMNode(this.refs.author).value.trim();
    var text = React.findDOMNode(this.refs.text).value.trim();
    if (!text || !author) {
      return;
    }
    // TODO: send request to the server
    React.findDOMNode(this.refs.author).value = '';
    React.findDOMNode(this.refs.text).value = '';
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

A drugi używa stanu wewnątrz komponentu Reactowego: 

var TodoTextInput = React.createClass({
  getInitialState: function() {
    return {
      value: this.props.value || ''
    };
  },

  render: function() /*object*/ {
    return (
      <input className={this.props.className}
      id={this.props.id}
      placeholder={this.props.placeholder}
      onBlur={this._save}
      value={this.state.value}
      />
    );
  },

  _save: function() {
    this.props.onSave(this.state.value);
    this.setState({value: ''
  });
});

Nie widzę plusów i minusów tych dwóch alternatyw, jeśli niektóre istnieją. Dzięki.

 99
reactjs
Author: Santanu Sahoo, 2015-04-08
Source

3 answers

Skrócona wersja: unikaj refów.

Są złe dla konserwacji i tracą wiele z prostoty renderowania modelu WYSIWYG.

Masz formularz. Musisz dodać Przycisk, który zresetuje formularz.
  • refs:
    • manipuluj DOM
    • render opisuje jak wyglądał formularz 3 minuty temu
  • Stan
    • setState
    • render opisuje jak wygląda formularz

Masz CCV pole numer na wejściu i kilka innych pól w aplikacji, które są liczbami. Teraz musisz wymusić, że użytkownik wprowadza tylko numery.

  • refs:
    • Dodaj obsługę onChange (czy nie używamy refs, aby tego uniknąć?)
    • manipuluj dom w onChange, jeśli nie jest liczbą
  • Stan
    • masz już OnChange handler
    • Dodaj instrukcję if, jeśli jest nieprawidłowa, nie rób nic
    • render jest wywoływany tylko wtedy, gdy ma produkować inny wynik

EH, nieważne, premier chce, żebyśmy po prostu zrobili red box-shadow, jeśli jest nieprawidłowy.

  • refs:
    • zrobić OnChange handler po prostu zadzwonić forceUpdate czy coś?
    • wykonaj renderowanie na podstawie... co?
    • skąd pobieramy wartość do walidacji w render?
    • ręcznie manipulować właściwością dom klasy elementu?
    • I ' m lost
    • przepisać bez refów?
    • odczytać z dom w render, jeśli jesteśmy zamontowany inaczej założyć poprawne?
  • Stan:
    • Usuń polecenie if
    • spraw, aby render walidował na tej podstawie.stan
Musimy oddać kontrolę rodzicowi. Dane są teraz w rekwizytach i musimy reagować na zmiany.
  • refs:
    • zaimplementuj componentDidMount, componentWillUpdate i componentDidUpdate
    • ręczne różnicowanie poprzednich właściwości
    • manipulować dom z minimalnym zestawem zmiany
      • Hej! wdrażamy react w reaccie...
    • Jest więcej, ale bolą mnie palce.]}
  • Stan:
    • sed -e 's/this.state/this.props/' 's/handleChange/onChange/' -i form.js

    • Ludzie myślą, że refy są "łatwiejsze" niż utrzymywanie go w stanie. To może być prawdą przez pierwsze 20 minut, nie jest to prawdą z mojego doświadczenia po tym. Umieść siebie w pozycji, aby powiedzieć "tak, będę miał to zrobić w 5 minut", a nie "jasne, po prostu przepisać kilka komponentów".

     127
    Author: FakeRainBrigand,
    Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
    2015-04-08 02:05:09

    Widziałem, że kilka osób cytuje powyższą odpowiedź jako powód, aby "nigdy nie używać refów" i chcę wyrazić moją (jak również kilku innych programistów Reacta, z którymi rozmawiałem) opinię.

    Sentencja "nie używaj refów" jest poprawna, gdy mówimy o używaniu ich dla instancji komponentów. Oznacza to, że nie powinieneś używać refs jako sposobu przechwytywania instancji komponentów i wywoływania na nich metod. Jest to niewłaściwy sposób użycia refów i jest wtedy, gdy refy szybko idą na południe.

    Poprawny (i bardzo przydatny) sposób użycia refs jest wtedy, gdy używasz ich, aby uzyskać jakąś wartość z DOM. Na przykład, jeśli masz pole wejściowe dołączające ref do tego wejścia, przechwytywanie wartości później przez ref jest w porządku. Bez tego sposobu, musisz przejść przez dość zorganizowany proces, aby utrzymać swoje pole wejściowe na bieżąco z lokalnym stanem lub magazynem flux - co wydaje się niepotrzebne.

     93
    Author: Tyler McGinnis,
    Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
    2016-02-05 21:36:36

    TL; DR Ogólnie rzecz biorąc, refs jest sprzeczne z deklaratywną filozofią Reacta , więc powinieneś użyć ich jako ostateczności. Użyj state / props, gdy jest to możliwe.

    Aby zrozumieć, gdzie używasz refs vs state / props, przyjrzyjmy się niektórym z zasad projektowania, którymi kieruje się React.

    Per React documentation about refs

    Unikaj używania refów do wszystkiego, co można zrobić deklaratywnie.

    Per React ' s Design Principles o Włazy ewakuacyjne

    Jeśli jakiś wzorzec, który jest przydatny do budowania aplikacji, jest trudny do wyrażenia w deklaratywny sposób, zapewnimy dla niego imperatywne API. (i link do refów tutaj)

    Co oznacza, że zespół Reacta sugeruje unikanie refs i używanie state / props do wszystkiego, co można zrobić w sposób reaktywny / deklaratywny.

    @ Tyler McGinnis dostarczył bardzo dobrą } odpowiedź, stwierdzając również, że

    The poprawny (i bardzo przydatny) sposób użycia refów jest wtedy, gdy używasz ich, aby uzyskać jakąś wartość z DOM...

    Chociaż możesz to zrobić, będziesz działać wbrew filozofii Reacta. Jeśli masz wartość w danych wejściowych, z pewnością pochodzi ona z state / props. Aby Kod był spójny i przewidywalny, należy również trzymać się state / props. Przyznaję, że refs czasami daje szybsze rozwiązanie, więc jeśli zrobisz dowód koncepcji, szybki i brudny jest akceptowalne.

    To pozostawia nam kilkakonkretnych przypadków użycia dla refs

    Zarządzanie fokusem, zaznaczeniem tekstu lub odtwarzaniem multimediów. Wyzwalanie imperatywnych animacji. Integracja z bibliotekami DOM innych firm.

     5
    Author: Lyubomir,
    Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
    2017-05-23 12:02:57