क्यों रेफ = 'स्ट्रिंग' "विरासत" है?

Question

प्रतिक्रिया प्रलेखन में वे कहते हैं:

प्रतिक्रिया भी किसी भी घटक पर एक रेफरी आधार के रूप में एक स्ट्रिंग (एक कॉलबैक के बजाय) का उपयोग करने का समर्थन करता है, हालांकि इस दृष्टिकोण ज्यादातर इस बिंदु पर विरासत है।

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

निम्न उदाहरण लें:

class Foo extends Component { 
    render() { 
    return <input onClick={() => this.action()} ref={input => this._input = input} />; 
    } 
    action() { 
    console.log(this._input.value); 
    } 
} 

क्यों मैं इस पसंद करते हैं, बजाय चाहिए:

class Foo extends Component { 
    render() { 
    return <input onClick={() => this.action()} ref='input' />; 
    } 
    action() { 
    console.log(this.refs.input.value); 
    } 
} 

?

ऐसा लगता है कि यह दूसरा उदाहरण अधिक आसान और आसान है।
क्या जोखिम हैं कि स्ट्रिंग विधि को बहिष्कृत किया जाएगा?

नायब: मैं दस्तावेज में बयान के "आधिकारिक" उत्तर के लिए देख रहा हूँ, मैं व्यक्तिगत वरीयताओं को और इतने पर के बारे में पूछ नहीं कर रहा हूँ।

Answer 1

शायद अधिक सरल होने पर, पुरानी रेफरी एपीआई कुछ किनारे के मामलों में मुश्किल हो सकती है, जैसे कॉलबैक में उपयोग किया जाता है। सभी प्रकार के स्थैतिक विश्लेषण तारों के साथ एक दर्द भी है। कॉलबैक आधारित एपीआई स्ट्रिंग एपीआई और कुछ को केवल थोड़ी सी अतिरिक्त वर्बोजिटी के साथ कर सकती है।

class Repeat extends React.Component { 
    render() { 
    return <ul> { 
     [...Array(+this.props.times)].map((_, i) => { 
     return <li key={i}> { this.props.template(i) } </li> 
     }) 
    } </ul> 
    } 
} 

class Hello extends React.Component { 
    constructor() { 
    super(); 
    this.refDict = {}; 
    } 

    render() { 
    return <Repeat times="3" template={i => <span ref= {el => this.refDict[i] = el}> Hello {i} </span>} /> 
      {/*         ^^^ Try doing this with the string API   */} 
    } 
} 

आगे चर्चा और स्ट्रिंग आधारित एपीआई को ठीक करने का एक सा अधिक व्यापक सूची issue #1373, जहां कॉलबैक आधारित एपीआई पेश किया गया था से पाया जा सकता है। मैं यहां समस्या विवरण से एक सूची शामिल करूंगा:

रेफरी एपीआई टूटा हुआ कई पहलू हैं।

• आप के रूप में तार बंद संकलक उन्नत मोड संगत होना this.refs को [ 'myname'] का उल्लेख किया है।

• यह एक उदाहरण के एकाधिक मालिकों की धारणा की अनुमति नहीं देता है।

• जादुई गतिशील तार संभावित रूप से वीएम में ऑप्टिमाइज़ेशन तोड़ते हैं।

• इसे हमेशा सुसंगत होना चाहिए, क्योंकि यह समकालिक रूप से हल हो गया है। इसका मतलब है कि प्रतिपादन के एसिंक्रोनस बैचिंग संभावित बग पेश करता है।

• वर्तमान में हमारे पास भाई रिफ्रेंस प्राप्त करने के लिए एक हुक है ताकि आप एक संदर्भ संदर्भ संदर्भ के रूप में अपने भाई को संदर्भित कर सकें। यह केवल एक स्तर का काम करता है। यह एक encapsulation में से एक को लपेटने की क्षमता तोड़ देता है।

• इसे स्थाई रूप से टाइप नहीं किया जा सकता है। आपको इसे टाइपस्क्रिप्ट जैसी भाषाओं में किसी भी प्रयोग में डालना होगा।

• बच्चे द्वारा बुलाए गए कॉलबैक में सही "मालिक" को रेफरी करने का कोई तरीका नहीं है। <Child renderer={index => <div ref="test">{index}</div>} /> - यह रेफरी संलग्न किया जाएगा जहां कॉलबैक जारी किया गया है, वर्तमान मालिक में नहीं।

---

डॉक्स, यह स्पष्ट है कि कॉलबैक आधारित API पसंदीदा तरीका है बनाने के लिए पुराने स्ट्रिंग एपीआई "विरासत" फोन के रूप में this commit में और this PR में चर्चा की है जो कर रहे हैं वे जो वास्तव में दस्तावेजों को उन बयानों को पहले स्थान पर डालते हैं। यह भी ध्यान रखें कि कुछ टिप्पणियों का अर्थ है कि स्ट्रिंग आधारित रेफरी एपीआई किसी बिंदु पर को हटा दिया जा सकता है।

Answer 2

मूलतः https://news.ycombinator.com/edit?id=12093234

1. स्ट्रिंग refs पर danabramov द्वारा पोस्ट की गई composable नहीं हैं। एक रैपिंग घटक किसी बच्चे को रेफरी पर "स्नूप" नहीं कर सकता है यदि उसके पास पहले से मौजूद स्ट्रिंग रेफरी है। दूसरी तरफ, कॉलबैक रेफरी में एक मालिक नहीं है, इसलिए आप उन्हें हमेशा लिख ​​सकते हैं।
2. स्ट्रिंग रेफ फ़्लो जैसे स्थिर विश्लेषण के साथ काम नहीं करते हैं। प्रवाह जादू का अनुमान नहीं लगा सकता है कि फ्रेमवर्क स्ट्रिंग को this.refs पर "प्रकट" करने के साथ-साथ इसके प्रकार (जो अलग हो सकता है) को बनाने के लिए करता है। कॉलबैक रेफरी स्थिर विश्लेषण के लिए मित्रवत हैं।
3. स्ट्रिंग रेफरी के लिए मालिक वर्तमान में निष्पादित घटक द्वारा निर्धारित किया जाता है। इसका मतलब है कि एक सामान्य "रेंडर कॉलबैक" पैटर्न (उदा। <DataTable renderRow={this.renderRow} />) के साथ, गलत घटक रेफरी का मालिक होगा (यह renderRow को परिभाषित करने वाले आपके घटक के बजाय DataTable पर समाप्त होगा)।
4. स्ट्रिंग रेफर्स बल वर्तमान में निष्पादित घटक का ट्रैक रखने के लिए प्रतिक्रिया। यह समस्याग्रस्त है क्योंकि यह react मॉड्यूल को संसाधित करता है, और इस प्रकार अजीब त्रुटियों का कारण बनता है जब react मॉड्यूल बंडल में डुप्लिकेट किया जाता है।