Ref und State Unterschied in ReactJS

Question

https://facebook.github.io/react/docs/more-about-refs.html

Hier bekam ich eine Idee über ref in React JS. Aber immer noch nicht klar, warum ref anstelle von State verwendet wird.

Answer 1

Referenzen werden normalerweise verwendet, um auf DOM-Elemente zuzugreifen, um die HTML-Eigenschaften wie Breite, Höhe usw. zu setzen oder zu erhalten. Sie können sie auch verwenden, um den Wert z. B. aus einem Textfeld zu erhalten. Zustände definieren die Eigenschaften einer Komponente, die sich durch verschiedene von Ihnen durchgeführte Aktionen ändern können.

Answer 2

Nur um Ihnen ein Beispiel zu geben. Angenommen, Sie möchten Material Design Lite (MDL) in Ihre React App integrieren. Um MDL korrekt in eine React-Komponente einzubinden, benötigt es direkten Zugriff auf das zugrunde liegende DOM-Element. Dies könnte ein gültiger Anwendungsfall für die Verwendung von refs sein.

import React from 'react'; 

class Button extends React.Component { 

    componentDidMount() { 
    window.componentHandler.upgradeElement(this.node); 
    } 

    componentWillUnmount() { 
    window.componentHandler.downgradeElements(this.node); 
    } 

    render() { 
    return (
     <button 
     ref={node => { this.node = node; }} 
     className="mdl-button mdl-js-button mdl-js-ripple-effect" 
     > 
     {this.props.children} 
     </button> 
    ); 
    } 

} 

export default Button;