本文轉(zhuǎn)載自微信公眾號「勾勾的前端世界」，作者西嶺 。轉(zhuǎn)載本文請聯(lián)系勾勾的前端世界公眾號。

今天的主要內(nèi)容是組件狀態(tài)。

狀態(tài)可以簡單的理解為數(shù)據(jù)，與 props 類似，但是 state 是私有的，并且完全受控于當前組件，因此組件狀態(tài)指的就是一個組件自己維護的數(shù)據(jù)。

上篇我們也提到了一個非常重要的點：數(shù)據(jù)驅(qū)動UI。意思也很簡單，就是頁面所展示的內(nèi)容，完全是受狀態(tài)控制的，這也就是所謂 MVVM 的理念。UI 的改變，全部交給框架本身來做，我們只需要管理好 “數(shù)據(jù)(狀態(tài))” 就可以了。

那么在 React 中，如何對狀態(tài)進行管理呢?這就是本章節(jié)的重點，也是整個 React 學習的重點：組件的狀態(tài)管理。

基本使用

state 的使用是非常簡單的，我們在類中聲明一個名為 state 的對象，對象中的元素就是當前組件所維護的狀態(tài)數(shù)據(jù)，獲取展示數(shù)據(jù)時，只需要在 jsx 中，使用 this.state.xx 的方式獲取就可以了。

 
 
 
 

  
  
  
  
import React, { Component }from'react'
  
  
  
  

  
  
  
  
exportclass States extends Component {
  
  
  
  
  // 聲明 state 對象
  
  
  
  
  state = {
  
  
  
  
    name:'xiling',
  
  
  
  
    age:18
  
  
  
  
  }
  
  
  
  

  
  
  
  
  render() {
  
  
  
  
    return (
  
  
  
  
      <>
  
  
  
  
        
state 狀態(tài)
  
  
  
  
        {/* 使用 this.state.xx 獲取數(shù)據(jù) */}
  
  
  
  
        
{this.state.name}
  
  
  
  
        
{this.state.age}
  
  
  
  
      
  
  
  
  
    )
  
  
  
  
  }
  
  
  
  
}
  
  
  
  

  
  
  
  
exportdefault States
 
 
 
 

前面我們說，state 數(shù)據(jù)是可以控制界面的，那么我們?nèi)绾涡薷?state 從而讓界面發(fā)生改變呢?

修改狀態(tài)

想要修改 state 的值，最直觀的方式就是直接使用 this.state={} 的方式直接修改。我們設(shè)置一個按鈕，當點擊按鈕時，通過 this.state={} 發(fā)現(xiàn)是不起作用的，那應該怎么做呢?

React 給我們提供了專門的 this.setState({}) 方法，我們需要調(diào)用 this.setState({}) 方法將需要修改的數(shù)據(jù)傳入才能正確的修改 state 的值。

至于為什么，需要我們理解 React 數(shù)據(jù)流才能搞懂，這里就不再詳細介紹，你只需要記住這個規(guī)則就可以了。

 
 
 
 

  
  
  
  
import React, { Component }from'react'
  
  
  
  

  
  
  
  
exportclass States extends Component {
  
  
  
  
  // 聲明 state 對象
  
  
  
  
  state = {
  
  
  
  
    name:'xiling',
  
  
  
  
    age:18
  
  
  
  
  }
  
  
  
  

  
  
  
  
  // 箭頭函數(shù)
  
  
  
  
  changes = ()=>{
  
  
  
  
    // console.log(22)
  
  
  
  
    // this.state.name = 'xiling' // 錯誤的使用方式
  
  
  
  
    this.setState({name:'西嶺'}) 
  
  
  
  
  }
  
  
  
  

  
  
  
  
  render() {
  
  
  
  
    return (
  
  
  
  
      <>
  
  
  
  
        
state 狀態(tài)
  
  
  
  
        {/* 使用 this.state.xx 獲取數(shù)據(jù) */}
  
  
  
  
        
{this.state.name}
  
  
  
  
        
{this.state.age}
  
  
  
  
        改變state
  
  
  
  
      
  
  
  
  
    )
  
  
  
  
  }
  
  
  
  
}
  
  
  
  

  
  
  
  
exportdefault States
 
 
 
 

一旦 state 的值發(fā)生了改變，那么 JSX 中使用 state 的地方就會自動發(fā)生改變。

這里也需要注意一點，因為 setState 方法是類中的屬性(方法)，我們需要使用 this 進行獲取，因此，事件綁定的處理函數(shù)就需要使用箭頭函數(shù)來固定 this 的指向，一定不要使用普通的函數(shù) (類方法) 聲明，否則會因為找不到方法而直接報錯。

自頂向下的單向數(shù)據(jù)流

關(guān)于數(shù)據(jù)流的問題，是面試中高頻次出現(xiàn)的典型題目，一般情況下面試官會直接問：“你是如何理解單向數(shù)據(jù)流的 ? ”。

注意，這不是一個單獨的個體問題，而是數(shù)據(jù)流問題的綜合體。解答這個問題，你需要解釋：

什么是數(shù)據(jù)流?

為什么是自頂向下的?

單向數(shù)據(jù)流是什么意思?

為什么是單向的?不能是雙向的數(shù)據(jù)流嘛?

單向數(shù)據(jù)流有什么作用呢?

面試題一旦拆開，你會發(fā)現(xiàn)面試官問出來的幾乎每一個詞都需要解釋。寶兒，這個問題，真不簡單啊!

那么，我應該怎么解答呢?

說實話，并沒有標準答案，因為數(shù)據(jù)流這個問題，涉及到了框架本身的設(shè)計理念，需要你對框架的設(shè)計有深入理解，你要站在框架作者的角度看待問題;但是，對于初學者來說，這個問題顯然超綱了。

完犢子，那么重要，我又學不了是嘛?不是，你需要學很多遍，這只是第一遍。

開始之前，我們先來看一段普通的 JS 代碼：

 
 
 
 

  
  
  
  
var datas = {
  
  
  
  
  name:'lisi',
  
  
  
  
  age:18
  
  
  
  
}
  
  
  
  

  
  
  
  
var l1 = datas
  
  
  
  
var l2 = l1
  
  
  
  
var l3 = l2
  
  
  
  

  
  
  
  
l1.age=20
  
  
  
  
console.log(l1.age,l2.age,l3.age) // 20 20 20
  
  
  
  

  
  
  
  
l3.age=26
  
  
  
  
console.log(l1.age,l2.age,l3.age) // 26 26 26
 
 
 
 

你會發(fā)現(xiàn)，無論我們是修改那個變量的 age 屬性，其他數(shù)據(jù)都會跟著改變，原因也很簡單，大家都是共享一個內(nèi)存數(shù)據(jù)的。

但是，賦值的前后邏輯上，我們可以將 L3 節(jié)點看作孫子，L2 節(jié)點看做父親，L1 節(jié)點看做爺爺。

任意一個節(jié)點的數(shù)據(jù)改變之后，所有節(jié)點的數(shù)據(jù)都會跟著改變，我們就可以把這種現(xiàn)象看做是數(shù)據(jù)在“變量節(jié)點”上的流動。

但是，這樣的數(shù)據(jù)流動，是雙向的，拿 L2這個節(jié)點來說，只要數(shù)據(jù)改變，上層的 L1 節(jié)點和下層的 L3 節(jié)點都會跟著改變。

雖然這個例子并不恰當，但是回到 React 組件中，道理是一樣的，所謂數(shù)據(jù)的流動就是數(shù)據(jù)在組件間的傳遞。前面我們用了很大的篇幅講解的組件間的值傳遞，其實就是在講數(shù)據(jù)流這個概念的具體用法。

那么，我們在數(shù)據(jù)流前面加上一個“單向”的定語，叫 “單向數(shù)據(jù)流” 是什么意思呢?其實現(xiàn)在你理解起來很簡單，就是數(shù)據(jù)在某個節(jié)點被改變后，只會影響一個方向上的其他節(jié)點。

那所謂的自頂向下又怎么解釋呢?

更簡單了，就是數(shù)據(jù)只會影響到下一個層級的節(jié)點，不會影響上一個層級的節(jié)點。用上面的例子解釋，就是如果 L2 數(shù)據(jù)改變，只會影響到 L3，不會影響到 L1 或者其他節(jié)點。

這就是 “自頂向下的單向數(shù)據(jù)流”。那么我們在 React 框架中，就可以明確定義單向數(shù)據(jù)流：規(guī)范數(shù)據(jù)的流向，數(shù)據(jù)由外層組件向內(nèi)層組件進行傳遞和更新。

那么，在具體的代碼實現(xiàn)中，是怎么體現(xiàn)出來的呢?翠花，上代碼：

圖有點看不清，接下來，我們看具體代碼的演示：

 
 
 
 

  
  
  
  
// ========== App============
  
  
  
  
import React, { Component } from'react'
  
  
  
  
import C1 from'./C1'
  
  
  
  
exportclass App extends Component {
  
  
  
  
  state = {
  
  
  
  
    name:"xiling"
  
  
  
  
  }
  
  
  
  
  render() {
  
  
  
  
    return (
  
  
  
  
      

  
  
  
  
        
App
  
  
  
  
        
 APP 中的值：
  
  
  
  
          
  
  
  
  
            {this.state.name}