简介
在上一篇中介绍了 React Hooks 的基本概念，初识 React Hooks - React 组件定义的变革，这一篇将介绍 useState Hook，使用它可以给函数式组件添加状态支持，另外还会介绍使用它的一些注意事项。
适用对象
本篇文章适用于以下读者
- 熟悉 React 基础知识
- 了解 class 组件的状态定义
- 了解 React Hooks 的基本概念
示例
本文中的示例可点击以下按钮查看：
示例 1
示例 2
useState 使用方法
在本示例中，我们将展示一个正方形，然后通过设置 rotate 和 color 来调整它的旋转角度和边框的颜色，再用一个按钮对旋转角度进行递增（每次 +1）。
定义状态
首先我们看代码：
function App() {
const [rotate, setRotate] = useState(0);
const [color, setColor] = useState("#000000");
// ...其他代码，稍后提到
return (
<div className="App">
<div
className="Box"
style={{ transform: `rotate(${rotate}deg)`, borderColor: color }}
/>
<label>
旋转：
<input value={rotate} onChange={handleRotateChange} />
<button onClick={handleButtonClicked}>加1度</button>
</label>
<label>
颜色：
<input value={color} onChange={handleColorChange} />
</label>
</div>
);
}
CSS
.App {
font-family: sans-serif;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.Box {
width: 100px;
height: 100px;
border: 1px solid #000000;
margin: 24px 0;
}
label {
margin-top: 12px;
}
这里使用 useState 定义了两个 state：rotate 和 color。这个 hook 接收一个参数做为 state 的初始值，一开始正方形旋转 0 度，边框颜色为 #000000， 黑色。这个参数也可以是一个对象，但是 useState hook 更新状态时，不会像 class 组件那般会 shallow merge 所有的 properties，而是直接 替换 旧的状态为新的状态，所以需要使用 Object Spread Operator {...} 合并旧的状态。
此 hook 返回了一个数组，固定两个元素，第一个是状态的值，第二个是改变状态的函数。
JSX 代码即定义了一个正方形元素，并通过 borderColor 属性改变边框的颜色，transform: rotate(...) 改变旋转角度。然后通过两个 input 分别更新 rotate 和 color 的值。
更新状态
在本例中，旋转和颜色状态的值通过两个事件处理函数进行更新：handleRotateChange 和 handleColorChange：
const handleColorChange = event => {
const value = event.target.value;
setColor(value);
};
const handleRotateChange = event => {
const value = event.target.value;
setRotate(value);
};
两个处理函数的代码类似，首先获取用户输入的值，然后更新 state。有人可能好奇为什么不把 state 定义到一个对象中，然后使用同一个事件处理函数，这个我们会在后面的自定义 hooks 中讲到，目前只需要知道不属于同一组的逻辑最好分开定义，这样可以方便的抽离状态的管理逻辑，以进行复用，比如另一个组件也用到了旋转角度这个状态，那么我们不用再单独定义相应的处理函数。
状态依赖
如果本次的状态更新依赖于上一次最近的状态更新，那么我们可以给 setXXX 传递一个函数进去，函数的参数即为最后一次更新的状态的值，请看递增旋转角度的代码：
const handleButtonClicked = () => {
// 输入框的值会被转换成string，且有可能为非数字
setRotate(previous =>
!isNaN(parseInt(previous)) ? parseInt(previous) + 1 : previous
);
};
每点击一次按钮，就会在当前的旋转角度的基础上加 1。
注意事项
useState 的参数
useState 的参数可以是基本类型，也可以是对象类型，在更新对象类型时，切记要合并旧的状态，否则旧的状态会丢失，参看示例 2 的代码：
const [params, setParams] = useState({
rotate: 0,
color: "#000000"
});
const handleInputChange = event => {
const target = event.target;
setParams({
...params,
[target.name]: target.value
});
};
状态依赖
如果当前的状态需要根据最后一次更新的状态的值计算出来，则给更新状态的函数传递一个函数，此函数的第一个参数即为最后一次更新的值，然后把计算后的结果做为返回值返回出去。
总结
利用 useState hook 可以让函数式组件拥有状态管理特性，它与传统的 class 组件的状态管理类似，但是更加简洁，不用频繁的使用 this。在后面的文章中将会介绍到如何结合其他的 hooks 对业务逻辑进行抽离以使组件代码和 hooks 代码各司其职。
