子舒的博客
·
React 学习笔记（二）
内容提要
React 事件处理与 DOM 元素相似，但语法不同。事件命名采用小驼峰式，使用 JSX 时需传入函数而非字符串。React 通过 preventDefault 阻止默认行为，支持条件渲染和列表渲染，列表元素需设置唯一的 key 属性。
关键要点
-
React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
-
使用 JSX 语法时，需要传入一个函数作为事件处理函数，而不是一个字符串。
-
React 通过 preventDefault 属性阻止默认行为，不能通过返回 false 来阻止脚本执行。
-
React 中的条件渲染使用 if 运算符，根据状态更新 UI。
-
在列表渲染中，每个列表元素必须设置唯一的 key 属性，以帮助 React 识别元素的变化。
-
key 属性应在数组的上下文中指定，而不是在子组件内部指定。
延伸解读
React 事件处理的语法差异
在 React 中，事件处理的语法与传统 HTML 有显著不同。React 使用小驼峰式命名事件，并通过大括号传入函数，而不是字符串。这种变化使得事件处理更加灵活，但也要求开发者熟悉新的语法规则。
条件渲染的灵活性
React 的条件渲染允许开发者根据状态动态更新 UI。通过使用 if 语句，开发者可以轻松控制组件的显示与隐藏。这种灵活性使得 React 在构建复杂用户界面时更具优势。
列表渲染中的 key 属性
在 React 中，列表渲染时必须为每个元素指定唯一的 key 属性，以帮助 React 识别元素的变化。使用不当可能导致性能问题，因此建议使用数据中的唯一标识符，而非索引。
延伸问答
React 中事件处理的语法与传统 HTML 有何不同？
在 React 中，事件处理使用小驼峰式命名，并且需要用大括号包裹函数，而不是用字符串。
如何在 React 中阻止默认行为？
在 React 中，可以使用 preventDefault 方法来阻止默认行为，而不能通过返回 false 来实现。
React 中的条件渲染是如何实现的？
React 中的条件渲染使用 if 运算符，根据状态来更新 UI，返回不同的组件。
在 React 列表渲染中，为什么需要设置 key 属性？
key 属性帮助 React 识别哪些元素发生了变化，确保列表的高效更新。
如何在 React 中使用 map() 方法进行列表渲染？
可以使用 map() 方法遍历数组，将每个元素转换为 React 元素，并返回一个包含这些元素的列表。
React 中如何处理组件的状态更新？
通过 setState 方法更新组件的状态，React 会根据新的状态重新渲染 UI。
