React.js 小書 Lesson12 - state vs props

call_me_R 發(fā)布于2019-08-21 17:33 / 2624人閱讀

摘要：的主要作用是用于組件保存控制修改自己的可變狀態(tài)。它們都可以決定組件的行為和顯示形態(tài)。但是它們的職責其實非常明晰分明是讓組件控制自己的狀態(tài)，是讓外部對組件自己進行配置。下一節(jié)中我們將介紹小書渲染列表數(shù)據(jù)。

React.js 小書 Lesson12 - state vs props

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

轉(zhuǎn)載請注明出處，保留原文鏈接以及作者信息

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

我們來一個關(guān)于 state 和 props 的總結(jié)。

state 的主要作用是用于組件保存、控制、修改自己的可變狀態(tài)。state 在組件內(nèi)部初始化，可以被組件自身修改，而外部不能訪問也不能修改。你可以認為 state 是一個局部的、只能被組件自身控制的數(shù)據(jù)源。state 中狀態(tài)可以通過 this.setState 方法進行更新，setState 會導(dǎo)致組件的重新渲染。

props 的主要作用是讓使用該組件的父組件可以傳入?yún)?shù)來配置該組件。它是外部傳進來的配置參數(shù)，組件內(nèi)部無法控制也無法修改。除非外部組件主動傳入新的 props，否則組件的 props 永遠保持不變。

state 和 props 有著千絲萬縷的關(guān)系。它們都可以決定組件的行為和顯示形態(tài)。一個組件的 state 中的數(shù)據(jù)可以通過 props 傳給子組件，一個組件可以使用外部傳入的 props 來初始化自己的 state。但是它們的職責其實非常明晰分明：state 是讓組件控制自己的狀態(tài)，props 是讓外部對組件自己進行配置。

如果你覺得還是搞不清 state 和 props 的使用場景，那么請記住一個簡單的規(guī)則：盡量少地用 state，盡量多地用 props。

沒有 state 的組件叫無狀態(tài)組件（stateless component），設(shè)置了 state 的叫做有狀態(tài)組件（stateful component）。因為狀態(tài)會帶來管理的復(fù)雜性，我們盡量多地寫無狀態(tài)組件，盡量少地寫有狀態(tài)的組件。這樣會降低代碼維護的難度，也會在一定程度上增強組件的可復(fù)用性。前端應(yīng)用狀態(tài)管理是一個復(fù)雜的問題，我們后續(xù)會繼續(xù)討論。

React.js 非常鼓勵無狀態(tài)組件，在 0.14 版本引入了函數(shù)式組件——一種定義不能使用 state 組件，例如一個原來這樣寫的組件：

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

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

  render () {
    return (
      Hello World
    )
  }
}

用函數(shù)式組件的編寫方式就是：

const HelloWorld = (props) => {
  const sayHi = (event) => alert("Hello World")
  return (
    Hello World
  )
}

以前一個組件是通過繼承 Component 來構(gòu)建，一個子類就是一個組件。而用函數(shù)式的組件編寫方式是一個函數(shù)就是一個組件，你可以和以前一樣通過使用該組件。不同的是，函數(shù)式組件只能接受 props 而無法像跟類組件一樣可以在 constructor 里面初始化 state。你可以理解函數(shù)式組件就是一種只能接受 props 和提供 render 方法的類組件。

但本書全書不采用這種函數(shù)式的方式來編寫組件，統(tǒng)一通過繼承 Component 來構(gòu)建組件。

下一節(jié)中我們將介紹《React.js 小書 Lesson13 - 渲染列表數(shù)據(jù)》。