一、类组件和函数组件的区别（面试常考）

简单理解（所有同学都要掌握）

1、类组件有生命周期，函数组件没有
2、类组件需要继承 Class，函数组件不需要
3、类组件可以获取实例化的 this，并且基于 this 做各种操作，函数组件不行
4、类组件内部可以定义并维护 state， 函数组件都称为无状态了，那肯定不行。

二、react中样式污染产生的原因

React最终编译打包后都在一个html页面中，如果在两个组件中取一样类名分别引用在自身，那么后者会覆盖前者。默认情况下，只要导入了组件，不管组件有没有显示在页面中，组件的样式就会生效。也就是说并没有自己的局部作用域

三、如何解决react中的样式污染

1、手动处理 （起不同的类名，但是项目一大就会导致类名很乱，不利于团队协作）
2、CSS IN JS ： 以js的方式来处理css（推荐）

四、什么是CSS IN JS

CSS IN JS是使用 JavaScript 编写 CSS 的统称，用来解决 CSS 样式冲突、覆盖等问题。
CSS IN JS 的具体实现有 50 多种，比如：React常用（CSS Modules、styled-components）、 Vue常（<style scoped> 、css modules）等。

五、CSS module的实现原理

CSS Modules 通过对 CSS 类名重命名，保证每个类名的唯一性，从而避免样式冲突的问题。也就是说：所有类名都具有“局部作用域”，只在当前组件内部生效。在 React 脚手架中：文件名、类名、hash（随机）三部分，只需要指定类名即可 BEM

六、什么是合成事件

React 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。它根据 W3C 规范 来定义合成事件，兼容所有浏览器，拥有与浏览器原生事件相同的接口。

七、合成事件的优势

1、进行浏览器兼容，实现更好的跨平台
React 采用的是顶层事件代理机制，能够保证冒泡一致性，可以跨浏览器执行。React 提供的合成事件用来抹平不同浏览器事件对象之间的差异，将不同平台事件模拟合成事件。
2、避免垃圾回收
事件对象可能会被频繁创建和回收，因此 React 引入事件池，在事件池中获取或释放事件对象。即 React 事件对象不会被释放掉，而是存放进一个数组中，当事件触发，就从这个数组中弹出，避免频繁地去创建和销毁(垃圾回收)。

八、state同步还是异步的

分版本来讲，在 react17 中，setState 是批量执行的，因为执行前会设置 executionContext。但如果在 setTimeout、事件监听器等函数里，就不会设置 executionContext 了，这时候 setState 会同步执行。可以在外面包一层 batchUpdates 函数，手动设置下 excutionContext 来切换成异步批量执行。
在react 18里都是异步的

九、React Fiber 架构

一、概念（背）

Fiber是一个基于优先级策略和帧间回调的循环任务调度算法的架构方案。随着应用变得越来越大，整个更新渲染过程开始变得吃力，大量的组件渲染会导致主进程长时间被占用，导致一些动画或高频操作出现卡顿和掉帧的情况。而关键点，便是同步阻塞。在之前的调度算法中，React 需要实例化每个类组件，生成一棵组件树，使用 同步递归 的方式进行遍历渲染，而这个过程最大的问题就是无法 暂停和恢复。
解决方法：当遇到进程同步阻塞的问题时，任务分割、异步调用 和 缓存策略 是三个显著的解决思路。而 React Fiber 便是为了实现任务分割而诞生的。
Fiber 架构的核心思想就是 任务拆分 和 协同，主动把执行权交给主线程，使主线程有时间空档处理其他高优先级任务

二、架构背景（选背）

浏览器的渲染引擎是单线程，它将 GUI 描绘、时间器处理、事件处理、JavaScript 执行、远程资源加载通通放在一起。当做某件事，只有将它做完才能做下一件事。如果有足够的时间，浏览器是会对我们的代码进行编译优化（JIT）及进行热代码优化，一些 DOM 操作，内部也会对 Reflow（重绘）进行处理。 Reflow 是一个性能黑洞，很可能让页面的大多数元素进行重新布局。
解决思路
把渲染更新过程拆分成多个子任务，每次只做一小部分，做完看是否还有剩余时间，如果有继续下个任务；如果没有，挂起当前任务，将时间控制权交给主线程，等主线程不忙的时候再继续执行。这种策略叫做 Cooperative Scheduling（合作式调度），操作系统常用任务调度策略之一。
那么如何拆分成子任务？一个子任务多大合适？怎么判断是否还有剩余时间？有剩余时间怎么去调度应该执行哪个任务？没有剩余时间之前的任务怎么办？接下来整个 Fiber 架构就是来解决这些问题的。

十、为什么map的时候要加key

key是react用来追踪哪些列表的元素被修改，被添加或者是被删除的辅助标示。在开发过程中我们需要保证某个元素的key在其同级元素中具有唯一性。
在react的diff算法中react会借助元素的key来判断该元素是最新创建的还是被移动而来的，从而减少不必要的元素渲染。除此之外，react还要根据key来判断元素与本地状态的关联关系。

十一、组件传值

父组件往子组件传值：在父组件里的子组件标签上定义属性，在子组件里使用props接收
子组件往父组件传值：父组件给子组件传入一个方法，子组件接收这个方法，在对应的事件里触发接收这个方法，并且可以传参。子传夫本质上说是通过观察着去触发了一个回调函数。
兄弟 传值： 使用context上下文来传值。
祖孙传值：状态提升通过他么共有的父级来传值。

十二、什么是受控组件

在HTML中，表单元素的标签<input>、<textarea>、<select>等，这些值改变通常是根据用户输入进行更新。那么在React中，可变状态通常保存在组件的状态属性中，并且只能使用 setState() 进行更新， 如果这个组件里面存放着一些表单控件我们也可以手动的进行组件更新，那么以这种由React控制的输入表单元素而改变其值的方式，称为受控组件

十三、状态提升

在React框架中，当多个组件需要反映相同的变化数据，这时建议将共享状态提升到最近的共同父组件中去。一般我们将该操作称为状态提升。由此我们可以很清楚的明白React状态提升主要就是用来处理父组件和子组件的数据传递的；他可以让我们的数据流动的形式是自顶向下单向流动的，所有组件的数据都是来自于他们的父辈组件，也都是由父辈组件来统一存储和修改，再传入子组件当中。

十四、ReactDOM.createPorta

Portal 提供了一种将子节点渲染到存在于父组件以外 DOM 节点的方案。在 CSS 中，我们可以使用 position: fixed 等定位方式，让元素从视觉上脱离父元素。在 React 中，Portal 直接改变了组件的挂载方式，不再是挂载到上层父节点上，而是可以让用户指定一个挂载节点。一般用于模态对话框，工具提示、悬浮卡、加载动画等

十五、函数组件的生命周期

全文背诵：

十六、为什么react17后删除了那些生命周期

react 打算在17版本推出新的 Async Rendering，提出一种可被打断的生命周期，而可以被打断的阶段正是实际 dom 挂载之前的虚拟 dom 构建阶段，也就是要被去掉的三个生命周期。本身这三个生命周期所表达的含义是没有问题的，但 react 官方认为我们（开发者）也许在这三个函数中编写了有副作用的代码，所以要替换掉这三个生命周期，因为这三个生命周期可能在一次 render 中被反复调用多次。

十七、错误边界

是 React 组件，并不是损坏的组件树。错误边界捕捉发生在子组件树中任意地方的 JavaScript 错误，打印错误日志，并且显示回退的用户界面。错误边界捕捉渲染期间、在生命周期方法中和在它们之下整棵树的构造函数中的错误。

十八、context上下文

上下文的概念

上下文 (Context) 是 React 中一个重要的特性，它允许您在组件树中共享数据，而不必通过每个级别显式地传递参数。这是一种将数据传递到树中任意深度的组件的方法，无论其祖先组件是否知道该数据。

上下文的特点

1、跨级传递数据：Context 允许您在组件树中任意深度传递数据，而不必每层手动传递 props。
2、避免多余的层次：通过 Context，您可以避免将数据传递到组件树中不需要它的组件。
3、易于管理：Context 允许您在一个地方管理数据，而不必在每个组件中手动管理

上下文的使用场景

1、主题色切换。
2、多国语言切换。也就是国际化
3、祖孙组件之间的传值

十九、为什么会出现ref

在react典型的数据流中，props传递是父子组件交互的唯一方式；通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然，就像react官网所描述的一样，在react典型的数据流之外，某些情况下（例如和第三方的dom库整合，或者某个dom元素focus等）为了修改子组件我们可能需要另一种方式，这就是ref方式。

二十、什么是高阶组件

高阶组件（Higher-Order Component，HOC）是 React 中一种代码重用的模式，它是一个函数，接受一个组件作为参数，并返回一个新的组件。它的作用是对组件进行抽象，从而在不修改组件代码的情况下，扩展组件的功能。