React.js 小書 Lesson10 - 組件的 state 和 setState

tyheist 發布于2019-08-21 17:33 / 920人閱讀

摘要：傳入一個對象的時候，這個對象表示該組件的新狀態。下一節中我們將介紹小書配置組件的。

React.js 小書 Lesson10 - 組件的 state 和 setState

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

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

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

state

我們前面提到過，一個組件的顯示形態是可以由它數據狀態和配置參數決定的。一個組件可以擁有自己的狀態，就像一個點贊按鈕，可以有“已點贊”和“未點贊”狀態，并且可以在這兩種狀態之間進行切換。React.js 的 state 就是用來存儲這種可變化的狀態的。

我們還是拿點贊按鈕做例子，它具有已點贊和未點贊兩種狀態。那么就可以把這個狀態存儲在 state 中。修改 src/index.js 為：

import React, { Component } from "react"
import ReactDOM from "react-dom"
import "./index.css"

class LikeButton extends Component {
  constructor () {
    super()
    this.state = { isLiked: false }
  }

  handleClickOnLikeButton () {
    this.setState({
      isLiked: !this.state.isLiked
    })
  }

  render () {
    return (
      
    )
  }
}
...

isLiked 存放在實例的 state 對象當中，這個對象在構造函數里面初始化。這個組件的 render 函數內，會根據組件的 state 的中的isLiked不同顯示“取消”或“點贊”內容。并且給 button 加上了點擊的事件監聽。

最后構建一個 Index ，在它的 render 函數內使用 LikeButton 。然后把 Index 渲染到頁面上：

...
class Index extends Component {
  render () {
    return (
      
        
      
    )
  }
}

ReactDOM.render(
  ,
  document.getElementById("root")
)

setState 接受對象參數

在 handleClickOnLikeButton 事件監聽函數里面，大家可以留意到，我們調用了 setState 函數，每次點擊都會更新 isLiked 屬性為 !isLiked，這樣就可以做到點贊和取消功能。

setState 方法由父類 Component 所提供。當我們調用這個函數的時候，React.js 會更新組件的狀態 state ，并且重新調用 render 方法，然后再把 render 方法所渲染的最新的內容顯示到頁面上。

注意，當我們要改變組件的狀態的時候，不能直接用 this.state = xxx 這種方式來修改，如果這樣做 React.js 就沒辦法知道你修改了組件的狀態，它也就沒有辦法更新頁面。所以，一定要使用 React.js 提供的 setState 方法，它接受一個對象或者函數作為參數。

傳入一個對象的時候，這個對象表示該組件的新狀態。但你只需要傳入需要更新的部分就可以了，而不需要傳入整個對象。例如，假設現在我們有另外一個狀態 name ：

...
  constructor (props) {
    super(props)
    this.state = {
      name: "Tomy",
      isLiked: false
    }
  }

  handleClickOnLikeButton () {
    this.setState({
      isLiked: !this.state.isLiked
    })
  }
...

因為點擊的時候我們并不需要修改 name，所以只需要傳入 isLiked 就行了。Tomy 還是那個 Tomy，而 isLiked 已經不是那個 isLiked 了。

setState 接受函數參數

這里還有要注意的是，當你調用 setState 的時候，React.js 并不會馬上修改 state。而是把這個對象放到一個更新隊列里面，稍后才會從隊列當中把新的狀態提取出來合并到 state 當中，然后再觸發組件更新。這一點要好好注意。可以體會一下下面的代碼：

...
  handleClickOnLikeButton () {
    console.log(this.state.isLiked)
    this.setState({
      isLiked: !this.state.isLiked
    })
    console.log(this.state.isLiked)
  }
...

你會發現兩次打印的都是 false，即使我們中間已經 setState 過一次了。這并不是什么 bug，只是 React.js 的 setState 把你的傳進來的狀態緩存起來，稍后才會幫你更新到 state 上，所以你獲取到的還是原來的 isLiked。

所以如果你想在 setState 之后使用新的 state 來做后續運算就做不到了，例如：

...
  handleClickOnLikeButton () {
    this.setState({ count: 0 }) // => this.state.count 還是 undefined
    this.setState({ count: this.state.count + 1}) // => undefined + 1 = NaN
    this.setState({ count: this.state.count + 2}) // => NaN + 2 = NaN
  }
...

上面的代碼的運行結果并不能達到我們的預期，我們希望 count 運行結果是 3 ，可是最后得到的是 NaN。但是這種后續操作依賴前一個 setState 的結果的情況并不罕見。

這里就自然地引出了 setState 的第二種使用方式，可以接受一個函數作為參數。React.js 會把上一個 setState 的結果傳入這個函數，你就可以使用該結果進行運算、操作，然后返回一個對象作為更新 state 的對象：

...
  handleClickOnLikeButton () {
    this.setState((prevState) => {
      return { count: 0 }
    })
    this.setState((prevState) => {
      return { count: prevState.count + 1 } // 上一個 setState 的返回是 count 為 0，當前返回 1
    })
    this.setState((prevState) => {
      return { count: prevState.count + 2 } // 上一個 setState 的返回是 count 為 1，當前返回 3
    })
    // 最后的結果是 this.state.count 為 3
  }
...

這樣就可以達到上述的利用上一次 setState 結果進行運算的效果。

setState 合并

上面我們進行了三次 setState，但是實際上組件只會重新渲染一次，而不是三次；這是因為在 React.js 內部會把 JavaScript 事件循環中的消息隊列的同一個消息中的 setState 都進行合并以后再重新渲染組件。

深層的原理并不需要過多糾結，你只需要記住的是：在使用 React.js 的時候，并不需要擔心多次進行 setState 會帶來性能問題。

下一節中我們將介紹《React.js 小書 Lesson11 - 配置組件的 props》。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89664.html

React.js 小書 Lesson3 - 前端組件化（二）：優化 DOM 操作

摘要：一個組件的顯示形態由多個狀態決定的情況非常常見。我們順利地消除了手動的操作。非一般的暴力，因為每次都重新構造新增刪除元素，會導致瀏覽器進行大量的重排，嚴重影響性能。下一節小書前端組件化三抽象出公共組件類我們把這個通用模式抽離到一個類當中。 React.js 小書 Lesson3 - 前端組件化（二）：優化 DOM 操作本文作者：胡子大哈本文原文：http://huziketang....

Drinkey 2019-08-21 17:32 評論0 收藏0
React.js 小書 Lesson15 - 實戰分析：評論功能（二）

摘要：例如，上面設置了的為，在中被初始化為空字符串。如何向傳遞的數據父組件只需要通過給子組件傳入一個回調函數。當用戶點擊發布按鈕的時候，調用中的回調函數并且將傳入該函數即可。下一節中我們將介紹小書實戰分析評論功能三。 React.js 小書 Lesson15 - 實戰分析：評論功能（二）本文作者：胡子大哈本文原文：http://huziketang.com/books/react/les...

siberiawolf 2019-08-21 17:34 評論0 收藏0
React.js 小書 Lesson19 - 掛載階段的組件生命周期（二）

摘要：多次的隱藏和顯示會讓重新構造和銷毀組件，每次構造都會重新構建一個定時器。而銷毀組件的時候沒有清除定時器，所以你看到報錯會越來越多。例如清除該組件的定時器和其他的數據清理工作。下一節中我們將介紹小書更新階段的組件生命周期。 React.js 小書 Lesson19 - 掛載階段的組件生命周期（二）本文作者：胡子大哈本文原文：http://huziketang.com/books/re...

Dogee 2019-08-21 17:34 評論0 收藏0
React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類

摘要：最后抽離出來了一個類，可以幫助我們更好的做組件化。一個組件有自己的顯示形態上面的結構和內容行為，組件的顯示形態和行為可以由數據狀態和配置參數共同決定。接下來我們開始正式進入主題，開始正式介紹。下一節鏈接直達小書基本環境安裝 React.js 小書 Lesson4 - 前端組件化（三）：抽象出公共組件類本文作者：胡子大哈本文原文：http://huziketang.com/books...

jsbintask 2019-08-21 17:32 評論0 收藏0
React.js 小書 Lesson11 - 配置組件的 props

摘要：默認配置上面的組件默認配置我們是通過操作符來實現。但這并不意味著由決定的顯示形態不能被修改。組件可以在內部通過獲取到配置參數，組件可以根據的不同來確定自己的顯示形態，達到可配置的效果。下一節中我們將介紹小書。 React.js 小書 Lesson11 - 配置組件的 props 本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesso...

xiangzhihong 2019-08-21 17:33 評論0 收藏0