React 面试必知必会第三天

React 面试必知必会 Day3

大家好，我是洛竹🎋，一只住在杭城的木系前端🧚🏻‍♀️，如果你喜欢我的文章📚，可以通过点赞帮我聚集灵力⭐️。

今天是React 面试必知必会的第三天，我们来聊一聊React 中的组件、虚拟 DOM、状态管理、路由、高阶组件、Redux 和 Context 等知识，帮助你更好地理解React 的工作原理和使用技巧。

1. 组件

组件是React 中最重要的概念之一，它可以将复杂的用户界面分解成更小的、可重用的部分，从而提高代码的可维护性和可读性。

组件可以分为两种类型：函数组件和类组件。函数组件是使用函数定义的，而类组件是使用class定义的。函数组件更简单，但功能有限，而类组件更复杂，但功能更强大。

2. 虚拟 DOM

虚拟 DOM 是React 中另一个重要的概念，它是一个内存中的数据结构，代表了UI的当前状态。当组件的状态发生变化时，React 会重新计算虚拟 DOM，并将其与上一个虚拟 DOM 进行比较，然后只更新那些发生变化的部分。

虚拟 DOM 的优点在于它可以大大提高React 的性能，因为它避免了直接操作真实的 DOM，从而减少了不必要的重绘和重排。

3. 状态管理

状态管理是React 中另一个需要掌握的知识点。React 中的状态可以分为两种类型：组件状态和全局状态。组件状态是属于该组件的私有状态，而全局状态是所有组件都可以访问的公共状态。

React 提供了多种状态管理方案，包括useState、useReducer和useContext。useState 是最基本的状态管理方案，它可以用来管理组件的简单状态。useReducer 是一个更高级的状态管理方案，它可以用来管理更复杂的状态。useContext 是一个用来共享全局状态的方案。

4. 路由

路由是React 中用来管理页面跳转的方案。React 提供了两种路由方案：HashRouter 和 BrowserRouter。HashRouter 是使用hash值来管理页面跳转的，而BrowserRouter 是使用HTML5 的History API来管理页面跳转的。

HashRouter 的优点在于它兼容性更好，因为它不需要服务器端支持。而BrowserRouter 的优点在于它性能更好，因为它不会产生额外的HTTP请求。

5. 高阶组件

高阶组件是React 中一种用来复用组件逻辑的方案。高阶组件是一个函数，它接受一个组件作为参数，并返回一个新的组件。新的组件拥有原组件的所有功能，并且还具有高阶组件添加的额外功能。

高阶组件可以用来实现很多功能，例如：

• 添加额外的生命周期方法
• 验证组件的props
• 注入依赖项
• 实现hoc等

6. Redux

Redux 是一个流行的状态管理库，它可以用来管理全局状态。Redux 的优点在于它具有良好的可扩展性和可测试性。

Redux 的核心概念包括：

• Store：存储全局状态的地方
• Action：用来更新store中状态的唯一途径
• Reducer：用来响应action并更新store中状态的函数

7. Context

Context 是React 中用来共享全局状态的另一种方案。Context 的优点在于它更简单、更轻量级。

Context 的核心概念包括：

• Provider：用来提供共享状态的组件
• Consumer：用来消费共享状态的组件

好了，以上就是React 面试必知必会的第三天的内容，希望对你有帮助。