React 基础面试题, React 组件推荐的命名规范是什么?为什么不推荐使用 displayName?

Step 1

Q:: React 组件推荐的命名规范是什么？

A:: React 组件推荐使用 PascalCase（即每个单词的首字母大写）进行命名。这是因为组件通常是作为 React 的自定义元素使用，遵循这种命名规范可以使代码更具可读性和一致性。PascalCase 也是社区和官方文档推荐的标准命名方式。此外，PascalCase 可以避免与 HTML 原生标签冲突，确保组件名称的独特性。

Step 2

Q:: 为什么不推荐使用 displayName？

A:: 虽然 displayName 可以显式指定组件的名称，特别是在调试或错误追踪时很有帮助，但它不是必须的。使用 displayName 的一个主要缺点是，它增加了代码的维护负担，特别是在组件重命名或重构时，容易出现不一致的情况。另外，现代的 React 开发工具，如 React DevTools，通常能够自动推断出组件的名称，因此大多数情况下不需要手动指定 displayName。

Step 3

Q:: React 中为什么建议将组件拆分为多个小的、可复用的组件？

A:: 将组件拆分为多个小的、可复用的组件可以提高代码的可读性、可维护性和测试性。小组件通常职责单一，容易理解和测试，并且可以在不同的地方复用，减少重复代码。同时，组件化设计有助于实现更好的分工协作，团队成员可以并行开发不同的组件。

Step 4

Q:: 在 React 中，组件的生命周期方法有哪些？如何使用？

A:: React 组件有一系列生命周期方法，用于管理组件在不同阶段的行为。常见的生命周期方法包括 componentDidMount、componentDidUpdate 和 componentWillUnmount。componentDidMount 在组件首次渲染到 DOM 后调用，常用于数据获取或订阅事件；componentDidUpdate 在组件更新后调用，用于处理依赖于更新后的状态或属性的逻辑；componentWillUnmount 在组件即将从 DOM 中移除时调用，用于清理资源或取消订阅。了解这些生命周期方法有助于管理组件的状态和副作用。

Step 5

Q:: React Hooks 是什么？为什么推荐使用？

A:: React Hooks 是 React 16.8 引入的一种特性，允许在函数组件中使用状态和其他 React 特性，如副作用。Hooks 的引入使得函数组件可以与类组件一样功能强大，但更加简洁和易于理解。常见的 Hooks 包括 useState、useEffect 和 useContext。Hooks 通过避免类组件的复杂性，提高了代码的可读性，并减少了函数间共享逻辑的复杂性。