首先搭建工程

在 src 目录下新建 components ，新建一个 Timer.js，Timer.css Timer.js

现在，如果你运行 app，浏览器中的一切好像跟之前一样。 但是，如果你将传递给 useState hook 的初始值从 10 改为其他（比如 15），你会看到 app 更新了，也就是说状态钩子起作用了！ 按键时更改状态 接下来，我们要在按按钮时升高或降低温度。 useState hook 有一个 setTemperatureValue 函数，可以修改温度值，所以我们可以在按钮的 onClick 事件中用到它。 首先把“+”按钮的代码修改成：

注意它是怎么调用 setTemperatureValue 函数的。获得当前温度值，加上 1，然后将其作为参数传递。 因为温度初始值是 10，加上 1 的话状态值就变成 11。再按一次按钮，状态值变成 12… 将“-”按钮的代码修改成：

和对“+”按钮的操作类似，不过这次是降低温度值。 现在我们的代码是这样的：

试着在浏览器运行代码，点击按钮，温度值会升高或降低。 基于状态修改颜色 接下来我们做点有意思的东西——根据温度的高低显示不同的背景色。 如果温度是 15℃ 或以上，背景色是红色；反之，背景色是蓝色。 在 CSS 里，我写了这两个类： .cold 将背景色设置为蓝色 .hot 将背景色设置为红色 将其中一个类添加至 temperature display div，会改变背景色，比如：

背景色是蓝色

背景色是红色 那么，怎么基于状态动态地应用这两个类呢？ 创建另一个状态钩子，存放 temperatureColor：

注意我们给 temperatureColor 状态对象设置初始值为 “cold”（因为初始温度值为 10，我们希望背景色是蓝色）。 然后我们使用模板常量动态地添加需要的类：

这样一来，创建一个字符串，动态应用 temperatureColor 变量。当 temperatureColor 变成 “hot” 的时候，组件会重新渲染，给 className 字符串添加 “hot” 类。 我们的代码目前是这样的：

将初始 temperatureColor 状态变量改为 “hot” 或 “cold”，显示板的背景色随之改变。 我们已经有一个 onClick 事件可更改 temperatureValue 的值，现在我们给这个事件增加新的逻辑。 目前 onClick 事件有一个内联函数。对于单行函数来说用内联函数比较好。但是如果是有不同逻辑的多行函数，最好是将函数放到 JSX 外面，让代码更清晰。 将下列代码粘贴到状态下面：

这里我们定义了两个函数，用于升高或降低温度。 接下来，修改按钮的 onClick 属性，调用这些函数：

我们的代码目前是这样：

注意其实没啥改变，我们只是重新构造了代码，为接下来的工作做准备。 现在就更容易为点击按钮事件添加逻辑了。 给 increaseTemperature 函数添加逻辑：

当我们点击按钮若干次，temperatureValue 等于或大于 15℃ 时，temperatureColor 变量会更改，组件重新渲染，给显示板添加 “hot” 类。 降低温度时的逻辑是类似的： app 最终的代码如下：