翻譯|A Visual Guide to State in React

時間 2019-12-04

標籤翻譯 visual guide state react 欄目 React 简体版

原文原文鏈接

原文在此:A Visual Guide to State in React javascript

React的"state"概念是比較難學的內容,不只僅是由於React中放置了state,而是實際上,React是所以而生存. Redux也和React的state直接相關. 我但願在本文中能把一些困惑的內容講清楚java

你一直在使用的這個詞...

實際上,這個詞"state"有點模棱兩可.某種意義上,"state"意思是當前屏幕上的數據表現. 它能夠是"loading" 狀態,或者是一個"error" 狀態. 這裏的解釋和React裏的state解釋還不太同樣.react

從React的角度上,"state"是一個表明了應用中能夠變化的部分.每一個組件都在this.state中保存了本身的stateweb

簡而言之,若是須要應用能夠作任何事-若是想添加交互,添加和刪除內容,輸入輸出日誌-都要包含在state中.服務器

React的state是什麼樣子

假設你有這樣一個應用,在特定的時間,以下圖: websocket

看這張圖,挑出全部能夠改變的部分(基本上包含了全部的東西)app

如今咱們能夠給這些內容定義名字(時間,電池用量,室內溫度,室外溫度),用JavaScript對象描述以下:異步

{
  currentTime: "2016-10-12T22:25:42.564Z",
  power: {
    min: 0,
    current: 37,
    max: 100
  },
  indoorTemperature: {
    min: 0.0,
    current: 72.0,
    max: 100.0
  },
  outdoorTemperature: {
    min: -10.0,
    current: 84.0,
    max: 120.0
  },
  tempUnits: "F"
}
複製代碼

這個對象描述了應用的整個state,也就是React state的用途.socket

注意一點,字段沒有和UI徹底契合. 不要緊,日期很容易格式化,能夠用最大值這最小值畫出圖形的尺度,等等.ide

這一點保持不變:改變了state對象就會改變app的表現.

讀者 foobarwtf指出 min和max不會改變,由於他們從不改變,爲何還要在state中出現? 常見的作法是從服務器獲取響應輸入到state.若是你遠程獲取當前溫度數據,數據就包含了min,max.最好和state中其餘數據一塊兒保存. 由於看起好像數據是固定不變的.可是如何服務器改變了標準怎麼處理? 若是用戶使用了一個200A的電力系統?等等問題.

因此:state一般保存這個能夠變化的東西,也能夠放一些從服務器得到的易改變的信息.