5、React 组件事件处理与计数器功能实现

React 组件事件处理与计数器功能实现

1. 点击开始按钮启动周期性计数器

在之前的实现中，我们通过点击 “count+1” 按钮来修改计数器的值。现在，我们使用一个 “Start” 按钮来启动计数，直到达到最终值。当点击 “Start” 按钮时，它会消失，当计数器达到最终值时，按钮会再次出现，以便启动新的计数。

1.1 实现步骤

1. 引入新的响应式变量 ：我们引入一个名为 “start” 的新响应式变量，用于指示是否应显示 “Start” 按钮。当 “start” 为 true 时，显示按钮；当 “start” 为 false 时，隐藏按钮。
2. 初始化组件 ：在组件初始渲染时，“start” 被初始化为 true ，因此 “Start” 按钮会显示。当计数器开始向最终值计数时，“start” 被设置为 false ，按钮消失。
3. 使用 useEffect 启动计时器 ：我们使用 useEffect 方法在组件渲染或更新时执行操作。当 “start” 为 false 时，启动一个计时器，每秒递增计数器的值。

1.2 代码实现

import { useState, useEffect } fr