2025React面试题集锦

1. React 是什么？它有哪些主要特点？

React 是由Facebook开发的开源JavaScript库，用于构建用户界面（UI），尤其适合开发复杂的单页应用（SPA）。
主要特点：

• 声明式编程：只需描述UI应该是什么样子（如return <div>Hello</div>），React会自动处理DOM更新，无需手动操作DOM。
• 组件化：将UI拆分为独立、可复用的组件（如按钮、表单），便于维护和复用。
• 虚拟DOM：React会在内存中维护一个与真实DOM对应的虚拟DOM，通过对比虚拟DOM的差异（Diffing算法），只更新必要的部分，提升性能。
• 单向数据流：数据通过props从父组件流向子组件，避免数据混乱，便于调试。
• 跨平台：基于React可扩展到移动端（React Native）、桌面端（Electron）等平台。

2. 什么是JSX？

JSX（JavaScript XML）是React中用于描述UI的语法扩展，允许在JavaScript中直接编写类似HTML的代码。
特点：

• 本质是React.createElement()的语法糖，最终会被Babel编译为JavaScript对象。
• 支持嵌入JavaScript表达式（用{}包裹），如<div>{user.name}</div>。
• 与HTML的区别：标签闭合（如<img />）、className替代class、htmlFor替代for等。
• 示例：

  const element = <h1>Hello, {name}</h1>; // JSX语法
  // 编译后等价于：
  const element = React.createElement('h1', null, `Hello, ${name}`);
  

3. 类组件和函数组件有什么区别？

维度	类组件	函数组件
定义方式	基于ES6类，继承React.Component	普通JavaScript函数或箭头函数
状态管理	使用this.state和this.setState	依赖Hooks（如useState）
生命周期	有内置生命周期方法（如componentDidMount）	用useEffect模拟生命周期
this绑定	需要处理this指向问题（如箭头函数绑定）	无this，更简洁
代码风格	较繁琐，适合复杂逻辑	更简洁，推荐用于大多数场景
示例	class MyComponent extends React.Component { render() { return <div />; } }	function MyComponent() { return <div />; }

现状：函数组件+Hooks已成为React主流写法，类组件逐渐被替代。

4. React中的状态(state)是什么？如何更新状态？

state 是组件内部管理的动态数据，当state变化时，组件会重新渲染。

• 特点：私有性（仅组件内部可访问）、可变性（需通过特定方式更新）。
• 类组件中更新：使用this.setState()，是异步操作，会触发组件重渲染。

  this.setState({ count: this.state.count + 1 }, () => {// 回调函数中可获取更新后的stateconsole.log(this.state.count);
  });
  

• 函数组件中更新：使用useState Hook返回的更新函数，同样是异步的。

  const [count, setCount] = useState(0);
  setCount(prevCount => prevCount + 1); // 推荐使用函数形式，确保依赖前一次状态
  

5. React中的props是什么？

props（properties的缩写）是从父组件传递到子组件的数据，类似函数参数。

• 特点：只读性（子组件不能修改props，若需修改，需由父组件更新）、单向传递（父→子）。
• 示例：

  // 父组件
  function Parent() {return <Child name="Alice" age={18} />;
  }// 子组件
  function Child(props) {return <div>{props.name}, {props.age}</div>;
  }
  

• 可通过PropTypes或TypeScript定义props类型，增强代码健壮性。

6. 什么是受控组件和非受控组件？

• 受控组件：表单元素（如input、select）的值由React的state控制，通过onChange事件同步state和表单值。

  function Input() {const [value, setValue] = useState('');return <input value={value} onChange={(e) => setValue(e.target.value)} />;
  }
  

• 非受控组件：表单元素的值由DOM自身管理，通过ref获取值，类似原生HTML。

  function Input() {const inputRef