React żywotność podzespołów

W tym rozdziale omówimy cykl życia React komponentów.

Cykl życia komponentu można podzielić na trzy stany:

• Montaż: true DOM została włożona
• Aktualizacja: ponownego świadczonych
• Odmontowuję: true DOM został usunięty

Metoda cyklu życia są następujące:

• componentWillMount przed renderowaniem połączenia, obsługa także po stronie klienta.

• componentDidMount: po pierwsze wywołanie do renderowania tylko klienta.Po składnik został wygenerowany odpowiednią strukturę DOM, można uzyskać za pośrednictwem this.getDOMNode (). Jeśli chcesz korzystać z innych ram JavaScript można wywołać tej metody setTimeout, setInterval lub wysyłania żądań AJAX itp (różne operacje jednostkowe w celu zapobiegania blokowania UI).

• componentWillReceiveProps jest wywoływana, gdy element otrzymuje nowy rekwizyt.Ta metoda nie zostanie wywołana podczas inicjalizacji renderowania.

• shouldComponentUpdate zwraca wartość logiczną.Nazywa gdy składnik otrzymuje nowe rekwizyty lub państwa. To nie nazywa się po inicjalizacji lub użyj forceUpdate.
  Może być stosowany, gdy nie ma potrzeby, aby potwierdzić zaktualizowane składniki.

• componentWillUpdate w składniku otrzymuje nowe rekwizyty lub stanu, ale nie ma tynku jest tzw.To nie będzie wywoływana podczas inicjalizacji.

• Po zakończeniu aktualizacji komponentucomponentDidUpdate wywoływana natychmiast.To nie będzie wywoływana podczas inicjalizacji.

• componentWillUnmount bezpośrednio wywołana, gdy element jest usunięty z DOM.

Szczegółowy opis tych metod można znaleźć w oficjalnej dokumentacji .

Poniższe przykłady składników Witam Po załadowaniu ustawić metodą czasowego componentDidMount Każdy komponent resetowania 100 milisekund przejrzystość i re-rendering:

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },

  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },

  render: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

Spróbuj »

Poniższe przykłady są inicjowanestanu, setNewnumberdla aktualizacjistanu.Wszystko elementem cyklu życiatreści.

var Button = React.createClass({
  getInitialState: function() {
    return {
      data:0
    };
  },
  setNewNumber: function() {
    this.setState({data: this.state.data + 1})
  },
  render: function () {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
    }
})
var Content = React.createClass({
  componentWillMount:function() {
      console.log('Component WILL MOUNT!')
  },
  componentDidMount:function() {
       console.log('Component DID MOUNT!')
  },
  componentWillReceiveProps:function(newProps) {
        console.log('Component WILL RECIEVE PROPS!')
  },
  shouldComponentUpdate:function(newProps, newState) {
        return true;
  },
  componentWillUpdate:function(nextProps, nextState) {
        console.log('Component WILL UPDATE!');
  },
  componentDidUpdate:function(prevProps, prevState) {
        console.log('Component DID UPDATE!')
  },
  componentWillUnmount:function() {
         console.log('Component WILL UNMOUNT!')
  },

    render: function () {
      return (
        <div>
          <h3>{this.props.myNumber}</h3>
        </div>
      );
    }
});
ReactDOM.render(
   <div>
      <Button />
   </div>,
  document.getElementById('example')
);

Spróbuj »