https://www.freecodecamp.org/news/react-interview-questions-and-answers/

What is React?

English Answer: React is an open-source front-end JavaScript library for creating user interfaces. It is declarative, efficient, and flexible, and it adheres to a component-based approach, which allows us to create reusable UI components. Developers primarily use React to create Single Page Applications (SPAs) as it focuses solely on the view layer of MVC.

中文翻译： React 是一个用于构建用户界面的开源前端 JavaScript 库。它是声明式的、高效且灵活的，并遵循组件化开发模式，允许我们创建可复用的 UI 组件。开发者主要使用 React 来创建单页面应用 (SPA)，因为它专注于 MVC 架构中的视图 (View) 层。

Features of React

• English Answer:

  • Virtual DOM: React uses a Virtual DOM instead of the real browser DOM to optimize rendering performance.
  • Unidirectional Data Binding: It follows a one-way data flow, making code more predictable.
  • Cross-Platform: Using React Native, it can be used to build mobile applications for both iOS and Android.

  中文翻译：

  • 虚拟 DOM：React 使用虚拟 DOM 而非真实浏览器 DOM，以优化渲染性能。
  • 单向数据绑定：它遵循单向数据流，使代码逻辑更具可预测性。
  • 跨平台：通过 React Native，React 可以用于开发 iOS 和 Android 移动端应用。

What Does DOM Stand For?

The term "DOM" stands for Document Object Model and refers to the representation of the entire user interface of a web application as a tree data structure.

Types of DOM

We have two types of DOM which are the Virual DOM and the Real DOM.

Advantages and Disadvantages of React

Here are some of the advantages and disadvantages of React:

Advantages of React

1. It has a shorter learning curve for JavaScript developers and a large number of manuals, tutorials, and training materials are available because of its active community.
2. React is search engine friendly
3. It makes it easier to create rich UI and custom components.
4. React has quick rendering
5. The use of JSX allows us to write code that is simpler, more appealing, and easier to understand.

Disadvantages of React

1. Because React is a frontend library, other languages and libraries are required to build a complete application.
2. It can be difficult for inexperienced programmers to understand because it employs JSX.
3. Existing documentation is quickly out of date due to the short development cycles.

What is JSX?

JavaScript XML is abbreviated as JSX.

It allows us to write HTML-like structures directly in JavaScript code. It is a syntactic sugar that React transforms into standard JavaScript objects (React Elements). Browsers cannot read JSX directly, so it must be compiled by tools like Babel or SWC into React.createElement() calls.

For example:

1
const App = () => {
2
  return (
3
    <div>
4
       <h1>Hello World</h1>
5
    </div>
6
  )
7
}

JSX 代表 JavaScript XML。它允许我们在 JavaScript 代码中直接编写类似 HTML 的结构。它是一种语法糖，React 会将其转换为标准的 JavaScript 对象（React 元素）。浏览器无法直接读取 JSX，因此必须通过 Babel 或 SWC 等工具将其编译为 React.createElement() 调用。

Why can't Browsers Read JSX?

JSX is not a valid JavaScript code, and there is no built-in implementation that allows the browser to read and understand it. We need to transpile the code from JSX into valid JavaScript code that the browser can understand, and we use Babel, a JavaScript compiler/transpiler, to accomplish this.

Note: create-react-app uses Babel internally for the JSX to JavaScript conversion, but you can also set up your own babel configuration using Webpack.

What are Components?

English Answer (Optimized): A component is a self-contained, reusable code block that divides the UI into smaller pieces.

• Functional Components: Modern standard in React. They are simple JS functions that return JSX. Since React 16.8 (Hooks), they can manage state and side effects.
• Class Components: Older ES6 classes that extend React.Component. They require a render() method and handle lifecycle methods explicitly.

中文翻译： 组件是独立且可复用的代码块，用于将 UI 拆分为更小的单元。

• 函数组件：现代 React 开发的标准。它们是返回 JSX 的普通 JS 函数。自 React 16.8 引入 Hooks 以来，函数组件也可以管理状态和副作用。
• 类组件：继承自 React.Component 的 ES6 类。它们必须包含 render() 方法，并显式处理生命周期。

what's the difference between functional components and class components?

1. Declaration & Syntax (声明与语法)

• English: Functional components are plain JavaScript functions that accept props as an argument and return JSX. Class components are ES6 classes that extend React.Component and must implement a render() method.
• 中文： 函数组件是普通的 JavaScript 函数，接收 props 作为参数并返回 JSX。类组件是继承自 React.Component 的 ES6 类，且必须实现 render() 方法。

2. State Management (状态管理)

• English: Previously, functional components were "stateless." However, since React 16.8, they can manage state using the useState Hook. Class components manage state via the this.state object and update it using this.setState().
• 中文： 以前函数组件是“无状态”的。但自 React 16.8 起，函数组件可以使用 useState Hook 来管理状态。类组件则通过 this.state 对象管理状态，并使用 this.setState() 进行更新。

3. Lifecycle Methods (生命周期)

• English: Class components use explicit methods like componentDidMount, componentDidUpdate, and componentWillUnmount. Functional components use the useEffect Hook to handle all these lifecycle events in a unified way.
• 中文： 类组件使用明确的方法，如 componentDidMount（挂载）、componentDidUpdate（更新）和 componentWillUnmount（卸载）。函数组件则使用 useEffect Hook 以统一的方式处理这些生命周期事件。

4. "This" Binding (This 绑定)

• English: Class components require careful handling of the this keyword, often needing to bind event handlers in the constructor. Functional components do not use this, avoiding a lot of common bugs and complexity.
• 中文： 类组件需要小心处理 this 关键字，通常需要在构造函数中绑定事件处理程序。函数组件不使用 this，从而避免了许多常见的 Bug 和复杂性。

5. Logic Reuse (逻辑复用)

• English: Functional components allow for easier logic reuse through Custom Hooks. Class components usually rely on HOCs (Higher-Order Components) or Render Props, which can lead to "wrapper hell."
• 中文： 函数组件通过自定义 Hooks 使逻辑复用变得非常简单。类组件通常依赖 HOC（高阶组件）或 Render Props，这可能会导致“嵌套地狱”。

How to Use CSS in React

There are 3 ways to style a react application with CSS:

• Inline Styles
• External Styling
• CSS in JS

What are Props?

English Answer: Props (Properties) are used to pass data from a parent component to a child component. They are read-only and immutable within the child component, following a unidirectional data flow (parent to child).

中文翻译： Props（属性）用于将数据从父组件传递给子组件。它们在子组件中是只读且不可变的，遵循单向数据流原则（即数据只能由父传子）。

Example:

​x
1
function App({name, hobby}) {
2
    return (
3
      <div>
4
        <h1>My name is {name}.</h1>
5
        <p>My hobby is {hobby}.</p>
6
      </div>
7
    );
8
}
9
​
10
export default App;

What is State in React?

State is a built-in React object used to manage data locally within a component. Unlike props, state is mutable.

State（状态）是 React 内置的对象，用于在组件内部管理局部数据。与 Props 不同，State 是可变的。

How to Update the State of a Component in React

It is important to know that when we update a state directly, it won’t re-render the component – meaning we don’t get to see the update.

If we want it to re-render, then we have to use the setState() method which updates the component’s state object and re-reders the component.

English Answer: In functional components, we use the useState hook. It provides a state variable and a setter function.

• Direct Update: Used when the new state doesn't depend on the previous one.
• Functional Update: Crucial when the new state depends on the previous state. This ensures you are working with the most up-to-date value, avoiding issues with React's asynchronous batching.

代码示例 (Example):

xxxxxxxxxx
7
1
const [count, setCount] = useState(0);
2
​
3
// Direct Update
4
setCount(10);
5
​
6
// Functional Update (Safe way to increment)
7
setCount(prevCount => prevCount + 1);

中文翻译： 在函数组件中，我们使用 useState Hook。它提供一个状态变量和一个 setter 函数。

• 直接更新：当新状态不依赖于前一个状态时使用。
• 函数式更新：至关重要。当新状态依赖于前一个状态时，应传入一个函数。这确保了你操作的是最新的状态值，避免了 React 异步批处理带来的数据不同步问题。

需要注意的是：

English Answer:

1. Never Mutate Directly: Never do state.value = 10. React won't know the state changed, and the UI won't re-render.
2. Asynchronous Nature: State updates may be batched for performance. Don't rely on the state value immediately after calling the update function.
3. Triggers Re-render: Calling an update function tells React that the data has changed, triggering a call to the component's render logic.

中文翻译：

1. 严禁直接修改：永远不要执行 state.value = 10。React 无法感知这种变化，UI 也不会重新渲染。
2. 异步特性：为了性能，状态更新可能是批处理的。不要在调用更新函数后立即依赖该状态值。
3. 触发重渲染：调用更新函数本质上是通知 React 数据已变，从而触发组件渲染逻辑的重新执行。

How to Differentiate Between State and Props

State and props are JavaScript objects with distinct functions.

Props are used to transfer data from the parent component to the child component, whereas state is a local data storage that is only available to the component and cannot be shared with other components.

What is an Event in React?

In React, an event is an action that can be triggered by a user action or a system generated event. Mouse clicks, web page loading, key press, window resizes, scrolls, and other interactions are examples of events.

Example:

xxxxxxxxxx
5
1
// For class component
2
<button type="button" onClick={this.changeName} >Change Name</button>
3
​
4
// For function component
5
<button type="button" onClick={changeName} >Change Name</button>

How to Handle Events in React

Events in React are handled similarly to DOM elements. One difference we must consider is the naming of our events, which are named in camelCase rather than lowercase.

Example:

Function Component

xxxxxxxxxx
11
1
const App = () => {
2
   const handleClick = () => {
3
      console.log('Click happened');
4
   };
5
   return (
6
      <div>
7
         <button onClick={handleClick}>Click Me</button>
8
      </div>
9
   );
10
};
11
export default App;

How to Pass Parameters to an Event Handler

1. 使用箭头函数 (Arrow Function) —— 最推荐

这是最直观、最常用的方式。你在 onClick 中定义一个匿名的箭头函数，然后在函数体内部调用目标方法并传入参数。

• English: The most common way is to wrap the handler in an anonymous arrow function. This allows you to pass any arguments directly.
• 中文： 这是最常见的方法，通过在事件属性中包装一个匿名箭头函数，你可以直接传递任何参数。

xxxxxxxxxx
1
1
<button onClick={() => handleClick(id)}>Delete</button>

2. 使用 Function.prototype.bind

这是一种较为传统的方式，它会创建一个绑定了特定 this 和参数的新函数。

• English: You can use the bind method to pre-configure the function with specific arguments. The first argument of bind is the context (this).
• 中文： 你可以使用 bind 方法预先配置带有特定参数的函数。bind 的第一个参数是上下文（this）。

xxxxxxxxxx
1
1
<button onClick={handleClick.bind(this, id)}>Delete</button>

3. 使用 Data Attributes (数据属性) —— 性能优化方案

如果你在渲染超长列表，为了避免在每个循环中都创建新的匿名函数（这会产生轻微的内存开销），可以利用 HTML 的 data-* 属性。

• English: For performance-critical lists, you can store data in data-* attributes and retrieve them from the event object (e.target.dataset).
• 中文： 对于有性能瓶颈的长列表，你可以将数据存储在 data-* 属性中，然后从事件对象中获取（通过 e.target.dataset）.

xxxxxxxxxx
6
1
const handleClick = (e) => {
2
  const id = e.target.dataset.id;
3
  console.log(id);
4
};
5
​
6
<button data-id={id} onClick={handleClick}>Delete</button>

💡 关键对比与面试要点

What is Redux?

Redux is a popular open-source JavaScript library for managing and centralizing application state. It is commonly used with React or any other view-library.

What are React Hooks?

React hooks were added in v16.8 to allow us to use state and other React features without having to write a class.

They do not operate within classes, but rather assist us in hooking into React state and lifecycle features from function components.

When Did We Begin to Use Hooks in React?

The React team first introduced React Hooks to the world in late October 2018, during React Conf, and then in early February 2019, with React v16. 8.0.

Explain the useState() Hook

The useState Hook is a store that enables the use of state variables in functional components. You can pass the initial state to this function, and it will return a variable containing the current state value (not necessarily the initial state) and another function to update this value.

Example:

xxxxxxxxxx
11
1
import React, { useState } from 'react';
2
​
3
const App = () => {
4
  const [count, setCount] = useState(0);
5
​
6
  return (
7
    <div>
8
      // ...
9
    </div>
10
  );
11
}

Explain the useEffect() Hook

The useEffect Hook allows you to perform side effects in your components like data fetching, direct DOM updates, timers like setTimeout(), and much more.

This hook accepts two arguments: the callback and the dependencies, which allow you to control when the side effect is executed.

Note: The second argument is optional.

Example:

xxxxxxxxxx
20
1
import React, {useState, useEffect} from 'react';
2
​
3
const App = () => {
4
  const [loading, setLoading] = useState(false);
5
  
6
  useEffect(() => {
7
    setLoading(true);
8
    setTimeout(() => {
9
      setLoading(false);
10
    }, 2000);
11
  }, []);
12
  
13
  return(
14
    <div>
15
      // ...
16
    </div>
17
  )
18
}
19
​
20
export default App;

What's the Use of the useMemo() Hook?

The useMemo() hook is used in functional components to memoize expensive functions so that they are only called when a set input changes rather than every render.

Example:

xxxxxxxxxx
1
1
const result = useMemo(() => expensivesunction(input), [input]);

This is similar to the useCallback hook, which is used to optimize the rendering behavior of your React function components. useMemo is used to memoize expensive functions so that they do not have to be called on every render.

What Is the useRefs Hook?

English Answer: Refs (References) are used to access and interact with DOM nodes or React elements directly. While React usually encourages data flow via props, Refs are necessary for "imperative" actions such as:

• Managing focus, text selection, or media playback.
• Triggering imperative animations.
• Integrating with third-party DOM libraries (e.g., D3.js or Google Maps). In functional components, we use the useRef hook.

中文翻译： Refs（引用）用于直接访问和操作 DOM 节点或 React 元素。虽然 React 通常鼓励通过 Props 进行数据流转，但在某些“命令式”场景下 Refs 是必需的，例如：

• 管理焦点、文本选择或媒体播放。
• 触发命令式动画。
• 集成第三方 DOM 库（如 D3.js 或 Google Maps）。 在函数组件中，我们使用 useRef Hook 来实现。

Example:

xxxxxxxxxx
17
1
import React, {useEffect, useRef} from 'react';
2
​
3
const App = () => {
4
  const inputRef = useRef(null)
5
  
6
  useEffect(()=>{
7
    inputElRef.current.focus()
8
  }, [])
9
  
10
  return(
11
    <div>
12
      <input type="text" ref={inputRef} />
13
    </div>
14
  )
15
}
16
​
17
export default App;

What are Custom Hooks?

English Answer (Optimized): Custom Hooks are JavaScript functions whose names start with "use". They allow you to extract component logic into reusable functions. Custom Hooks can call other Hooks (like useState or useEffect). They solve the problem of logic duplication across components without adding unnecessary nesting to the component tree.

中文翻译： 自定义 Hooks 是名称以 "use" 开头的 JavaScript 函数。它们允许你将组件逻辑提取到可复用的函数中。自定义 Hooks 内部可以调用其他 Hooks（如 useState 或 useEffect）。它们解决了组件间逻辑重复的问题，且不会给组件树增加不必要的嵌套。

What is Context in React?

English Answer (Optimized): Context provides a way to share data (like themes, user info, or language settings) globally across a tree of components without having to pass props down manually through every level (a problem known as Prop Drilling). It consists of a Provider to wrap the parent tree and a useContext hook (or Consumer) to access the data in child components.

中文翻译： Context 提供了一种在组件树中全局共享数据（如主题、用户信息或语言设置）的方法，而无需手动通过每一层传递 Props（即解决 Props 钻取问题）。它由用于包裹父树的 Provider 和用于在子组件中访问数据的 useContext Hook（或 Consumer）组成。

What is React Router?

English Answer (Optimized): React Router is the standard library for routing in React applications. It enables navigation between different views (components) without refreshing the entire page, creating a seamless Single Page Application (SPA) experience. In modern versions (v6+), it uses a declarative approach with components like <Routes>, <Route>, and hooks like useNavigate.

中文翻译： React Router 是 React 应用中处理路由的标准库。它实现了在不同视图（组件）之间进行导航而无需刷新整个页面，从而创造无缝的单页面应用 (SPA) 体验。在现代版本 (v6+) 中，它通过 <Routes>、<Route> 等组件以及 useNavigate 等 Hook 采用声明式的方式进行路由管理。