使用する利点何

Question

：使用して対

​​

：

document.getElementById('newID').value 

はそれだけで短い構文であるか、他の何かが起こっているが、 ？

Answer 1

利点は、refが良い再利用性と範囲を持って使用しています。 refはこのコンポーネントにのみ存在するため、このrefを操作すると他のコンポーネントに干渉しません。

あなたがidを使用している場合、それは問題が重複しています。このコンポーネントについて考えてみてください。

class Demo extends React.Component { 
    componentDidMount() { 
    document.getElementById('demo').style.color = this.props.color; 
    } 

    render() { 
    return (
     <div id="demo"> 
     content 
     </div> 
    ); 
    } 
} 

class Main exntends React.Component { 
    render() { 
    return (
     <div> 
     <Demo color="red"/> 
     <Demo color="green"/> 
     <Demo color="blue"/> 
     </div> 
    ) 
    } 
} 

スタイルプロパティを変更するために使用id場合は、すべてのテキストの色はblue（最後の宣言）となります。

しかし、もしあなたがrefを使用する場合は、操作は、このコンポーネントで保持を約束することができます。

---

私も同様の問題があり見つける：あなたは再利用性の問題を被らないしかし

What is the difference with using ref and document.findElementById, ect when using ReactJS?

Answer 2

参考文献は、HTMLのIDは同じように動作することができますが。 HTMLでは、要素のIDを設定します。 IDで取得しようとしている要素が完全に一意であるため、コンポーネントを再度使用することはできません。 Refsでは、IDの代わりに参照を指定することができます。この参照を使用すると、参照されている現在の要素を参照できます。 IDを使用すると、ブラウザは一連の修飾されたノードで最初に取得されます。以下の例を見てみましょう：あなたは非常にすぐに障害物になるだろう、この使用してIDを達成しようとした場合

class YourComponent extends React.Component { 
    onBlur() { 
     this.refs.referenceValue.setAttribute('class', ''); 
    } 
    render() { 
     return (
      <div> 
       <input ref="referenceValue" onBlur={this.onBlur.bind(this)}/> 
      </div> 
     ); 
    } 
} 

この方法で、あなたは同じ参照して、複数のコンポーネントを持つことができます！