3、React开发：从组件创建到JSX代码编写

React开发：从组件创建到JSX代码编写

1. React组件创建与问题解决

1.1 组件显示故障及原因

在开发过程中，经过一段时间后，组件显示可能会出现故障，在控制台能看到 “count” 变量值重复显示。这是因为 setCount() 函数更新响应式变量时，会触发 Counter 组件重新显示。每次 “count” 变量修改， Counter 组件更新， Counter() 函数重新执行，进而执行 setInterval() 指令开启新的定时器，导致 setInterval() 函数多次执行，计数器同时多次显示。

1.2 使用 useEffect() 方法解决问题

1.2.1 useEffect() 方法介绍

useEffect(callback) 方法可将一组指令分组，在组件每次显示时执行，包括首次显示或后续响应式变量修改时的更新。在其回调函数中可指定每次组件更新时要执行的操作。若 useEffect() 方法返回一个回调函数，该回调函数中的操作会在每次组件更新前执行。

1.2.2 代码示例

import { useState, useEffect } from "react";
function Counter(