react中的state和props

這兩個知識點是react中非常重要的部分，今天再深入復習一遍。

state

state這個單詞本來的意思是狀態，在react中，它只是用來控制這個組件本身自己的狀態，我們可以用state來完成對行為的控制、數據的更新、界面的渲染，由於組件不能修改傳入的props，所以需要記錄自身的數據變化。

setStart

不能直接給state賦值，state的更新需要運用到setState，給state賦值的確會更改state，具體流程是：當調用setState這個函數的時候，React.js 會更新組件的狀態 state ，並且重新調用 render 方法，然后再把 render 方法所渲染的最新的內容顯示到頁面上。它的工作除了要更動 this.state 之外，還要負責觸發重新渲染，這里面要經過 React 核心 diff 算法，最終才能決定是否要進行重渲染，以及如何渲染。而且為了批次與效能的理由，多個 setState 呼叫有可能在執行過程中還需要被合並，所以它被設計以延時的來進行執行是相當合理的。

在 React 的 setState 函數實現中，會根據一個變量 isBatchingUpdates 判斷是直接更新 this.state 還是放到隊列中回頭再說，而 isBatchingUpdates 默認是 false，也就表示 setState 會同步更新 this.state，但是，有一個函數 batchedUpdates，這個函數會把 isBatchingUpdates 修改為 true，而當 React 在調用事件處理函數之前就會調用這個 batchedUpdates，造成的后果，就是 由 React 控制的事件處理過程 setState 不會同步更新 this.state。

 

綜上， 由 React 控制的事件處理過程 setState 不會同步更新 this.state；React 控制之外的情況， setState 會同步更新 this.state。

 

props

state 和 props 主要的區別在於  props 是不可變的，而 state 可以根據與用戶交互來改變。這就是為什么有些容器組件需要定義 state 來更新和修改數據， 而子組件只能通過 props 來傳遞數據。

react中說的單向數據流值說的就是props，根據這一特點它還有一個作用：組件之間的通信。props本身是不可變的，但是有一種情形它貌似可變，即是將父組件的state作為子組件的props，當父組件的state改變，子組件的props也跟着

改變，其實它仍舊遵循了這一定律：props是不可更改的。

props一定來源於默認屬性或者通過父組件傳遞而來：

1.可以通過組件類的 defaultProps 屬性為 props 設置默認值。

class HelloMessage extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
 
HelloMessage.defaultProps = {
  name: 'Runoob'
};
 
const element = <HelloMessage/>;
 
ReactDOM.render(
  element,
  document.getElementById('example')
);

2.組合使用 state 和 props ：在父組件中設置 state， 並通過在子組件上使用 props 將其傳遞到子組件上。在 render 函數中, 我們設置 name 和 site 來獲取父組件傳遞過來的數據。

class WebSite extends React.Component {
  constructor() {
      super();
 
      this.state = {
        name: "不知名小網站",
        site: "https://www.sherry.com"
      }
    }
  render() {
    return (
      <div>
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
}
 
 
 
class Name extends React.Component {
  render() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
}
 
class Link extends React.Component {
  render() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
}
 
ReactDOM.render(
  <WebSite />,
  document.getElementById('example')
);

 

沒有 state 的組件叫無狀態組件（stateless component），設置了 state 的叫做有狀態組件（stateful component）。因為狀態會帶來管理的復雜性，我們盡量多地寫無狀態組件，盡量少地寫有狀態的組件。這樣會降低代碼維護的難度，也會在一定程度上增強組件的可復用性。函數式組件就只有props沒有state。

總結

1.props用於定義外部接口，state用於記錄內部狀態

2.props的賦值在於外部世界使用組件，state的賦值在於組件內部

3.組件不應該改變props的值，而state存在的目的就是讓組件來修改的

組件的state相當於組件的記憶，其存在的意義就是被修改，每一次通過setState函數修改state就改變了組件的狀態，然后通過把渲染過程體現出來。但是組件的props絕不應該被修改，我們可以想象一個場景，一個父組件將同一個props傳給幾個子組件，若有一個子組件將props修改，那么其他的組件就不一定能得到自己想到的值，此時的情況將混亂不堪。