React 基础面试题, React 的 JSX 和 HTML 有什么区别?

QA

Step 1

Q:: React 的 JSX 和 HTML 有什么区别？

A:: JSX 是 JavaScript 的一种语法扩展，它允许你在 JavaScript 代码中编写类似 HTML 的结构。JSX 需要通过 Babel 等工具编译成 React.createElement 调用，以便在浏览器中运行。而 HTML 是标记语言，不需要编译直接被浏览器解析。JSX 支持 JavaScript 表达式，允许你在模板中动态插入数据，而 HTML 则不支持这种特性。此外，JSX 的语法与 HTML 略有不同，例如 class 需要写成 className，for 属性需要写成 htmlFor。

Step 2

Q:: React 中的组件是什么？如何定义一个组件？

A:: React 中的组件是构建用户界面的基本单元。组件可以是类组件或函数组件。类组件是通过继承 React.Component 类定义的，而函数组件是普通的 JavaScript 函数，它们接收 props 作为参数并返回 React 元素。以下是一个函数组件的示例：

 
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Step 3

Q:: React 中的 state 是什么？如何管理 state？

A:: state 是 React 组件中的一种数据结构，用于表示组件的当前状态。state 是组件内部管理的，可以通过 setState() 方法更新。当 state 发生变化时，React 会重新渲染组件，以反映最新的状态。函数组件可以使用 useState 钩子来管理 state。例如：

 
const [count, setCount] = useState(0);

Step 4

Q:: 什么是 props？props 和 state 有什么区别？

A:: props 是 React 组件接收的数据，它们是从父组件传递来的。组件无法修改 props，只能读取它们。state 是组件内部的数据，可以由组件自身更新。props 用于组件之间的数据传递，而 state 用于组件内部状态的管理。

Step 5

Q:: React 中的生命周期方法有哪些？每个方法的作用是什么？

A:: React 的生命周期方法主要存在于类组件中，分为挂载、更新和卸载三个阶段。常见的方法有： - componentDidMount()``: 组件挂载后调用，通常用于网络请求或订阅事件。 - componentDidUpdate(prevProps, prevState)``: 组件更新后调用，用于对比当前和之前的 props 或 state，以决定是否进行一些操作。 - componentWillUnmount()``: 组件卸载前调用，用于清理定时器、取消订阅等。

用途

面试这些内容的目的是为了评估候选人对 React 框架基础知识的掌握情况。在实际生产环境中，这些知识对于开发健壮且高效的 React 应用至关重要。了解 JSX 与 HTML 的区别有助于编写更清晰的代码，而理解组件、state 和 props 则是构建复杂用户界面的关键。此外，熟悉生命周期方法可以帮助开发者在组件的不同阶段执行特定操作，从而提升应用的性能和可维护性。\n

相关问题

🦆

如何在 React 中处理事件?▷

在 React 中，事件处理函数可以通过 JSX 语法直接绑定到元素上，例如：

 
<button onClick={handleClick}>Click me</button>

React 的事件处理器命名方式采用驼峰命名法，例如 onClick、onChange。处理函数一般作为组件的方法定义，并通过 this 关键字访问组件的 state 或 props。

🦆

React 中的虚拟 DOM 是什么?为什么要使用虚拟 DOM?▷

虚拟 DOM 是 React 使用的一种轻量级 JavaScript 对象，它是实际 DOM 的抽象表示。React 使用虚拟 DOM 来提高性能：当组件的 state 或 props 发生变化时，React 会先在虚拟 DOM 中更新视图，再与实际 DOM 进行对比（diffing），最后仅更新实际需要变更的部分。这种方式可以避免频繁的 DOM 操作，提高渲染效率。

🦆

React 中的条件渲染和列表渲染如何实现?▷

条件渲染可以使用 JavaScript 的条件语句，如 if-else、三元运算符来决定是否渲染某个组件。例如：

 
{isLoggedIn ? <LogoutButton /> : <LoginButton />}

列表渲染可以使用数组的 map 方法，将每个元素映射为 React 元素。例如：

 
const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);

🦆

什么是 React 中的 Context API?如何使用?▷

Context API 是 React 提供的一种方式，用于跨组件树传递数据，而不需要逐层通过 props 传递。Context 通过 React.createContext 创建，提供者 (Provider) 用于传递数据，消费者 (Consumer) 用于读取数据。例如：

 
const MyContext = React.createContext('defaultValue');
<MyContext.Provider value={/* some value */}>
  <MyContext.Consumer>
    {value => /* render something based on the context value */}
  </MyContext.Consumer>
</MyContext.Provider>

🦆

什么是 React 中的高阶组件 HOC?▷

高阶组件 (HOC) 是一个函数，它接收一个组件作为参数并返回一个新的组件。HOC 通常用于逻辑复用。例如，可以通过 HOC 实现权限校验、日志记录等功能，而不需要修改原有的组件。