React 基础面试题, 为什么在 React 项目标签中使用 htmlFor 而不是 for?
React 基础面试题, 为什么在 React 项目标签中使用 htmlFor 而不是 for?
QA
Step 1
Q:: 为什么在 React 项目标签中使用 htmlFor 而不是 for？
A:: 在 React 中，for 是 JavaScript 的一个保留关键字，因此不能直接用作属性名。React 的 JSX 语法和 HTML 很相似，但 JSX 是 JavaScript 的扩展，所以为了避免冲突，React 使用 htmlFor 代替 for 来指定标签的目标输入元素。htmlFor 是标签（label）的属性，指向表单中关联的输入控件的 id，这使得表单的可访问性更强。
Step 2
Q:: 什么是 JSX？它如何在 React 中工作？
A:: JSX 是 JavaScript 的一种语法扩展，它允许我们在 JavaScript 中编写类似 HTML 的代码。JSX 代码在编译过程中会被转译为标准的 JavaScript 函数调用（例如 React.createElement）。这种方式让开发者可以在同一个文件中书写界面结构和逻辑代码，使得组件的开发更为直观和方便。
Step 3
Q:: React 中的虚拟 DOM 是什么？它如何工作？
A:: 虚拟 DOM 是 React 用于提高性能的一个概念。虚拟 DOM 是保存在内存中的一个轻量级的 DOM 表示，每次状态或属性变化时，React 会首先生成一个新的虚拟 DOM 树，然后通过高效的 diff 算法将其与先前的虚拟 DOM 树进行比较，找出需要更新的部分，并且只对真实 DOM 中的相应部分进行更新。这减少了直接操作 DOM 带来的性能开销。
Step 4
Q:: React 中的组件生命周期是什么？
A:: React 组件有一个生命周期，代表了从组件创建到销毁的整个过程。React 类组件提供了多个生命周期方法，例如 componentDidMount、shouldComponentUpdate、componentDidUpdate 和 componentWillUnmount，这些方法可以在组件的不同生命周期阶段执行特定的操作。随着 React 16.8 的推出，函数组件中的 Hook（如 useEffect）也能实现类似的生命周期管理。