含義

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

單向數據流
數據的流動 父 → 子 props向下傳遞
props只讀數據 → props →數據操作 → 父組件來完成 → 數據由父組件管理
狀態提升 → 本應該是子組件的狀態 → 父組件來保存與操作 → 通過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') )

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。