3、React与JavaScript事件和状态的深入探究

React与JavaScript事件和状态的深入探究

在前端开发中，构建交互式组件是至关重要的。本文将深入探讨如何使用React的状态和事件来增强组件的交互性，以一个警报组件为例，详细介绍状态的定义、事件的处理以及自定义事件的创建。

1. React Props回顾

Props允许组件通过JSX进行配置，作为JSX属性传递。组件定义中以对象参数接收props，并在JSX中使用。例如，在警报组件中，我们可以通过props设置警报的类型、标题等。

2. 使用状态（State）

组件状态是一个特殊变量，包含组件当前状态的信息。状态可以用于控制组件的输出，当状态改变时，组件会重新渲染。

2.1 理解状态

状态没有预定义列表，需要根据组件需求定义。有些组件可能不需要状态，而状态是使组件具有交互性的关键部分。

2.2 使用 useState 定义状态

在React中，使用 useState 函数定义状态。其语法如下：

const [state, setState] = useState(initialState);

关键要点：
- 初始状态值可以传递给 useState ，若未传递则初始值为 undefined 。
- useState 返回一个包含当前状态值和更新状态值的函数的元组。 <