Ref и разница состояний в ReactJS

Question

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

Здесь у меня есть идея относительно ref в React JS. Но все еще неясно, почему ref используется вместо State.

Answer 1

Рефлеры обычно используются для доступа к элементам DOM, как правило, для установки или получения свойств html, таких как ширина, высота и т. Д. Вы также можете использовать его для получения значения, например, из текстового поля. Государства определяют свойства компонента, которые могут изменяться при выполнении различных действий.

Answer 2

Просто, чтобы привести пример. Предположим, вы хотите интегрировать Material Design Lite (MDL) в свое приложение React. Чтобы правильно подключить MDL к компоненту React, он должен иметь прямой доступ к базовому элементу DOM. Это может быть допустимым вариантом использования для использования refs.

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;