ReactJSのRefと状態の違い

Question

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

ここで私はReact JSのリファレンスについて考えています。しかし、なぜ国家の代わりにrefが使われているのかまだ分かりません。

Answer 1

通常、幅、高さなどのhtmlプロパティを設定または取得するために、一般にDOM要素にアクセスするために参照が使用されます。たとえば、テキストフィールドから値を取得するために使用できます。ステートは、実行するさまざまなアクションによって変更されるコンポーネントのプロパティを定義します。

Answer 2

例を挙げてください。 ReactアプリケーションにMaterial Design Lite（MDL）を統合したいとします。 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;