React/數據流

「Props」

當 React 元素爲用戶自定義組件時，它會將 JSX 所接收的屬性（attributes）轉換爲單個對象傳遞給組件，這個對象被稱之爲 「props」。

props的只讀性

組件不管是使用函數聲明仍是經過 class 聲明，都決不能修改自身的 props。

組件能夠接受任意 props，包括基本數據類型，React 元素以及函數。

---

 

「defaultProps」

defaultProps 能夠爲 Class 組件添加默認 props。這通常用於 props 未賦值，但又不能爲 null 的狀況。例如：

class CustomButton extends React.Component {
  // ...
}

CustomButton.defaultProps = {
  color: 'blue'
};

---

 

「state」 

可是 state 是私有的，而且徹底受控於當前組件。「局部的」、「封裝的」

 

正確的使用State

1.不要直接修改State

使用setState方法修改state而不是this.state.user=這種方式

2.State的更新多是異步的

出於性能考慮，React 可能會把多個 setState() 調用合併成一個調用。

由於 this.props 和 this.state 可能會異步更新，因此你不要依賴他們的值來更新下一個狀態。

要解決這個問題，可讓 setState() 接收一個函數而不是一個對象。這個函數用上一個 state 做爲第一個參數，將這次更新被應用時的 props 作爲第二個參數：

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

3.State的更新會被合併

當你調用 setState() 的時候，React 會把你提供的對象合併到當前的 state。(淺合併)

數據是向下流動的

無論是父組件或是子組件都沒法知道某個組件是有狀態的仍是無狀態的，而且它們也並不關心它是函數組件仍是 class 組件。

由於state的私有性，因此組件能夠選擇把它的 state 做爲 props 向下傳遞到它的子組件中