demo如下
class Demo4StateLearn extends React.Component { constructor(props) { super(props); this.state = { a:11 }; this.a = this.state.a;//在創建該組件的時候就設置 this.a = 狀態機.a } loadData(e) {//每次輸入改變狀態機 const value = e.target.value; this.setState({a:value}); } render() { return ( <div> <input type="text" onChange={(e)=>{this.loadData(e)}}/> <div>this.state.a:{this.state.a}</div> <div>this.a:{this.a}</div> </div> ) } }
網頁效果如下圖：
所以我們在基於React開發的時候，應該避免使用這種開發方式；而常見的使用方式更多的是如下：
render() { const a = this.state.a;//在render函數中在取值，這樣就可以避免以上問題；因為每次setState都會觸發render的重新執行；所以也就重新指向了新的地址； return ( <div style={{margin:"20px"}}> <input type="text" onChange={(e)=>{this.loadData(e)}}/> <div>this.state.a:{this.state.a}</div> <div>this.a:{this.a}</div> </div> ) }
本來是應該去查看REACT的源碼的，但礙於目前尚無讀其源碼的能力，所以只能在此依據現象進行推導； 如不正確，望斧正；
----------------------------2018,1,22-----勘誤-----------------------
再次讀此文，真是一派胡言；
上面之所以不會變，是因為this.a賦值為一個 基本數據類型 當然不會跟着state的改變而改變！
希望下次寫博客自己可以強大些，不要誤人子弟，也對自己沒有任何幫助
