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

简介

在上一篇中介绍了 React Hooks 的基本概念,初识 React Hooks - React 组件定义的变革,这一篇将介绍 useState Hook,使用它可以给函数式组件添加状态支持,另外还会介绍使用它的一些注意事项。

适用对象

本篇文章适用于以下读者

  • 熟悉 React 基础知识
  • 了解 class 组件的状态定义
  • 了解 React Hooks 的基本概念

示例

本文中的示例可点击以下按钮查看:

示例 1

Edit useState - seperate

示例 2

Edit useState - grouped

useState 使用方法

在本示例中,我们将展示一个正方形,然后通过设置 rotatecolor 来调整它的旋转角度和边框的颜色,再用一个按钮对旋转角度进行递增(每次 +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:rotatecolor。这个 hook 接收一个参数做为 state 的初始值,一开始正方形旋转 0 度,边框颜色为 #000000, 黑色。这个参数也可以是一个对象,但是 useState hook 更新状态时,不会像 class 组件那般会 shallow merge 所有的 properties,而是直接 替换 旧的状态为新的状态,所以需要使用 Object Spread Operator {...} 合并旧的状态。

此 hook 返回了一个数组,固定两个元素,第一个是状态的值,第二个是改变状态的函数。

JSX 代码即定义了一个正方形元素,并通过 borderColor 属性改变边框的颜色,transform: rotate(...) 改变旋转角度。然后通过两个 input 分别更新 rotatecolor 的值。

更新状态

在本例中,旋转和颜色状态的值通过两个事件处理函数进行更新:handleRotateChangehandleColorChange

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 代码各司其职。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
评论 6

打赏作者

峰华前端工程师

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值