React Hooks - useState 的使用方法和注意事项(1)，web前端开发前景

• 示例
  
• useState 使用方法
  

• 定义状态

• 更新状态
  

• 状态依赖

• 注意事项
  

• 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 (
className=“Box”
style={{ transform: rotate(${rotate}deg), borderColor: color }}
/>

旋转：

加1度

颜色：

);
}
CSS
.App {
font-family: sans-serif;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.Box {