React面试题(一)

1. react的优缺点

   1. 优点
      1. 虚拟DOM：减少对真实DOM的操作，提高性能。
      2. 组件化：将代码分成一个个小的、可复用的组件，利于管理、维护。
      3. 使用JSX：在React中可以嵌入HTML和JavaScript。
      4. 单向数据流：React的单向数据流使得应用的状态更改时，可以更容易地追踪和调试。
   2. 缺点
      • react主要关注UI构建，并不算是一个完整的框架，基本都需要加上reactrouter和flux/redux才能写大型应用。
      • 较高的入门曲线，需要理解组件、状态、属性、状态管理等概念。

2. vue和react有什么区别

   1. 数据流不同。Vue支持双向数据绑定，而React提倡单向数据流，即数据从父组件流向子组件，子组件不能直接修改父组件的数据。
   2. 性能优化不同。Vue通过其响应式系统和虚拟DOM自动优化性能，而React则需要开发者手动优化性能，例如通过使用shouldComponentUpdate或PureComponent。
   3. 状态管理不同。Vue通常使用Vuex进行状态管理，而React则更多使用Redux或Context API进行状态管理。
   4. 设计理念和架构不同。Vue最初是基于MVVM模式设计的，而React则更多地基于函数式编程和组件化思想；Vue提供了指令系统，使得模板更加易于编写和理解，而React则推荐使用JSX，它允许在JavaScript中编写类似HTML的模板语法。

3. 单向数据流

   1. 单向数据流是一种数据流动模式，数据只能从父组件流向子组件，子组件不能直接修改父组件的数据。这种模式有助于简化状态的管理和维护，降低了组件之间的耦合度，提高代码的可维护性和可预测性。

4. diff算法

   1. diff 算法是一种用于比较虚拟 DOM 树的两个版本之间差异的算法。这使得 React 可以高效地更新真实 DOM，只应用必要的更改，而不是重新渲染整个组件树。diff的三种对比方式。
   2. Element Diff: 标签对比，对比标签名、标签属性、标签内容。
   3. Component Diff: 组件对比，比较同一层级的相同组件类型间的差异。
   4. Tree Diff: DOM树对比，逐层对比。

5. 什么是虚拟dom

   1. 虚拟DOM（Virtual DOM）是一种抽象层，它使用普通的JavaScript对象（JS对象）来描述DOM（文档对象模型）结构。
   2. 虚拟DOM对象通常包含标签名、属性和标签内容等信息，这些信息与真实的DOM树结构相对应，但虚拟DOM不是真实的DOM节点，因此被称为"虚拟"。
   3. 虚拟DOM的实现基于一种设计思想，即通过比较新旧虚拟DOM树的差异，从而最小化对真实DOM进行的操作，以提高性能和效率。

6. react渲染dom的流程

   1. 首先使用JSX创建react元素结构，这个元素结构就是后期生成虚拟dom的模版；
   2. babel会把这些元素结构编译成react.createElement()
   3. React.createElement()会将这些元素转化成虚拟dom
   4. 最终render函数会将这些虚拟dom渲染成真实dom，插入文档中。
   5. 如果后续数据发生变化，React就会生成新的虚拟dom，通过diff算法同层对比新旧dom，重新渲染发生变化的dom。

7. react中key的作用

   1. key是列表通过map循环时给循环标签添加的属性，用于标记每一个循环元素。
   2. 在列表数据更新时，react可以通过key可以判断元素是新创建的还是被移动的元素，从而减少不必要的元素渲染。
   3. 如果使用index作为key值，当我们改变列表元素的顺序时，就会导致该元素后面的所有元素的key发生变化，元素也会重新渲染，

8. 什么是受控组件和非受控组件

   1. 受控组件：指的是受react状态控制的表单控件，通过setState来驱动数据变化，需要绑定onChange和value属性。
   2. 非受控组件：指的是不受react状态控制的组件，表单数据由dom本身处理。非受控组件可以通过ref访问dom获得表单的值。

9. 有状态组件和无状态组件

   1. 有状态组件：也被称为类组件，通过class类定义，拥有自己的状态数据，生命周期函数，适用于处理各种业务逻辑。
   2. 无状态组件：也被称为函数组件，没有自己的状态数据，生命周期函数，渲染结果由props决定，一般仅用于展示数据。

10. 组件之间的通讯方式有哪些

    1. 父子传值\子父传值\Context上下文传值\redux\路由传值

11. 路由跳转时如何传递数据

    1. 通过url的?传值，可以通过useSearchParams.get()或者location.query获取
    2. 通过url的/传值，可以通过useParams()获取
    3. 通过query对象传值，可以通过useLocation.query获取
    4. 通过state传值，可以通过useLocation.state获取

12. 什么是高阶组件(HOC)

    1. 高阶组件是一个函数，它接收一个组件作为参数，并返回一个新的组件，这个新的组件可以对原组件进行扩展或增强，例如添加一些通用的逻辑、状态、行为等。

    2. 高阶组件的作用：

       1. 代码复用：通过高阶组件可以将共享逻辑抽离出来，避免重复代码。
       2. 渲染劫持：高阶组件可以修改传入组件的React元素树。
       3. 状态抽象和操作：高阶组件可以管理状态，并将其通过props传递给被包装的组件。
       4. Props操作：可以用来添加、修改或删除传递给被包装组件的props。

    3. 高阶组件的实现方式：

       1. 属性代理：通过props将新的属性传递给被包裹的组件。
       2. 反向继承：通过继承被包裹的组件，可以覆盖或增加它的生命周期方法和渲染函数。接收一个组件作为参数，返回一个新的组件并继承这个组件，在新的组件中可以覆盖或增加这个组件的生命周期方法。
          1. <PropsChildComponent />以标签形式嵌入组件。外部组件可以调用被继承组件的方法。但不能将被继承的 state 和 钩子覆盖掉。
          2. super.render()嵌入组件。外部组件的 state 可以将被继承组件的 state 和 钩子函数彻底覆盖掉。同时，外部组件也可以调用被继承组件的方法。

13. 什么是渲染劫持

    1. 一般通过高阶组件（HOC）来实现，高阶组件可以在组件的render函数中进行操作，从而控制原组件的渲染输出。渲染劫持的应用范围广泛，包括但不限于性能优化、状态管理、错误处理等。

14. react严格模式

    1. React的严格模式是一种用于识别和报告在开发过程中可能会引起问题的部分的模式。它不会在生产环境中运行，只在开发环境中进行检查。
    2. 开启严格模式：将<React.StrictMode>组件放在你的应用最外层的某个地方即可。
    3. 严格模式有哪些限制：

       1. 检测不安全的生命周期(如componentWillMount, componentWillReceiveProps, componentWillUpdate)使用。

       2. 识别不稳定的使用模式，如未使用的DOM节点、未使用的Refs。

       3. 识别可能导致性能问题的长时间渲染延迟。

15. 什么是jsx？jsx的特点

    1. JSX（JavaScript XML）是React中一种用于构建用户界面的语法扩展，它允许我们在JavaScript代码中编写类似HTML结构的代码。
    2. JSX的特点：
       1. 声明性：JSX提供了一种声明性的方式来描述用户界面的结构和外观，类似于编写HTML模板，使代码更易读、理解和维护。
       2. JavaScript表达式：在JSX中，可以直接嵌入JavaScript表达式，用花括号{}包裹。这样可以在标记内部进行动态计算和引用变量。
       3. 组件支持：JSX允许我们以标签形式使用自定义组件，将代码组织成可复用的组件，实现模块化开发。
       4. 属性传递：JSX中的标签可以带有属性，用于向组件传递数据或配置选项。
       5. 样式类名：为了与JavaScript语法保持一致，JSX中使用className来定义元素的样式类，而非class属性。
       6. 注释：JSX中可以使用JavaScript风格的注释，将注释内容用花括号包裹起来。
       7. 防止XSS攻击：JSX在渲染时会自动进行转义，避免了常见的跨站脚本攻击（XSS）安全漏洞。
    3. JSX注意事项：
       1. JSX必须有一个根节点，如果没有根节点，可以使用<></>或者<**Fragment>**替代所有标签必须形成闭合，成对闭合或者自闭合都可以
       2. JSX中的语法更加贴近JS语法，属性名采用驼峰命名法 class -> className click -> onClick
       3. JSX支持多行（换行），如果需要换行，需使用() 包裹，防止bug出现

16. 组件懒加载

    1. **什么是懒加载：**懒加载通常指的是代码层面的懒加载，即在需要时才加载 JavaScript 模块，而不是在页面初始加载时一起加载所有模块。类似于js中的异步任务。之所以需要懒加载，是因为在首屏同时加载过多的内容，会导致卡顿不流畅响应速度慢、用户等待时间过长等问题，对此可以使用懒加载机制来进行优化。
    2. 懒加载的优点：
       1. 减少初始加载时间： 将不必要的组件延迟加载可以减少初始页面加载时间，提高用户体验。
       2. 优化页面性能： 减少初始加载的资源量可以降低页面的网络请求和内存占用，优化页面性能。
       3. 提高用户体验： 使用懒加载可以更快地渲染页面内容，并减少用户等待时间，从而提高用户体验。
    3. 懒加载的使用
       1. const OtherComponent = lazy(() => import('./OtherComponent'));
          <Suspense fallback={<div>Loading...</div>}>
          <OtherComponent />
          </Suspense>
       2. lazy 函数接收一个 import() 表达式，并返回一个 React Element。
       3. Suspense 组件允许你指定在组件渲染之前显示的后备内容（fallback）。
       4. ./OtherComponent 是将被懒加载的模块的路径。

17. <></>和<Fragment>的作用

    1. 相同点。空白标签和Fragment标签既有标签容器的作用又不会生成额外的标签元素。

       1. 精简DOM结构：可以避免添加多余的DOM节点，从而减小页面的结构复杂度，提高性能。
       2. 优化渲染性能：不会创建额外的DOM节点，它可以减少Virtual DOM的比较和更新操作，从而提高组件的渲染性能。
       3. 更清晰的代码结构：我们可以更清晰地组织组件结构，将相关的子元素包裹在一起，使代码更易读、维护和理解。

    2. <></>和Fragment的区别

       1. Fragment标签支持能接受键值或属性，可以遍历循环渲染元素。<></>不能使用标签属性。

18. react16版本新增了那些内容

    1. Fiber 架构 ：引入了新的渲染机制。传统上，React 使用一种称为堆栈调和递归算法来处理虚拟 DOM 的更新，这种方法在大型应用或者频繁更新的情况下可能会产生性能问题。React Fiber 则是基于一种增量渲染的思想，它将更新任务分解成小的、可中断的单元，使得 React 在更新时可以更灵活地控制和切换任务，提高应用的响应性。

       1. 增量渲染： React Fiber 将更新任务拆分成多个小任务单元（称为 "fiber"），并使用优先级调度器来处理这些任务，以提高响应性和用户体验。

       2. 优先级调度： Fiber 引入了优先级概念，使 React 能够根据任务的优先级来决定任务的执行顺序，确保高优先级任务得到及时处理。

       3. 中断与恢复： React Fiber 允许在渲染过程中中断任务，然后在适当的时机恢复执行，从而避免了阻塞的情况。

       4. 任务取消： Fiber 具备任务取消的能力(shouldComponentUpdate或者React.PureComponent)，可以取消不必要的更新，提高性能。

    2. 引入了Portals（传送门），允许子组件渲染到父组件的 DOM 层级外的节点。

       1. 创建元素：在构造其中创建一个元素。this.el = document.createElement('div');

       2. 添加元素：document.body.appendChild(this.el);

       3. 移除元素：document.body.removeChild(this.el);

       4. 开启传送门：在render函数中return通过ReactDOM.createPortal创建的传送门元素。

    3. 引入了错误边界（Error Boundaries）的概念：允许组件捕获并显示子组件树中的JavaScript错误，而不会使整个应用崩溃。可以通过componentDidCatch函数来实现，它接收两个参数:error和info。error参数表示抛出的错误,info参数包含有关组件引发错误的组件堆栈的信息。

    4. 生命周期函数更改：componentWillMount 和 componentWillReceiveProps 被标记为不推荐使用，分别替换为 UNSAFE_componentWillMount 和 UNSAFE_componentWillReceiveProps。

    5. 支持自定义 DOM 属性的渲染，例如 data- 属性。

    6. 服务端渲染（Server-Side Rendering，SSR）得到改善，支持streaming和同步渲染。

    7. 引入了自动批量更新（Batching），减少了DOM更新次数，提高了性能。

19. react16.8新增了哪些内容

    1. Hooks。Hooks允许函数组件使用类组件的特性，如状态（state）和生命周期方法。有几种主要的Hooks：

       1. useState。用于在函数组件中添加和管理状态。
       2. useEffect。用于处理函数组件中的副作用，如数据获取和订阅。
       3. useContext。用于在函数组件中共享上下文。
       4. useReducer。用于简化状态管理。
       5. useMemo。用于缓存计算结果，提高性能。
       6. useCallback。用于缓存函数，同样用于提高性能。
       7. useRef。用于获取对子组件的引用。
       8. useDebugValue。用于在开发者工具中显示自定义的Hook调试信息。
       9. useTransition。用于在函数组件中实现异步状态更新。

    2. 自定义Hook。从React 16.8开始，可以创建自定义Hook，这些Hook可以捕获额外的逻辑并在多个组件之间重用。

    3. 性能改进。Hooks的出现减少了不必要的生命周期方法的使用，使得代码更加简洁，同时提高了虚拟DOM的diff算法效率，从而提高了页面渲染速度。

    4. 更好的开发者体验。React 16.8版本提供了更好的开发者工具支持，包括对Hooks的调试和监视。

20. react17新增了那些内容

21. react18新增了哪些内容

22. react19新增了哪些内容