2026年大厂前端高频面试原题-React框架200题

49.说说你对React Router的理解？常用的Router组件有哪些？

50.说说ReactRouter有几种模式。以及实现原理？

51. 使用useState(const[test, setTest]=useState([])时，为么连续调用setTest({.test,newWalue})会出现值的丢..

52.实现一个useTimeout Hook

53.react中怎么捕获异常？

54. 最大子序和

55.说说 https 的握手过程

56.HTTP2中，多路复用的原理是什么？

57.说说你对”三次握手”、”四次挥手”的理解

58.如何确保你的构造函数只能被new调用，而不能被普通调用？

59.为什么推荐将静态资源放到cdn上？

60.说说React事件和原生事件的执行顺序

61.Vue2.0为什么不能检查数组的变化，该怎么解决？

62.说说Vue页面渲染流程

63. 请简述 ==的机制

64.怎么做移动端的样式适配？

65.说说sourcemap的原理?

66. vue中computedOwatch区别

67.什么是DNS劫持？

68.ME搂梯

69.怎么实现图片懒载？

70.HTTP报文结构是怎样的？

71.如果使用Vue3.0实现一个Modal，你会怎么进行设计？

72.js中数组是如何在内存中存储的？

73.setTimeout为什么不能保证能够及时执行？

74.说说对TypeScript中命名空间与模块的理解？区别？

75.说说对受控组件和非受控组件的理解，以及应用场景？

76.你在React项目中是如何使用Redux的？项目结构是如何划分的？

77.说说对Redux中间件的理解？常用的中间件有哪些？实现原理？

78.说说你对Redux的理解？其工作原理？

79.说说你对immutable的理解？如何应用在react项目中？

80.说说React Jsx转换成真实DOM过程？

81.说说你在React项目是如何捕获错误的？

82.说说React服务端渲染怎么做？原理是什么？

83.说说你对 typescript 的理解？与javascript 的区别？

fiber 架构的工作原理？

React 中的 Fiber 架构是一种新的协调算法，旨在提高 React 的性能和用户体验。它通过引入新的数据结构和机制，使得 React 能够更高效地处理 UI 更新。以下是 Fiber 架构的工作原理：

1. Fiber 数据结构

• Fiber 节点：Fiber 是一个表示组件的内部数据结构，每个 Fiber 节点对应一个 React 组件。它包含了组件的状态、更新信息和子组件的引用等。
• Fiber 树：Fiber 节点形成了一棵 Fiber 树，类似于旧版的虚拟 DOM 树。每个 Fiber 节点指向其父节点、子节点和兄弟节点。

2. 工作单元和增量渲染

• 工作单元：渲染过程被分解为多个工作单元，每个单元代表一个小的渲染任务。这样可以将渲染过程拆分成可中断的任务，以避免长时间的阻塞。
• 增量渲染：Fiber 允许将渲染任务拆分为增量的操作，逐步完成整个渲染过程。每次渲染会处理 Fiber 树的一部分，允许在任务之间插入中断点，从而提高了渲染的响应性。

3. 调度优先级

• 优先级调度：Fiber 引入了任务调度机制，允许根据任务的优先级来决定渲染的顺序。高优先级的任务（如用户输入、动画）会优先处理，而低优先级的任务（如数据加载）会在空闲时间处理。
• 任务中断和恢复：Fiber 支持在渲染过程中中断并恢复任务。当重要任务需要处理时，当前的渲染任务可以被中断，待重要任务完成后再恢复继续。

4. 更新和协调

• 更新队列：每个 Fiber 节点都有一个更新队列，用于存储与组件相关的更新信息。更新队列可以包含多个更新，React 会根据更新的优先级和顺序进行协调。
• 协调过程：Fiber 通过对比新旧 Fiber 树来决定哪些部分需要更新。这一过程称为协调（Reconciliation），它会检查节点的变更，生成更新的补丁。

5. 渲染阶段和提交阶段

• 渲染阶段：在渲染阶段，Fiber 架构会计算出需要更新的部分，但不会立即更新 DOM。这一阶段主要用于计算新的 Fiber 树，并生成更新任务。
• 提交阶段：在提交阶段，Fiber 会将渲染阶段计算出的更新应用到实际的 DOM 上。这个阶段是同步的，确保所有的更改都被正确地应用。

6. 错误处理

• 错误边界：Fiber 提供了更好的错误处理机制，可以局部地处理渲染中的错误。即使在渲染过程中发生错误，也能保证 UI 的部分更新和恢复。

你在React项目中是如何使用Redux的? 项目结构是如何划分的？

一、背景

redux是用于数据状态管理，而react是一个视图层面的库

如果将两者连接在一起，可以使用官方推荐react-redux库，其具有高效且灵活的特性

react-redux将组件分成：

• 容器组件：存在逻辑处理
• UI 组件：只负责现显示和交互，内部不处理逻辑，状态由外部控制

通过redux将整个应用状态存储到store中，组件可以派发dispatch行为action给store

其他组件通过订阅store中的状态state来更新自身的视图

二、如何做

使用react-redux分成了两大核心：

• Provider
• connection

Provider

在redux中存在一个store用于存储state，如果将这个store存放在顶层元素中，其他组件都被包裹在顶层元素之上

那么所有的组件都能够受到redux的控制，都能够获取到redux中的数据

使用方式如下：

<Provider store = {store}>
    <App />
<Provider>

connection

connect方法将store上的getState 和 dispatch 包装成组件的props

导入conect如下：

import { connect } from "react-redux";

用法如下：

connect(mapStateToProps, mapDispatchToProps)(MyComponent)

可以传递两个参数：

• mapStateToProps
• mapDispatchToProps

mapStateToProps

把redux中的数据映射到react中的props中去

如下：

const mapStateToProps = (state) => {
    return {
        // prop : state.xxx  | 意思是将state中的某个数据映射到props中
        foo: state.bar
    }
}

组件内部就能够通过props获取到store中的数据

class Foo extends Component {
    constructor(props){
        super(props);
    }
    render(){
        return(
         // 这样子渲染的其实就是state.bar的数据了
            <div>this.props.foo</div>
        )
    }
}
Foo = connect()(Foo)
export default Foo

mapDispatchToProps

将redux中的dispatch映射到组件内部的props中

const mapDispatchToProps = (dispatch) => { // 默认传递参数就是dispatch
  return {
    onClick: () => {
      dispatch({
        type: 'increatment'
      });
    }
  };
}
class Foo extends Component {
    constructor(props){
        super(props);
    }
    render(){
        return(
         
             <button onClick = {this.props.onClick}>点击increase</button>
        )
    }
}
Foo = connect()(Foo);
export default Foo;

小结

整体流程图大致如下所示：

三、项目结构

可以根据项目具体情况进行选择，以下列出两种常见的组织结构

按角色组织（MVC）

角色如下：

• reducers
• actions
• components
• containers

参考如下：

reducers/
  todoReducer.js
  filterReducer.js
actions/
  todoAction.js
  filterActions.js
components/
  todoList.js
  todoItem.js
  filter.js
containers/
  todoListContainer.js
  todoItemContainer.js
  filterContainer.js

按功能组织

使用redux使用功能组织项目，也就是把完成同一应用功能的代码放在一个目录下，一个应用功能包含多个角色的代码

Redux中，不同的角色就是reducer、actions和视图，而应用功能对应的就是用户界面的交互模块

参考如下：

todoList/
  actions.js
  actionTypes.js
  index.js
  reducer.js
  views/
    components.js
    containers.js
filter/
  actions.js
  actionTypes.js
  index.js
  reducer.js
  views/
    components.js
    container.js

每个功能模块对应一个目录，每个目录下包含同样的角色文件：

• actionTypes.js 定义action类型
• actions.js 定义action构造函数
• reducer.js 定义这个功能模块如果响应actions.js定义的动作
• views 包含功能模块中所有的React组件，包括展示组件和容器组件
• index.js 把所有的角色导入，统一导出

其中index模块用于导出对外的接口

import * as actions from './actions.js';
import reducer from './reducer.js';
import view from './views/container.js';

export { actions, reducer, view };

导入方法如下：

import { actions, reducer, view as TodoList } from './xxxx'