第 21 天 !
我們來了解 react 的 資料流(data flow)
,
在我們之前做的To Do List
範例來說,
在設定資料的時候,
只單純在 App component 設定了 state,
其他幾個地方,都是依靠 App component
的 state
在建立的,
所以我們可以說,
以 App component
的 state
為起點,向下用 props
傳遞,
這樣一層一層往下傳遞。
那假如我們需要改變資料,透過往下傳遞改變資料的 function
,
來讓來源資料改變,再次向下傳遞
這種就叫做 單向資料流(one way data flow)
like:
const ChildA = ({text})=>{
return <Text>{text}</Text>
};
class App extends React.Component {
constructor(props){
this.state = {
text: '123'
}
}
render(){
return (
<ChildA text={this.state.text}/>
);
}
};
因為來源只有一個,所以當我們發生問題時,會依照來源向上追蹤
甚至是改變資料的實際操作,也只會在來源處,
所以比較容易的去追蹤問題