子舒的博客
·
React 学习笔记（二）
💡
原文中文，约6800字，阅读约需17分钟。
📝
内容提要
React 事件处理与 DOM 元素相似，但语法不同。事件命名采用小驼峰式，使用 JSX 时需传入函数而非字符串。React 通过 preventDefault 阻止默认行为，支持条件渲染和列表渲染，列表元素需设置唯一的 key 属性。
🎯
关键要点
- React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
- 使用 JSX 语法时，需要传入一个函数作为事件处理函数，而不是一个字符串。
- React 通过 preventDefault 属性阻止默认行为，不能通过返回 false 来阻止脚本执行。
- React 中的条件渲染使用 if 运算符，根据状态更新 UI。
- 在列表渲染中，每个列表元素必须设置唯一的 key 属性，以帮助 React 识别元素的变化。
- key 属性应在数组的上下文中指定，而不是在子组件内部指定。
❓
延伸问答
React 中事件处理的语法与传统 HTML 有何不同？
在 React 中，事件处理使用小驼峰式命名，并且需要用大括号包裹函数，而不是用字符串。
如何在 React 中阻止默认行为？
在 React 中，可以使用 preventDefault 方法来阻止默认行为，而不能通过返回 false 来实现。
React 中的条件渲染是如何实现的？
React 中的条件渲染使用 if 运算符，根据状态来更新 UI，返回不同的组件。
在 React 列表渲染中，为什么需要设置 key 属性？
key 属性帮助 React 识别哪些元素发生了变化，确保列表的高效更新。
如何在 React 中使用 map() 方法进行列表渲染？
可以使用 map() 方法遍历数组，将每个元素转换为 React 元素，并返回一个包含这些元素的列表。
React 中如何处理组件的状态更新？
通过 setState 方法更新组件的状态，React 会根据新的状态重新渲染 UI。
➡️
