प्रतिक्रिया

Question

के साथ सूची में आइटम को हाइलाइट करते समय प्रदर्शन मेरे पास एक बड़ी सूची है, मान लें कि 3k सदस्य हैं। मेरे पास एक घटक है जो इस सूची और प्रत्येक सूची आइटम के लिए एक घटक प्रस्तुत करता है। बाहरी घटक में हम इस तरह कोड है:

const list = _.map(this.props.items, (item) => { 
    return <ListItem key={item.key} {...item} /> 
}); 

और फिर हमारे JSX में हम सूची जगह:

<div> 
    <h3>Check out my sweet list </h3> 
    { list } 
</div> 

यहाँ रगड़ है: मैं उपयोगकर्ता को दिखाने के लिए जब वे एक आइटम पर क्लिक करें कि आइटम का चयन किया गया है। तो मेरे ListItem घटक में मेरे पास कोड है, इस पर आधारित है कि व्यक्तिगत आइटम में selected संपत्ति है या नहीं, स्वयं को हाइलाइट करता है। मैं पूरी सूची को फिर से प्रस्तुत करने से प्रतिक्रिया कैसे रोकूं, जब केवल एक ही आइटम पर चयनित संपत्ति बदल जाती है? मुझे यकीन है कि मुझे किसी भी तरह से मेरे कोड को पुन: स्थापित करने की आवश्यकता है, लेकिन मुझे यकीन नहीं है कि इस समस्या को कौन सी संरचना हल करेगी। किसी भी और सभी सवालों का जवाब देने में अग्रिम धन्यवाद और अग्रिम धन्यवाद!

नोट्स:

• मैं किसी सूची में 3k आइटम प्रतिपादन यह नहीं कह रहा हूँ अच्छा, बस का मानना ​​है इस होना चाहिए, सिद्धांत रूप में, प्रतिक्रिया के साथ क्या करना संभव।
• सूची वास्तविक डोम पर सचमुच पुन: प्रस्तुत नहीं की जा रही है, लेकिन वर्चुअल डोम सब कुछ की तुलना करने का काम कर रहा है, और इसमें बहुत समय लगता है।

Answer 1

ठीक है, मैं यह पता लगा। प्रत्येक व्यक्तिगत आइटम पर shouldComponentUpdate को सफलतापूर्वक कार्यान्वित करने से भारी प्रदर्शन में वृद्धि आती है। मैं इसे एक साधारण कारण से करने में असफल रहा था।

shouldComponentUpdate(nextProps) { 
    return !_.isEqual(nextProps, this.props); 
} 

हालांकि ... मैं प्रत्येक आइटम के अपने घोषणा पर इस कर रहा था:

onClick={this.handleItemClick.bind(this, item.key)} 

मतलब कौन सा है कि this.props.onClick === nextProps.onClick हमेशा अवास्तविक लौटाते हैं, तो हर एक आइटम हमेशा खुद होने के लिए की आवश्यकता होगी, के रूप में घोषणा करेंगे rerendered। एक कस्टम चेक लागू करने के बाद, यह अब बहुत तेज है!