含義
- 狀態提升：兩個組件（無父子關系）共享一個數據并且同步數據變化
- 類組件調用（實例化）的時候，組件內部的狀態是唯一且獨立的
- 組件嵌套與調用，和是類組件（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')
)
