El mejor tutorial de Reaccionar Componente API en 2024. En este tutorial podrás aprender Configurar estado: setstate,Reemplazar Estado: replaceState,Configuración de propiedades: SetProps,Reemplazar atributo: replaceProps,Actualización: forceUpdate,Obtener DOM nodo: findDOMNode,El análisis de los componentes del estado monta: está montada,
En esta sección vamos a discutir Reaccionar API de los componentes. Vamos a explicar los siete métodos siguientes:
setState(object nextState[, function callback])
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.
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.
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') );
Ejemplos haciendo clic en las etiquetas H2 para hacer un contador de visitas se incrementa.
replaceState(object nextState[, function callback])
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.
setProps(object nextProps[, function callback])
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.
replaceProps(object nextProps[, function callback])
replaceProps () método es SetProps similares, pero va a eliminar el original
props
forceUpdate([function callback])
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.
DOMElement findDOMNode()
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.
bool isMounted()
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