成員變量通過引用

Question

反應類被「共享」當我創建一個反應類的幾個實例（通過在同一類使用React.createElement），一些成員變量的實例（數組和對象是共享之間共享，字符串和布爾等等）。

對我來說，這種感覺可怕的，可怕的，錯誤的。這是一個錯誤還是有另一種方法來做我想做的事情？

請看看： http://jsbin.com/kanayiguxu/1/edit?html,js,console,output

Answer 1

你應該做的是設置你的組件上的狀態，而不是有狀態的陣營組件上任意屬性是什麼。的

所以不是這樣：

var MyComponent = React.createClass({ 
    myArray: [1, 2, 3], 
    componentWillMount() { 
    this.myArray.push(this.myArray.length + 1); 
    }, 
    render() { 
    return (
     <span>{this.myArray.length}</span> 
    ); 
    } 
}); 

你應該這樣做：

var MyComponent = React.createClass({ 
    getInitialState() { 
    return { 
     myArray: [1, 2, 3] 
    }; 
    }, 
    componentWillMount() { 
    this.setState(state => { 
     state.myArray.push(state.myArray.length + 1); 
     return state; 
    }); 
    }, 
    render() { 
    return (
     <span>{this.myArray.length}</span> 
    ); 
    } 
}); 

的原因是所有的一個部件的狀態和數據應該駐留在this.state和this.props被控制並由React處理。

您使用的道具和狀態此得到的好處，就是陣營會知道什麼時候這些變化，並從它可以告訴當它的時間來重新渲染您的組件。如果您將狀態存儲爲任意屬性或全局變量，那麼React將不會知道這些更改的時間，並且無法爲您重新呈現。

的理由讓你所看到的行爲是組件的每個實例使用你給React.createClass()爲原型的對象。因此，組件的所有實例都具有myArray屬性，但屬於原型鏈，因此被所有實例共享。

如果你真的想要這樣的事情，而你想避免this.state，你應該使用像componentWillMount之類的東西，並在該方法中，分配屬性this。這將確保這些數據僅在特定實例上，而不在原型鏈上。

編輯

爲了進一步clearify，它可以很好的瞭解，傳遞給React.createClass()的對象不是在原型上實際的對象。 React做的是迭代該對象的所有屬性，並將它們複製到React元素對象的原型中。

var obj = { 
    myArray: [1, 2, 3], 
    title: 'My title', 
    componentWillMount() { 
    this.myArray.push(this.myArray.length + 1); 
    }, 
    render() { 
    return (
     <span>{this.myArray.length}</span> 
    ); 
    } 
} 

var MyComponent = React.createClass(obj); 

// This doesn't change the component, since 'obj' isn't used anymore 
// by React, it has already copied all properties. 
obj.title = 'New title'; 

// This however affects the component, because the reference to the array 
// was copied to the component prototype, and any changes to what the 
// reference points to will affect everyone who has access to it. 
obj.myArray.push(666);