含義

• 狀態(tài)提升：兩個組件（無父子關(guān)系）共享一個數(shù)據(jù)并且同步數(shù)據(jù)變化
• 類組件調(diào)用（實例化）的時候，組件內(nèi)部的狀態(tài)是唯一且獨立的
• 組件嵌套與調(diào)用，和是類組件（render）還是函數(shù)組件（直接return）沒有關(guān)系
• 類組件與函數(shù)組件是可以相互嵌套調(diào)用的
  

單向數(shù)據(jù)流
數(shù)據(jù)的流動 父 → 子 props向下傳遞
props只讀數(shù)據(jù) → props →數(shù)據(jù)操作 → 父組件來完成 → 數(shù)據(jù)由父組件管理
狀態(tài)提升 → 本應(yīng)該是子組件的狀態(tài) → 父組件來保存與操作 → 通過props → 子組件

class NameInput extends React.Component {render() {return (<div>第{this.props.index}個：<input type="text" value={this.props.name} onChange={this.props.changeFn} /></div>)} } class App extends React.Component {state = {name: ''}changeName = (e) => {this.setState({name: e.target.value})}render() {return (<div><NameInput index="1" name={this.state.name} changeFn={this.changeName} /><NameInput index="2" name={this.state.name} changeFn={this.changeName} /></div>)} } ReactDOM.render(<App />,document.getElementById('app') )

總結(jié)

以上是生活随笔為你收集整理的11 父子组件数据关系与状态提升的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。