攒点题react,仅作记录巩固.
1. 什么是Fiber架构？它有什么特点和优势？
2. 说一下React的Reconciliation算法是如何工作的？
引用文章 react fiber源码解析 React Fiber 源码解析 - 掘金 (juejin.cn)
3. React元素、虚拟DOM、组件、实例分别是什么？它们之间的关系是怎么样的？
React 元素：它是 React 应用程序中的最小单位，描述了组件要渲染的内容。React 元素本质上是一个普通的 JavaScript 对象，包含了要渲染的组件名、组件的属性和子元素等信息，不可更改。React元素是描述 UI 的瞬时状态的快照。
虚拟 DOM：它是 React 使用的一种有效的 DOM 操作方式，其实就是将 React 元素转换为平台无关的 JavaScript 对象。虚拟 DOM 的作用是尽量减少 DOM 操作，提高页面渲染性能。React 利用虚拟 DOM 对比新旧 DOM 树的差异，从而只重新渲染不同的部分，减少浏览器的重绘和重排操作。
组件：是由 React 元素组成的可复用的 UI 部件。可以通过组合 React 元素和其他组件来构建更复杂的 UI，是实现代码复用和分离关注点的重要手段。
实例：React只有一个入口组件，即使用ReactDOM.render（）渲染的入口组件，其对应的实例称为根实例。当修改状态时，React会在原有的虚拟DOM树上复制一份（记为cp），在这份副本上进行修改并生成新的页面组件DOM结构，比较cp与原有虚拟DOM树上的组件树对应节点进行状态和属性的比较，找到差异后进行更新页面，这时组件状态发生变化，根据组件状态，React会重新生成cp来涵盖最新的状态。即实例会随着状态的变化被重复生成。
简单来说，React 元素描述了页面上要渲染的内容，虚拟 DOM 是实际渲染的依据，组件是 React 元素的组合，实例则是组件或根组件在运行时的状态。它们之间是一种包含关系，即“React元素 → 虚拟DOM → React组件 → 实例”。
4. React组件的生命周期钩子函数有哪些？它们在什么时候被执行？
5. React中如何实现双向数据绑定？
有以下三种方式可以实现类似双向数据绑定的效果：
使用表单元素的受控组件：通过将表单元素的 value 或者 checked 属性绑定到 state 上，并通过 onChange 事件处理器来更新 state，从而实现双向数据绑定。
使用第三方库：比如 React-Redux 等状态管理工具，可以实现类似双向数据绑定的效果。
使用自定义组件：自定义组件中可以通过 props 传递 value 和 onChange 回调函数，从而实现双向数据绑定。
其中第一种方式是 React 官方推荐的方式。由于 React 数据流的单向性，以上三种方式的实现都不是真正的双向数据绑定，而是通过一些技巧模拟实现双向数据绑定的效果。
6. vue和react的diff方法有何不同
答: 虽然Vue和React都采用了Virtual DOM技术，但是它们的diff算法实现有些不同。
Vue的diff算法：
Vue的diff算法是双向查找，即从组件树的根节点开始，在新旧节点中找到能够配对的节点，并且尽可能地复用旧节点，从而减少DOM更新次数。这种算法的优势是可以更好地维护组件树的稳定性，避免不必要的组件销毁和重建。但是由于查找过程相对复杂，可能会影响性能。
React的diff算法：
React的diff算法是单向查找，即从Virtual DOM树的根节点开始，在新旧节点中查找深度优先遍历顺序下的第一个不匹配的节点，然后直接替换该节点以及其子树的所有节点，从而保证简单且高效的更新。这种算法的优势是性能高，但是相对不太稳定，容易出现组件销毁和重建。同时，React采用了key属性来优化diff算法，使得在子节点排序或者数量变化时速度更快。
总的来说，Vue和React的diff算法都有各自的优势和劣势，因此在具体使用时需要根据项目的需求来选择合适的技术栈。
7. 说一下React中的事件机制，以及在React中怎么处理事件？
React事件机制的一些特点：
React 事件是 React 元素特有的，与原生 DOM 事件并不完全相同，但是可以通过合适的转换将 React 事件转换为原生 DOM 事件。
React 事件是以驼峰式命名的方式来绑定的，而不是以小写的方式。
React 事件是通过事件委托实现的，如果某个组件的子元素触发了事件，则一直冒泡到最上层的组件，再由最上层的组件来处理事件。
在 React 中，可以使用如下方式来处理事件：
使用属性绑定事件处理器：通过定义类方法 handleClick()，然后在组件中使用类似于onClick={this.handleClick}的方式来绑定事件处理器，React 会自动绑定 this。
使用箭头函数绑定事件处理器：可以直接使用箭头函数的方式来绑定事件处理器，如：onClick={()=>this.handleClick()}，但是这种方式会导致组件在每次渲染时都生成一个新的箭头函数，可能会对性能产生影响。
使用 bind() 方法绑定事件处理器：通过使用bind()方法来手动绑定事件处理器函数的 this，如：onClick={this.handleClick.bind(this)}，但是和箭头函数方式一样，这种方式也会导致每次渲染时都生成一个新的函数对象，会有一定的性能开销。
8. 什么是React的Context API？它有哪些用途？
React 的 Context API 是一种在组件树中传递数据的方式，可以让开发者避免通过 props 层层传递数据，并且可以让一些需要全局访问的数据变得更加容易管理。
Context API 将一个单独的 state 对象分享给整个应用程序的组件树，可以让子组件获得父组件的状态，从而方便访问和修改。它的主要用途有以下几种：
1)避免 Props 层层传递：通过 Context API，父组件可以将整个应用程序需要的数据传递给 Context，子组件可以直接从 Context 中获取这些数据，避免了通过 props 层层传递数据的问题。
2)多语言支持：通过 Context API，可以实现多语言的支持，在应用程序中共享当前语言状态，从而让应用程序中的所有组件根据当前语言渲染出不同的界面。
3)主题支持：通过 Context API，可以实现主题支持，应用程序中的所有组件可以根据当前主题的状态实现不同的 UI 显示效果。
4)权限控制：通过 Context API，可以实现权限控制，应用程序中的所有组件可以共享当前用户的权限状态，从而实现相应的显示和操作。
使用 Context API 需要注意以下几点：
Context API 尽量用于全局数据，如应用程序设计、用户登录信息等。
不要滥用 Context API，只有当需要在多个组件之间共享数据时，才建议使用它。
Context API 会使组件之间的耦合度变大，从而降低了组件的可重用性，所以需要注意设计。
9. React中的setState方法是如何实现的？setState为什么要异步更新状态？
setState 是 React 中一个被广泛使用的方法，用于更新组件的状态。在 React 内部，setState 的实现是基于一些底层机制的，其中最重要的是实现了 React 的调度器 Scheduler 和任务调度优先级系统 Priority Level 。
具体来说，当调用 setState 时，React会将要更新的状态对象放入一个名为“更新队列（update queue）”的队列中，而不是立即更新组件的状态。每个更新对象都包含要更新的状态和一些优先级信息。此时，React 会调用 Scheduler，负责调度后续的更新流程。
Scheduler 的作用就是根据任务的优先级，将这些任务分为高、中、低三个优先级，并在合适的时候执行它们。React 使用一种叫做“时间切片（Time Slicing）”的技术，将可中断的任务拆分为块，并调度在空闲时间执行。这样能够更好地利用浏览器空余时间，并保证界面始终保持流畅。
为什么 setState 要异步更新状态？这是因为当一个组件中的多个 setState 方法被连续调用时，如果它们不是异步更新状态，那么在每一次更新状态之后，都会触发一次组件的重新渲染。这样会降低性能，造成不必要的开销。React 应用在大规模组件中需要特别注意这个问题。
因此，React 使用异步更新状态的机制，将多次状态更新合并成一个更新，只会触发一次组件的重新渲染，从而提高性能。同时，这种方式还允许 React 将一些任务进行优先级排序和分批处理，使得应用更加稳定。但是需要注意，由于异步更新状态，可能使得立即调用 setState 后无法立即获取到最新的状态值，需要等待下一次组件的重新渲染才能获取到。如果要确保获取到最新状态，请将操作放在 setState 的回调函数或者 useEffect 钩子中。
10. React中的hooks是什么？它们的原理是什么？React中有哪些预置的hooks？
可以看react-hooks小册,玩转 React Hooks - 小杜杜 - 掘金小册 (juejin.cn)
