React state和props使用場景

一個組件的顯示狀態可以由內部狀態state、外部參數props所決定。

props：

　　1、props 是從外部傳進組件的參數，主要是父組件向子組件傳遞數據。

　　2、props 對於使用它的組件來說是只讀的。要想修改props，必須通過父組件修改。所以子組件的props 通常是父組件的state。

　　3、默認值

　　　　為了組件的健壯性，在傳入props 的時候常給默認值。

const SubComponent=(props)=> {
  return （<h1>{props.name}</h1>）
}
SubComponent.defaultProps = {
  name: 'Rain_tdk'
};
export default SubComponent

　　4、為開發方便我們需要對props 的數據類型進行檢驗

import PropTypes from 'prop-types';
const SubComponent=(props)=> {
  return （<h1>{props.name}</h1>）
}
SubComponent.defaultProps = {
  name: 'Rain_tdk'
};
SubComponent.propTypes = {
  name: PropTypes.string
};
export default SubComponent

　　更多檢驗參考 ：https://www.jianshu.com/p/2896acb5746b

state：

　　1、state是React組件中的私有對象，用於控制這個組件本身的狀態

　　2、setState（）采用merge的方式修改state。setState會重新調用render（）刷新UI，直接通過this.state=‘xxx’的方式也會修改state但是不會重新渲染。

　　　注：setState（{...newState}）當state為Object、Arrary 時diff 比較的是引用，不會刷新UI 。需要使用 concat /slice /...運算符等產生新引用的方法。

　　3、應用場景：

　　　　　　大部分組件的工作應該是從props里取數並渲染出來，但是當需要 用戶輸入、服務器請求、延定時變化 等作出響應。

　　　　　　通常在有狀態state的組件中處理用戶交互邏輯，並通過props傳遞給子組件（通常為無狀態組件）中。

　　4、那些屬性應該用state

　　　　　　state 中應該保存可能被事件處理器改變並觸發用戶頁面更新的數據。

　　5、哪些屬性不應該存儲在state中

　　　　　　5-1、計算所得數據。計算數據應該在render（）中實現，如果存儲在state中需要手動更新state 比較麻煩

　　　　　　5-2、基於props 的重復數據。組件中應該保持props為唯一的數據來源，除非需要知道歷史數據是啥。

　　　　　　5-3、不要將React組件保存在state中。在render（）里使用props、state來創建他。

　　總結：state讓你修改（不修改的數據別往state存）。props不讓你修改。多個state、props共同影響UI 的時在render（）中實現。