React komponent API

W tym rozdziale omówimy React komponent API. Wyjaśnimy siedem następujących metod:

• Set Status: setstate
• Wymień Status: replaceState
• Ustawianie właściwości setProps
• Wymień replaceProps własności
• Aktualizacja: forceUpdate
• Uzyskaj DOM Node: findDOMNode
• Analizując stan komponenty zamontowane: isMounted

Set Status: setstate

setState(object nextState[, function callback])

parametr Opis

• nextState, nowy stan należy ustawić status i aktualny stan seryjnej
• callback, opcjonalne parametry, funkcja oddzwaniania. Funkcja ta zostanie w setstate sukces Wywoływana po montażu ponownego renderingu.

Scalanie nextState i stan obecny i ponownie renderowania komponentu. setstate są React metodę obsługi zdarzenia i poprosić istotną aktualizację UI funkcja zwrotna wyzwolone.

o setstate

Nie można modyfikować elementy wewnętrzne przez this.state państwa, ponieważ państwo zastąpi setState call () po.

setstate () nie natychmiast zmienić this.state, ale wkrótce stworzy traktowania państwa. setstate () nie musi być zsynchronizowane w celu zwiększenia wydajności zareaguje stan wykonania partii i DOM rendering.

setstate () zawsze wywołuje zespół odświeżania, chyba szereg warunków, aby osiągnąć shouldComponentUpdate () w świadczeniu logiki.

Przykłady

var Counter = React.createClass({
  getInitialState: function () {
    return { clickCount: 0 };
  },
  handleClick: function () {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  },
  render: function () {
    return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);
  }
});
ReactDOM.render(
  <Counter />,
  document.getElementById('message')
);

Spróbuj »

Przykłady klikając na znacznikach h2 aby licznik trafień jest zwiększany.

Wymień Status: replaceState

replaceState(object nextState[, function callback])

• nextState, nowe państwo zostanie utworzona, która zastąpi obecny stan państwa.
• callback, opcjonalne parametry, funkcja oddzwaniania. Funkcja ta zostanie w replaceState sukces Wywoływana po montażu ponownego renderingu.

Metoda replaceState () setstate () jest podobna, ale metoda przechowywane tylko stan nextState, oryginalny stan nie jest stan nextState zostaną usunięte.

Ustawianie właściwości: setProps

setProps(object nextProps[, function callback])

• nextProps nowa właściwość zostanie ustawiona, a obecny stan podpór fuzji
• callback, opcjonalne parametry, funkcja oddzwaniania. Funkcja ta zostanie w setProps udanych wywoływana po montażu ponownego renderingu.

Ustawianie właściwości składników i ponownie renderowania komponentu.

Przepływ danych rekwizyty równoważnych elementów, to zawsze być przekazywana z rodzica na wszystkich komponentów podzespołu. Gdy zewnętrzny JavaScript i integracji aplikacji, możemy być zmuszeni do przekazywania danych do komponentu lub zawiadomienia React.render () elementy potrzebne do ponownego renderowania, można użyć setProps ().

Aktualizacja komponentu React.render mogę zadzwonić ponownie w węźle () jest metoda (), aby zmienić właściwości składnika przez setProps, spust ponownego renderowania komponentu.

Wymień Atrybut: replaceProps

replaceProps(object nextProps[, function callback])

• nextProps nowa właściwość należy ustawić, ten zastąpi obecne rekwizyty.
• callback, opcjonalne parametry, funkcja oddzwaniania. Funkcja ta zostanie w replaceProps udanych wywoływana po montażu ponownego renderingu.

replaceProps () Metoda jest podobna setProps, ale będzie to usunąć oryginał

props

Aktualizacja: forceUpdate

forceUpdate([function callback])

parametr Opis

• callback, opcjonalne parametry, funkcja oddzwaniania. Ta funkcja zostanie wywołana po składniku render () wywołanie metody.

forceUpdate () metoda powoduje, że składnik, który nazywa siebie renderowanie () w celu ponownego renderowania komponentu podzespół, składnik wezwie własny render (). Jednak, gdy zespół ponownie wygenerowana i nadal czyta this.props this.state, jeżeli stan nie zmienia się, a następnie reagować jedynie aktualizowany DOM.

forceUpdate () Metoda jest odpowiednia dla zewnętrznych this.props i od nowa this.state komponentów (takich jak: zmiany this.state po), doręczoną metodą React nazywamy render ()

Ogólnie rzecz biorąc, należy unikać forceUpdate (), i tylko do odczytu this.props i this.state stanu wywołanego przez React render () zwraca.

Uzyskaj DOM Node: findDOMNode

DOMElement findDOMNode()

• Wartość zwracana: DOM elementem DOMElement

Jeżeli część została zamontowana na DOM, metoda zwraca odpowiednie lokalne przeglądarki elementów DOM. Podczas renderowania zwróci null lub false, gdy this.findDOMNode () zwróci wartość null. Czytaj od wartości DOM, takie podejście jest użyteczne, takie jak: Pobiera wartość pola formularza i zrobić kilka manipulacji DOM.

Analizując stan komponenty zamontowane: isMounted

bool isMounted()

• Zwraca wartość true lub false, ze wskazaniem, czy składnik jest zamontowana do DOM

isMounted () metoda jest stosowana do określenia, czy elementy są zamontowane na DOM. Można użyć tej metody, aby upewnić się, że setstate () i forceUpdate () wywołanie w asynchronicznym scenariuszu nie można pomylić.

Tu przez odniesienie: http: //itbilu.com/javascript/react/EkACBdqKe.html