Reagire Componente API

In questa sezione si discuterà Reagire componente API. Spiegheremo i seguenti sette metodi:

• Imposta stato: setState
• Sostituire Stato: replaceState
• Impostazione delle proprietà SetProps
• Sostituire replaceProps proprietà
• Aggiornamento: FORCEUPDATE
• Ottenere DOM Node: findDOMNode
• Analizzando i componenti dello stato montato: isMounted

Imposta stato: setState

setState(object nextState[, function callback])

parametro Descrizione

• NextState, il nuovo stato da impostare, lo stato e l'unione stato attuale
• callback, parametri opzionali, la funzione di callback. Questa funzione sarà fornito in setState successo chiamato dopo il montaggio ri-rendering.

Unire NextState e stato attuale, e il componente ri-rendering. setState sono Reagire metodo del gestore dell'evento e chiedere importante funzione di callback aggiornamento dell'interfaccia utente attivato.

A proposito di setState

Non è possibile modificare i componenti interni da this.state Stato, perché lo Stato andrà a sostituire il setState call () dopo.

setState () non cambia this.state subito, ma sarà presto creare un trattamento di stato. setState () non è necessariamente sincronizzato al fine di migliorare le prestazioni avrebbe reagito in lotti stato di esecuzione e il rendering DOM.

setState () innesca sempre un gruppo di ridisegno, a meno che una serie di condizioni per raggiungere shouldComponentUpdate () nel rendering logica.

Esempi

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

Prova »

Esempi cliccando sui Tags H2 per fare un contatore di visite viene incrementato.

Sostituire Stato: replaceState

replaceState(object nextState[, function callback])

• NextState, il nuovo stato sarà allestita, che sostituirà l'attuale stato dello stato.
• callback, parametri opzionali, la funzione di callback. Questa funzione sarà fornito in replaceState successo chiamato dopo il montaggio ri-rendering.

replaceState () metodo setState () è simile, ma il metodo tenuto solo stato NextState, lo stato originale non sarà cancellato lo stato NextState.

Impostazione delle proprietà: SetProps

setProps(object nextProps[, function callback])

• nextProps, la nuova proprietà verrà impostata e lo stato attuale dei puntelli di fusione
• callback, parametri opzionali, la funzione di callback. Questa funzione sarà fornito in SetProps successo chiamato dopo il montaggio ri-rendering.

Impostazione delle proprietà dei componenti, e il componente ri-rendering.

flusso di dati puntelli componenti equivalenti, sarà sempre tramandata da madre a tutti i componenti sub-assemblaggio. Quando un JavaScript esterno e l'integrazione delle applicazioni, potremmo avere bisogno di passare i dati al componente o notare React.render () componenti devono ri-rendere, è possibile utilizzare SetProps ().

Aggiornamento React.render componente posso chiamare di nuovo sul nodo () per essere il metodo () per modificare le proprietà dei componenti di SetProps, grilletto componente ri-rendering.

Sostituire Attributo: replaceProps

replaceProps(object nextProps[, function callback])

• nextProps, la nuova proprietà da impostare, questa struttura sostituirà gli oggetti di scena corrente.
• callback, parametri opzionali, la funzione di callback. Questa funzione sarà fornito in replaceProps successo chiamato dopo il montaggio ri-rendering.

replaceProps () metodo è SetProps simili, ma eliminerà l'originale

props

Aggiornamento: FORCEUPDATE

forceUpdate([function callback])

parametro Descrizione

• callback, parametri opzionali, la funzione di callback. Questa funzione sarà chiamato dopo che il componente render () chiamata al metodo.

FORCEUPDATE () metodo fa sì che il componente che chiama se stesso render () per ri-renderizzare la componente sub-assemblaggio, il componente chiamerà rendere il proprio (). Tuttavia, quando il gruppo ri-rese, e legge ancora this.props this.state, se lo stato non cambia, quindi reagiscono solo aggiornato DOM.

FORCEUPDATE () metodo è adatto per this.props fuori e ridisegnare this.state componenti (come ad esempio: i cambiamenti this.state dopo), notificato dal metodo di React chiamata render ()

In generale, si dovrebbe evitare di utilizzare FORCEUPDATE (), e solo leggere this.props e this.state stato innescato da React render () chiama.

Ottenere DOM Node: findDOMNode

DOMElement findDOMNode()

• Valore di ritorno: DOM elemento DOMElement

Se il componente è stato montato al DOM, il metodo restituisce browser locale elementi DOM corrispondenti. Quando il rendering di ritorno nullo o falsa quando, this.findDOMNode () restituirà null. Leggere dal valore DOM, questo approccio è utile, come ad esempio: Ottiene il valore del campo modulo e fare qualche manipolazione del DOM.

Analizzando i componenti dello stato montato: isMounted

bool isMounted()

• Valore restituito: vero o falso, che indica se il componente è montato al DOM

isMounted () viene utilizzato per determinare se i componenti sono montati al DOM. È possibile utilizzare questo metodo per assicurare che la chiamata setState () e FORCEUPDATE () nello scenario asincrono non si può sbagliare.

Qui come riferimento: http: //itbilu.com/javascript/react/EkACBdqKe.html