Latest web development tutorials

Reaccionar Componente API

En esta sección vamos a discutir Reaccionar API de los componentes. Vamos a explicar los siete métodos siguientes:

  • Configurar estado: setstate
  • Reemplazar Estado: replaceState
  • Configuración de las propiedades SetProps
  • Reemplazar propiedad replaceProps
  • Actualización: forceUpdate
  • Obtener DOM nodo: findDOMNode
  • El análisis de los componentes del estado monta: está montada

Configurar estado: setstate

setState(object nextState[, function callback])

Descripción Parámetro

  • nextstate, el nuevo estado de ser fijado, la condición y el estado actual de combinación
  • devolución de llamada, los parámetros opcionales, la función de devolución de llamada. Esta función se proporciona en setstate éxito llama una vez que el conjunto de re-representación.

Combinar nextstate y el estado actual, y volver a la representación de los componentes. setstate son Reaccionar método de control de eventos y solicitar importante función de devolución de actualización de la interfaz activa.

sobre setstate

No se pueden modificar los componentes internos por this.state estado, debido a que el Estado va a sustituir a la llamada setstate () después.

setstate () no cambia this.state inmediatamente, pero pronto crear un tratamiento estado. setstate () no es necesariamente sincronizado con el fin de mejorar el rendimiento reaccionaría lotes estado de ejecución y la representación DOM.

setstate () siempre desencadena un conjunto de volver a dibujar, a menos que una serie de condiciones para lograr shouldComponentUpdate () en la prestación de la lógica.

Ejemplos

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

Trate »

Ejemplos haciendo clic en las etiquetas H2 para hacer un contador de visitas se incrementa.


Reemplazar Estado: replaceState

replaceState(object nextState[, function callback])
  • nextstate, el nuevo estado será establecido, que sustituirá a la situación actual del estado.
  • devolución de llamada, los parámetros opcionales, la función de devolución de llamada. Esta función se proporciona en replaceState éxito llama una vez que el conjunto de re-representación.

replaceState () setstate método () es similar, pero el método sólo se mantiene el estado nextstate, el estado original no se borrará el estado nextstate.


Configuración de propiedades: SetProps

setProps(object nextProps[, function callback])
  • nextProps, se establecerá la nueva propiedad, y el estado actual de los puntales de fusión
  • devolución de llamada, los parámetros opcionales, la función de devolución de llamada. Esta función se proporciona en SetProps que sean convocadas después de que el conjunto de re-representación.

Configuración de las propiedades de los componentes, y el componente re-renderizado.

flujo de datos de los apoyos de los componentes equivalentes, que siempre se transmite de padre a todos los componentes de sub-ensamble. Cuando un JavaScript externa e integración de aplicaciones, que pueden necesitar para pasar los datos al componente o aviso React.render () componentes tienen que volver a hacer, puede utilizar SetProps ().

Actualización React.render componente puedo llamar de nuevo en el nodo () sea () para cambiar las propiedades de los componentes de SetProps, disparador componente re-representación.


Reemplazar atributo: replaceProps

replaceProps(object nextProps[, function callback])
  • nextProps, la nueva propiedad que se determine, esta propiedad sustituirá a los actuales apoyos.
  • devolución de llamada, los parámetros opcionales, la función de devolución de llamada. Esta función se proporciona en replaceProps que sean convocadas después de que el conjunto de re-representación.

replaceProps () método es SetProps similares, pero va a eliminar el original

props

Actualización: forceUpdate

forceUpdate([function callback])

Descripción Parámetro

  • devolución de llamada, los parámetros opcionales, la función de devolución de llamada. Esta función será llamada después de que el componente de render () llamada al método.

forceUpdate () método hace que el componente que llama al método () basta para hacer que volver a hacer el componente de subconjunto, el componente llamará a render su cuenta (). Sin embargo, cuando el conjunto de re-prestados, y todavía se puede leer this.props this.state, si el Estado no cambia, entonces sólo reaccionan actualizado DOM.

forceUpdate () método es adecuado para this.props fuera y volver a dibujar this.state componentes (tales como: cambios this.state después), notificado por el método Reaccionar llamará a render ()

En general, se debe evitar el uso de forceUpdate (), y de sólo lectura y this.props this.state estado provocada por Reaccionar render () llama.


Obtener DOM nodo: findDOMNode

DOMElement findDOMNode()
  • Valor de retorno: DOM elemento DOMElement

Si el componente se ha montado en el DOM, el método devuelve los elementos DOM del navegador local correspondientes. Cuando rendir retorno nulo o falso cuando, this.findDOMNode () devolverá nulo. Leer el valor de DOM, este enfoque es útil, como por ejemplo: Obtiene el valor del campo de formulario y hacer alguna manipulación DOM.


El análisis de los componentes del estado monta: está montada

bool isMounted()
  • Valor de retorno: verdadero o falso, lo que indica si el componente está montado en el DOM

método está montada () se utiliza para determinar si los componentes están montados en el DOM. Puede utilizar este método para asegurarse de que la llamada setstate () y forceUpdate () en el escenario asíncrono no puede ir mal.

En el presente documento por referencia: http: //itbilu.com/javascript/react/EkACBdqKe.html