क्यों उत्परिवर्तन शैली को बहिष्कृत किया गया था?

Question

0.13 और 0.14 में प्रलेखन दोनों चेतावनी दी है कि शैली परिवर्तनशील पदावनत किया गया है, लेकिन उल्लेख नहीं है क्यों

पुन: उपयोग और के बीच रेंडर पदावनत किया गया है एक शैली वस्तु परिवर्तनशील

मुझे क्या करना चाहिए अगर मैं ऐसे तत्व पर राज्य-निर्भर एनिमेशन करना चाहता हूं जो सीएसएस क्लास-आधारित एनिमेशन संभाल नहीं सकता है? ऑब्जेक्ट को हर बार क्लोन करें?

प्रतिक्रिया करने के लिए नए हैं, मदद और सलाह बहुत सराहना

Answer 1

परीक्षण का मामला/अपेक्षित त्रुटि को देखते हुए, आप सही हैं और वस्तु क्लोनिंग किया जाना चाहिए।

Warning: `div` was passed a style object that has previously been 
mutated. Mutating `style` is deprecated. Consider cloning it 
beforehand. Check the `render` of `App`. Previous style: 
{border: "1px solid black"}. Mutated style: 
{border: "1px solid black", position: "absolute"}. 

https://github.com/facebook/react/blob/fc96f31fade8043856eb7bc34c56598c4a576110/src/renderers/dom/shared/tests/ReactDOMComponent-test.js#L128

मुझे लगता है कि होगा यह रंगमंच की सामग्री के लिए तर्क के समान है - यह एक अस्थायी शैली वस्तु हर जगह के आसपास गुजर और तर्क में आसानी है कि प्रतिक्रिया का एक बहुत कुछ खोने समाप्त से बचाता है वास्तव में अच्छा है आपको मदद करने में

The props object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, React.cloneElement should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.

Answer 2

आप एक नया चर में पिछले शैली को कॉपी और पिछले शैली वस्तु को कॉपी करके इस समस्या को हल कर सकते हैं।

उदाहरण:

अनुमति नहीं

const {styleFromProps} = this.props; 

const newStyle = styleFromProps['marginTop'] = '45px'; 

अनुमति

const {styleFromProps} = this.props; 

const newStyle = {...styleFromProps, marginTop: '45px'}; 

इस तरह, आप कुछ भी म्यूट नहीं कर रहे हैं, लेकिन पिछले एक (i.e styleFromProps)

Answer 3

इस समस्या को हल करना बहुत आसान है।

बुरा रास्ता

<div style={this.props.style} /> 

अच्छा तरीका

<div style={{ ...this.props.style }} />