React Hooks - useState 的使用方法和注意事项

简介

在上一篇中介绍了 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 代码各司其职。