ReactJS: प्रतिक्रिया में अपरिवर्तनीय हेल्पर्स का असली दुनिया उपयोग क्या है?

Question

प्रतिक्रिया का आधिकारिक दस्तावेज़ Immutability Helpers प्रदान करता है।

ऐसे सहायकों का वास्तविक दुनिया उपयोग क्या होगा? मुझे लगता है कि मुझे यहां कुछ मूलभूत याद आ रही है।

Answer 1

प्रतिक्रिया मानता है कि राज्य में स्थापित वस्तुओं अपरिवर्तनीय हैं, जिसका अर्थ है कि आपके द्वारा जोड़े गए तत्व पिछले सरणी रखने अछूता साथ नया एक बनाने चाहिए जोड़ें या अपने सरणी के अंदर कुछ तत्व को निकालना चाहते हैं:

var a = [1, 2, 3]; 
var b = React.addons.update(a, {'$push': [4] }); 
console.log(a); // [1, 2, 3]; 
console.log(b); // [1, 2, 3, 4]; 

तक अपरिवर्तनीय वस्तुओं का उपयोग कर वस्तु की सामग्री बदली है, तो आप आसानी से देख सकते हैं:

React.createClass({ 
    getInitialState: function() { 
     return { elements: [1, 2, 3] }; 
    }, 
    handleClick: function() { 
     var newVal = this.state.elements.length + 1; 
     this.setState({ 
      elements: React.addons.update(this.state.elements, { '$push': [ newVal ] }) 
     }) 
    }, 
    shouldComponentUpdate: function (nextProps, nextState) { 
     return this.state.elements !== nextState.elements; 
    }, 
    render: function() { 
     return (
      <div onClick={this.handleClick}>{ this.state.elements.join(', ') }</div> 
     ); 
    } 
}); 

Answer 2

ReactJS राज्य अधिमानतः अपरिवर्तनीय होना चाहिए। मतलब यह है कि, हर बार render() कहा जाता है, this.state एक अलग वस्तु होना चाहिए। वह है: oldState == newState गलत है और oldState.someProp == newState.someProp भी गलत है।

तो, सरल राज्य वस्तुओं के लिए, इसमें कोई संदेह नहीं है कि उन्हें क्लोन किया जाना चाहिए। हालांकि, अगर आपका राज्य वस्तु बहुत जटिल और गहरी है, तो पूरे राज्य को क्लोन करने से प्रदर्शन प्रभावित हो सकता है। इसके कारण, प्रतिक्रिया की अपरिवर्तनीय सहायतागार स्मार्ट है और यह केवल उन वस्तुओं को क्लोन करता है जो इसे सोचते हैं कि इसे क्लोन करना चाहिए।

onTextChange: function(event) { 
    let updatedState = React.addons.update(this.state, { text: {$set: event.text} }); 
    this.setState(updatedState); 
} 

:

onTextChange: function(event) { 
    let updatedState = _.extend({}, this.state); // this will CLONE the state. I'm using underscore just for simplicity. 
    updatedState.text = event.text; 
    this.setState(updatedState); 
} 

यह तुम कैसे करते हैं जब आप अचल स्थिति सहायकों जो निर्धारित वस्तुओं यह वास्तव में क्लोन चाहिए प्रतिक्रिया के जाने है:

यह तुम कैसे करते जब आप अपने आप से राज्य क्लोन है

उपरोक्त उदाहरण बेहतर प्रदर्शन करेगा जब पहले state बहुत जटिल और गहरा है।

Answer 3

प्रतिक्रिया अनुप्रयोग अपरिवर्तनीयता पसंद करते हैं, अपरिवर्तनीयता का समर्थन करने के लिए दो तरीके (फेसबुक से) हैं, एक immutable.js का उपयोग करना है जो एक पूर्ण अपरिवर्तनीयता लाइब्रेरी है, दूसरा एक immutable helper है जो हल्के सहायक है। आपको केवल एक प्रोजेक्ट में उपयोग करने के लिए एक चुनना होगा।

immutable.js का केवल disadvantege कि वह खुद स्टोर और देखें घटक, जैसे सहित अपने पूरे आवेदन भर रिसाव,

// Stores 
props = props.updateIn(['value', 'count'], count => count + 1); 

// View Components 
render: function() { 
    return <div>{this.props.getIn("value", "count")}</div>; 
} 

आप immutable helper उपयोग करते हैं, आप अचल स्थिति संचालन जगह पर जहां अपडेट संपुटित कर सकते हैं ऐसा होता है (जैसे स्टोर और रेडक्स रेड्यूसर)। इसलिए, आपके व्यू घटक अधिक पुन: प्रयोज्य हो सकते हैं।

// Stores or Reducers 
props = update(props, { 
    value: {count: {$set: 7}} 
}; 

// View Components can continue to use Plain Old JavaSript Object 
render: function() { 
    return <div>{this.props.value.count}</div>; 
}