前言
在前文React 入門 03 - 元素與組件中學習了React基礎元素與組件，今天來探究一下React組件的兩個基本屬性props和state的用法與區別。
它們的一個重要的不同點就是：props是傳遞給組件的（類似於函數的形參），具有隻讀特性，是不可修改的。state是組件內自己管理的（類似於函數內聲明變量），是可以用特定方式進行值更新的。
props
props（“properties”的縮寫）和state都是普通的JavaScript對象。它們是用來保存信息的，這些信息可以控制組件的渲染輸出。
state
React 把組件看成是一個狀態機 (State Machines)，state記錄組件的內部狀態，有state叫有狀態組件，無state叫無狀態組件。React通過改表state的值來控制界面變化，界面會根據state的值變化而重新渲染。
state 與 props 類似，但是 state 是私有的，並且完全受控於當前組件。
正確使用 state
React 通過更新state的值來控制界面的變化，但需要注意的是 state 值是不可以直接修改的，必須使用setState(...) 方法來更新。
1. 不要直接修改 State。例如，此代碼不會重新渲染組件：
// Wrong
this.state.user = 'Ria';
而是應該使用 setState():
// Correct
this.setState({user: 'Ria'});
構造函數是唯一可以給 this.state 賦值的地方。
2. 在事件處理函數內部的 setState(...)是異步的。React 會將該 state “沖洗” 到瀏覽器事件結束的時候，再統一地進行更新。這種機制可以在大型應用中得到很好的性能提升。
3. 調用 setState() 的時候，React 會把你提供的對象合併到當前的 state。
React 數據自頂向下流動
不管是父組件或是子組件都無法知道某個組件是有狀態的還是無狀態的，並且它們也並不關心它是函數組件還是 class 組件。
組件可以選擇把它的 state 作爲 props 向下傳遞到它的子組件中。
實例
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
}
// React 組件生命週期函數，在render()之後
componentDidMount() {
this.timerId = setInterval(
() => this.tick(),
1000
)
}
// React 組件生命週期函數，在組件卸載(unmounted)或銷燬(destroyed)之前
componentWillUnmount() {
clearInterval(this.timerId);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1> Hello World! </h1>
<h2> It is {this.state.date.toLocaleTimeString()} </h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);