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={