प्रतिक्रिया प्रपत्र एक फ्लक्स स्टोर (? सर्वश्रेष्ठ अभ्यास) द्वारा नियंत्रित

Question

तो मैं एक बड़ा घटक है कि मेरे प्रपत्र हो जाएगा:

<form> 
<FirstComponent value={this.state.firstValue}/> 
<SecondComponent value={this.state.secondValue}/> 
{more components here} 
<input type="submit" ... /> 
</form> 

यह फार्म घटक एक दुकान है कि firstAction का उपयोग कर अपने मूल्यों को अद्यतन करता है के लिए सुन रहा है, secondAction , आदि

नोट: घटक) अपने राज्य store.getState (के आधार पर कि {firstValue: something, secondValue: something, etc}

रिटर्न अद्यतन करता है तो मान लीजिए कि मेरी FirstComponent एक इनपुट है करते हैं:

<input type="text" value={this.props.value} 
    onChange={(e)=>this.props.firstAction(e.target.value)} 
</input> 

ठीक है, तो onChange आग प्रोप firstAction जो वास्तव में है कि मेरी दुकान अपडेट हो जाएगा और फार्म के लिए फिर से प्रस्तुत करना बनाने फ्लक्स कार्रवाई है। मेरे पास दो अच्छी चीजें हैं, जब उपयोगकर्ता फॉर्म सबमिट करता है, तो मैं अपने स्टोर में फर्स्ट कॉम्पोनेंट का मान देख सकता हूं और मैं अपने सभी राज्य को मूल घटक से भी नियंत्रित करता हूं।

हालांकि, इस onChange कॉलबैक एक कार्रवाई हर बार उपयोगकर्ता प्रकार एक चरित्र कॉल करेंगे (इसलिए यह उत्पादन कर सकते हैं कॉल का एक बहुत इसलिए फिर से renders) < - इस गंभीर प्रदर्शन के मुद्दों को भड़काने कर सकते हैं?

इसके बजाय, मैं रेफरी का उपयोग कर सकता हूं और जब उपयोगकर्ता सबमिट बटन दबाता है, तो this.refs.myFirstComponent.state प्राप्त करें ... और मेरे पास भी मूल्य होगा (यह Uncontrolled Component होगा?) लेकिन यह समुदाय से अनुशंसा की तरह नहीं लगता है।

तो मेरा सवाल यह है कि, क्या पहला दृष्टिकोण है जिसे मैंने जाने के लिए एक अच्छा तरीका बताया है? मैं इसे कैसे अनुकूलित कर सकता हूं? तो फिर से प्रस्तुत करना चाहिए कि केवल FirstComponent को प्रभावित करना चाहिए दूसरा कॉम्पोनेंट नहीं करता है और फिर पुनः प्रस्तुत करने के लिए? shouldComponentUpdate यहां जाने का एकमात्र तरीका है?

---

संपादित करें 1: http://webdriver.io/api/action/setValue.html

मैं डॉन:

पहले दृष्टिकोण मैं एक समस्या का सामना करना पड़ रहा के साथ ... मैं पाठ फ़ील्ड में मान जोड़ने WebdriverIO का उपयोग कर एक E2E परीक्षण पता नहीं क्यों, लेकिन अगर मैं इनपुट में "परीक्षण" शब्द जोड़ने की कोशिश कर रहा हूं, तो वेबड्राइवर केवल अंतिम अक्षर जोड़ देगा। अगर यह स्थिति राज्य/स्टोर का उपयोग नहीं कर रही है तो यह समस्या चली गई है। हालांकि, अगर मैं अपने FirstComponent को आंतरिक रूप से राज्य है, कुछ की तरह:

<input type="text" value={this.state.value} 
    onChange={(e)=>this.setState({firstValue: e.target.value})} 
    onBlur={()=>this.props.callback(this.state.firstValue)} 
</input> 

इस मामले में, घटक, जबकि (केवल खुद renders) टाइपिंग तेजी से प्रतिक्रिया करने के लिए, जब उपयोगकर्ता ध्यान केंद्रित यह स्टोर की नई जानकारी को हटा रहा है, और उसके बाद । मुझे कहना है, मुझे इस दृष्टिकोण को पसंद नहीं है क्योंकि यह आपके राज्य को लेने के पैटर्न का पालन नहीं करता है (और मुझे लगता है कि मैं राज्य को डुप्लिकेट कर रहा हूं) लेकिन ऐसा लगता है कि यह तेजी से और अधिक महत्वपूर्ण काम करता है: मेरा ई 2 टेस्ट काम करता है। कोई और विचार?

Answer 1

आपका पहला दृष्टिकोण (यानी onChange स्टोर फ्लक्स क्रिया को सक्रिय करता है जो स्टोर को अपडेट करता है और आपके फॉर्म को फिर से प्रस्तुत करता है) जाने का एक अच्छा तरीका लगता है। मैं इसका इस्तेमाल इस तरह कर रहा हूं और मैंने इसे भी इस्तेमाल करने वाले अन्य लोगों को देखा है।

अपने निम्न टिप्पणी के बारे में:

बहरहाल, यह onChange कॉलबैक एक कार्रवाई हर बार उपयोगकर्ता प्रकार एक चरित्र कॉल करेंगे (इसलिए यह उत्पादन कर सकते हैं कॉल का एक बहुत इसलिए फिर से renders) < - कर सकते हैं इस गंभीर प्रदर्शन मुद्दों को उकसाओ?

हाँ, मुझे विश्वास है। मैंने एक बार एक घटक बनाया जिसमें कुछ इनपुट फ़ील्ड के साथ कई अन्य घटक शामिल हैं। जब भी मैंने एक इनपुट फ़ील्ड में एक अक्षर टाइप किया, तो पूरे घटक (अन्य घटकों के साथ इसमें शामिल हैं और इनपुट फ़ील्ड्स) को फिर से प्रस्तुत किया गया, जिससे प्रदर्शन समस्या उत्पन्न हुई। अगर मैंने तेज़ टाइप किया तो यह ध्यान देने योग्य था। आप वास्तव में इसे https://facebook.github.io/react/docs/perf.html का उपयोग करके सत्यापित कर सकते हैं।

वैसे भी, जैसा कि आपने उल्लेख किया है, shouldComponentUpdate() लागू करके समस्या के आसपास मुझे कैसे मिला।

एक छोटा सा टिप मैं उल्लेख करने के लिए एक कस्टम <Input /> घटक है कि <input /> और लागू करने इर्द-गिर्द घूमती पैदा कर रही है चाहते हैं shouldComponentUpdate() (यानी this.props.value !== nextProps.value || this.props.checked !== nextProps.checked) इस तरह, आप (उदाहरण के लिए एक फार्म घटक, कई इनपुट क्षेत्रों के साथ, बनाते हैं का उपयोग कर कस्टम <Input />), केवल इनपुट फ़ील्ड जो बदला जाता है उसे फिर से प्रस्तुत किया जाता है।

मुझे यह देखना अच्छा लगेगा कि अन्य लोग इस समस्या से कैसे संपर्क करते हैं, हालांकि।