翻译|A Visual Guide to State in React

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

React的"state"概念是比较难学的内容,不只仅是由于React中放置了state,而是实际上,React是所以而生存. Redux也和React的state直接相关. 我但愿在本文中能把一些困惑的内容讲清楚

你一直在使用的这个词...

实际上,这个词"state"有点模棱两可.某种意义上,"state"意思是当前屏幕上的数据表现. 它能够是"loading" 状态,或者是一个"error" 状态. 这里的解释和React里的state解释还不太同样.

从React的角度上,"state"是一个表明了应用中能够变化的部分.每一个组件都在this.state中保存了本身的state

简而言之,若是须要应用能够作任何事-若是想添加交互,添加和删除内容,输入输出日志-都要包含在state中.

React的state是什么样子

假设你有这样一个应用,在特定的时间,以下图:

看这张图,挑出全部能够改变的部分(基本上包含了全部的东西)

如今咱们能够给这些内容定义名字(时间,电池用量,室内温度,室外温度),用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的用途.

注意一点,字段没有和UI彻底契合. 不要紧,日期很容易格式化,能够用最大值这最小值画出图形的尺度,等等.

这一点保持不变:改变了state对象就会改变app的表现.

读者 foobarwtf指出 min和max不会改变,由于他们从不改变,为何还要在state中出现? 常见的作法是从服务器获取响应输入到state.若是你远程获取当前温度数据,数据就包含了min,max.最好和state中其余数据一块儿保存. 由于看起好像数据是固定不变的.可是如何服务器改变了标准怎么处理? 若是用户使用了一个200A的电力系统?等等问题.

因此:state一般保存这个能够变化的东西,也能够放一些从服务器得到的易改变的信息.

如何对State进行修改

若是state中任何一项发生变化,例如温度飙升到75°,应用应该刷新反映出变化.这就是React根据state所作的工做:从新渲染整个app

这里是state可能发生变化的缘由:

• 用户点击按钮
• 从服务器得到了数据-websocket的信息,或者是以前请求返回的响应数据
• 定时器终止-或许是每5秒更新屏幕上的当前时间

那么,React是如何知道state发生改变的? 持续轮训变化?像Angular同样观察事件?不是,一点也不神奇.

React知晓State的变化是由于你在组件内部经过this.setState显式的告诉组件应该怎么更新.换句话说,没有什么魔法,React只是按照你设定的去作更新.

计数器中的State变换

上面的家庭检测应用是一个state实战的绝好实例,可是咱们会返回简单的"counter"应用,看看state是如何变化的.

这里是counter的工做方式:

• 数字显示从0开始
• 你点击按钮(会调用设定的handleClick函数)
• 计数器增长1(调用setState完成这个任务)
• React 根据state的变化从新渲染app

代码展现

快速浏览:

• React以对象的形式保存state
• 你能够经过调用setState来改变对象
• 每次调用setState时,React会从新渲染 这里有两个地方要注意:
• 不能直接用this.state,必定要用this.setState
• state的变化时异步的,因此若是你想从this.state中当即获取this.setState的变化,可能尚未反应出来.

用Debugger把代码可视化

细节,细节

在本文中,我说过state是一个描述整个app的单一对象-可是在实际中,它须要分红更小的片断. 最好的方法是把它们保存在"container"组件中,和"presentational"组件隔离.

若是你正在使用Redux,你实际就有一个描述整个app的大 state对象. Redux的基本作法就是保持一个大的表明整个应用的state, 接着reducer和mapStateToProps把它切分红每一个组件须要的块.

我但愿本文能让你理解state的内容.