state vs props

咱們來一個關於 state 和 props 的總結。

state 的主要做用是用於組件保存、控制、修改本身的可變狀態。state 在組件內部初始化，能夠被組件自身修改，而外部不能訪問也不能修改。你能夠認爲 state 是一個局部的、只能被組件自身控制的數據源。state 中狀態能夠經過 this.setState方法進行更新，setState 會致使組件的從新渲染。

props 的主要做用是讓使用該組件的父組件能夠傳入參數來配置該組件。它是外部傳進來的配置參數，組件內部沒法控制也沒法修改。除非外部組件主動傳入新的 props，不然組件的 props 永遠保持不變。

state 和 props 有着千絲萬縷的關係。它們均可以決定組件的行爲和顯示形態。一個組件的 state 中的數據能夠經過 props 傳給子組件，一個組件可使用外部傳入的 props 來初始化本身的 state。可是它們的職責其實很是明晰分明：state 是讓組件控制本身的狀態，props 是讓外部對組件本身進行配置。

若是你以爲仍是搞不清 state 和 props 的使用場景，那麼請記住一個簡單的規則：儘可能少地用 state，儘可能多地用 props。

沒有 state 的組件叫無狀態組件（stateless component），設置了 state 的叫作有狀態組件（stateful component）。由於狀態會帶來管理的複雜性，咱們儘可能多地寫無狀態組件，儘可能少地寫有狀態的組件。這樣會下降代碼維護的難度，也會在必定程度上加強組件的可複用性。前端應用狀態管理是一個複雜的問題，咱們後續會繼續討論。

React.js 很是鼓勵無狀態組件，在 0.14 版本引入了函數式組件——一種定義不能使用 state 組件，例如一個原來這樣寫的組件：

class HelloWorld extends Component {
  constructor() {
    super()
  }

  sayHi () {
    alert('Hello World')
  }

  render () {
    return (
      <div onClick={this.sayHi.bind(this)}>Hello World</div>
    )
  }
}

用函數式組件的編寫方式就是：

const HelloWorld = (props) => {
  const sayHi = (event) => alert('Hello World')
  return (
    <div onClick={sayHi}>Hello World</div>
  )
}

之前一個組件是經過繼承 Component 來構建，一個子類就是一個組件。而用函數式的組件編寫方式是一個函數就是一個組件，你能夠和之前同樣經過 <HellWorld /> 使用該組件。不一樣的是，函數式組件只能接受 props 而沒法像跟類組件同樣能夠在 constructor 裏面初始化 state。你能夠理解函數式組件就是一種只能接受 props和提供 render 方法的類組件。

但本書全書不採用這種函數式的方式來編寫組件，統一經過繼承 Component 來構建組件。

下一節：渲染列表數據

上一節：配置組件的 props