React Mastery 系列 — 第9天: 事件处理在 React 中 — 让应用程序互动

欢迎回到"反应大师"系列! 在上篇文章中,我们探索了反应渲染和组件生命周期. 我们学到了:是什么原因导致一个组件重新交接 如何反应对账工作 渲染与 DOM 更新的区别 如何使用 Hooks Now 处理生命周期行为 让我们学习反应应用程序如何响应用户的交互. 每个现代应用程序都取决于事件: 点击按键打入表格 选择选项 提交数据 Dragging and Dropping 要素 键盘快捷键 React提供了一个强大的事件系统来处理所有这些相互作用. 什么是事件处理? 事件处理是响应应用程序中的用户动作的过程. 例:例:用户点击"转会钱"按钮: 传统JavaScript vs React CentralJavaScript中的事件 您手动: 查找 DOM 元素附加事件听取者 管理更新 React React 直接附加 JSX 内的事件. React 管理内部的事件注册 。 反应事件 语法反应事件 使用:骆驼Case 为JSX表达式命名 函数 参考 HTML:反应 通知:处理 点击事件 例子:当用户点击:通过函数对调函数 A 是非常常见的初学者错误. 错误 在渲染过程中立即执行 。 正确反应仅在事件发生时调用函数 。 传递参数给事件处理器 有时需要传递额外信息 。 示例:不正确:正确:箭头函数会延迟执行直至点击发生. 事件对象反应自动提供事件对象. 示例:用法:事件对象包含以下信息: 目标元素 事件类型 鼠标 键盘位置 细节 形式 反应中的信息合成事件 不直接使用浏览器事件. 相反,React提供了一个名为"合成事件示例:输出:为什么React使用"合成事件"的包装? 好处: – 交叉浏览器一致性 – 浏览器之间相同的API – 更好的事件管理 – 更好