React.js 小書 Lesson12 – state vs props

鬍子大哈發表於2017-11-10
ReactJS

React.js 小書 Lesson12 – state vs props

本文作者：鬍子大哈
本文原文：http://huziketang.com/books/react/lesson12

轉載請註明出處，保留原文連結以及作者資訊

線上閱讀：http://huziketang.com/books/react

我們來一個關於 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 來構建元件。

下一節中我們將介紹《React.js 小書 Lesson13 – 渲染列表資料》。

相關文章