Heim >Web-Frontend >js-Tutorial >Umfassendes Verständnis des Reaktionslebenszyklus (mit Code)

Umfassendes Verständnis des Reaktionslebenszyklus (mit Code)

不言nach vorne: 2019-04-03 10:05:562739Durchsuche

Dieser Artikel vermittelt Ihnen ein umfassendes Verständnis des Reaktionslebenszyklus (mit Code). Freunde in Not können sich darauf beziehen.

Der Lebenszyklus einer React-Komponente ist in drei Teile unterteilt: Instanziierung, Existenz und Zerstörung.

Instanzierungsphase

Beim Rendern auf der Clientseite wird Folgendes nacheinander aufgerufen

getDefaultProps( )
getInitialState()
componentWillMount()
render()
componentDidMount()

Server -seitiges Rendern

getDefaultProps()
getInitialState()
componentWillMount()
render()

Hinweis: ComponentDidMount() wird nicht auf der Serverseite gerendert.

getDefaultProps

Für jede Komponenteninstanz wird diese Methode nur einmal aufgerufen. und die Komponentenklasse In allen nachfolgenden Anwendungen wird getDefaultPops nicht erneut aufgerufen und das zurückgegebene Objekt kann zum Festlegen von Standard-Requisitenwerten verwendet werden.

var Hello = React.creatClass({
    getDefaultProps: function(){
        return {
            name: 'pomy',
            git: 'dwqs'
        }
    },
    
    render: function(){
        return (
            <p>Hello,{this.props.name},git username is {this.props.dwqs}</p>
        )
    }
});

ReactDOM.render(<Hello />, document.body);

Sie können beim Montieren der Komponente auch Requisiten festlegen.

var data = [{title: 'Hello'}];
<Hello data={data} />

Oder rufen Sie setProps auf (im Allgemeinen ist kein Aufruf erforderlich), um seine Requisiten festzulegen

var data = [{title: 'Hello'}];
var Hello = React.render(<Demo />, document.body);
Hello.setProps({data:data});

Aber setProps kann nur für untergeordnete Komponenten oder Komponentenbäume aufgerufen werden. Rufen Sie this.setProps nicht auf und ändern Sie this.props nicht direkt. Behandeln Sie es als schreibgeschützte Daten.

React bietet eine Möglichkeit, Requisiten über propTypes zu überprüfen. propTypes ist ein Konfigurationsobjekt, das zum Definieren von Eigenschaftstypen verwendet wird:

var survey = React.createClass({
    propTypes: {
        survey: React.PropTypes.shape({
            id: React.PropTypes.number.isRequired
        }).isRequired,
        onClick: React.PropTypes.func,
        name: React.PropTypes.string,
        score: React.PropTypes.array
        ...
    },
    
    //...
})

oder

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class BetterImage extends Component{...}

BetterImage.PropTypes={
  src: PropTypes.string,
  center: PropTypes.bool,
  loadingImage: PropTypes.string,
  defaultImage: PropTypes.string,
  onLoad: PropTypes.func,
  onError: PropTypes.func,
  onComplete: PropTypes.func
}
BetterImage.defaultProps={
  ....
}

getInitialState

Für jede Instanz der Komponente wird diese Methode einmal und nur einmal aufgerufen, um den Status jeder Instanz zu initialisieren. Mit dieser Methode können Sie auf die Requisiten der Komponente zugreifen. Jede React-Komponente hat ihren eigenen Status, der sich von Props dadurch unterscheidet, dass der Status nur innerhalb der Komponente existiert, während Props von allen Instanzen gemeinsam genutzt werden.

Es gibt einen Unterschied zwischen den Aufrufen von getInitialState und getDefaultPops. GetDefaultPops wird nur einmal für die Komponentenklasse aufgerufen, und nachfolgende Anwendungen dieser Klasse werden nicht aufgerufen, während getInitialState für jede Komponenteninstanz aufgerufen wird nur einmal einstellen.

var LikeButton = React.createClass({
  //初始化State
  getInitialState: function() {
    return {liked: false};
  },
  
  handleClick: function(event) {
    //设置修改State
    this.setState({liked: !this.state.liked});
  },

  render: function() {
    var text = this.state.liked ? 'like' : 'haven\'t liked';
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

Jedes Mal, wenn der Status geändert wird, wird die Komponente neu gerendert. Nach der Instanziierung wird die Komponente über den Status aktualisiert und die folgenden Methoden werden nacheinander aufgerufen:

1、shouldComponentUpdate
2、componentWillUpdate
3、render
4、componentDidUpdate

componentWillMount

wird vor dem Rendern aufgerufen, sowohl auf dem Client als auch auf dem Server. React hat die offiziell veröffentlichte Version v16.3. In diesem Update werden zusätzlich zu der neuen Kontext-API, die vor einiger Zeit heiß diskutiert wurde, zwei neu eingeführte Lebenszyklusfunktionen getDerivedStateFromProps und getSnapshotBeforeUpdate sowie drei Lebenszyklusfunktionen ComponentWillMount in der zukünftigen Version 17.0 entfernt, ComponentWillReceiveProps und ComponentWillUpdate.

In diesem Lebenszyklus werden Sie auf die folgenden Probleme stoßen:

a. Keine Daten auf dem ersten Bildschirm führen zu einem weißen Bildschirm
In React-Anwendungen vermeiden viele Entwickler den weißen Bildschirm Da beim ersten Rendern der Seite keine asynchronen Daten abgerufen werden, wird der Code für den Datenanforderungsteil in ComponentWillMount platziert, in der Hoffnung, den weißen Bildschirm zu vermeiden und die Sendezeit asynchroner Anforderungen zu verlängern. Tatsächlich hat jedoch nach der Ausführung von „componentWillMount“ das erste Rendern bereits begonnen. Wenn also bei der Ausführung von „componentWillMount“ keine asynchronen Daten abgerufen wurden, befindet sich die Seite beim ersten Rendern immer noch in einem Zustand ohne asynchrone Daten. Mit anderen Worten: Die Komponente befindet sich beim ersten Rendern immer in einem Zustand ohne asynchrone Daten. Daher gibt es keine direkte Lösung für dieses Problem, unabhängig davon, wohin die Datenanforderung gesendet wird. Im Hinblick auf das frühzeitige Senden von Datenanfragen empfehlen die Behörden außerdem, den Datenanfrageteil des Codes im Konstruktor der Komponente statt in „componentWillMount“ zu platzieren.
Wenn es zwei Lösungen gibt, die zur Verbesserung der Benutzererfahrung verwendet wurden:

Methode 1: Komponenten asynchron anfordern, verwenden Sie nprogress, um eine Ladeanimation hinzuzufügen

import React, { Component } from 'react'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import './customNprogress.styl'

NProgress.configure({ showSpinner: false })

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    state = {
      component: null
    }

    async componentDidMount() {
      NProgress.start()
      const { default: component } = await importComponent()
      NProgress.done()

      this.setState({ component })
    }

    render() {
      const C = this.state.component

      return C ? <C {...this.props} /> : null
    }
  }

  return AsyncComponent
}

const AsyncNotFound = asyncComponent(() => import(/* webpackChunkName: "NotFound" */ '@/routes/NotFound'))

Methode 2: Verwenden Sie onreadystatechange Hören Sie sich readyState an und laden Sie eine statische Seite mit nur einem Frame, bevor das Laden der Ressource abgeschlossen ist. Die Seite fordert keine Daten an. Wenn die Datenanforderung abgeschlossen ist, wird die Route auf die echte Homepage umgeschaltet.

  function listen () {
    if (document.readyState == 'complete') { // 资源加载完成
        ReactDom.render(
            <Provider store={store}>
                <Router>
                    <Route path="/" component={Index}/>
                </Router>
            </Provider>,
            document.getElementById('root')
        )
    } else { // 资源加载中
        ReactDom.render(
            <Provider store={store}>
                <Router>
                    <Route path="/" component={FirstScreen}/>
                </Router>
            </Provider>,
            document.getElementById('root')
        )
    }
}

document.onreadystatechange = listen

Weitere Informationen finden Sie unter „Lösung des React First Screen Loading White Screen-Problems“

b. Abonnement von Ereignissen

Ein weiterer häufiger Anwendungsfall ist das Abonnieren von Ereignissen in „componentWillMount“. und in ComponentWillUnmount Kündigen Sie das entsprechende Ereignisabonnement. Tatsächlich kann React jedoch nicht garantieren, dass nach dem Aufruf von „componentWillMount“ auch „componentWillUnmount“ derselben Komponente aufgerufen wird. Ein Beispiel für die aktuelle Version ist, dass beim Rendern auf der Serverseite „componentWillUnmount“ nicht auf der Serverseite aufgerufen wird, sodass das Abonnieren von Ereignissen in „componentWillMount“ direkt zu einem Speicherverlust auf der Serverseite führt. Andererseits ist es wahrscheinlich, dass das Rendern der Komponente durch andere Transaktionen unterbrochen wird, nachdem React in Zukunft den asynchronen Rendering-Modus aktiviert hat, nachdem „componentWillMount“ aufgerufen wurde, was dazu führt, dass „componentWillUnmount“ nicht aufgerufen wird. **Bei „componentDidMount“ tritt dieses Problem nicht auf. Nach dem Aufruf von „componentDidMount“ wird anschließend „componentWillUnmount“ aufgerufen und die in der Komponente vorhandenen Ereignisabonnements werden gemäß dem spezifischen Code gelöscht. **

Rendering

该方法会创建一个虚拟DOM，用来表示组件的输出。对于一个组件来讲，render方法是唯一一个必需的方法。render方法需要满足下面几点：

只能通过 this.props 和 this.state 访问数据（不能修改）
可以返回 null,false(这种场景下，react渲染一个