一些理论题

调和阶段setState干了什么？

在React的调和阶段（也称为更新阶段），当调用setState时，React会将传入的新状态与组件当前的状态合并，并重新计算组件的输出。然而，需要注意的是，在调和阶段，setState是“异步”的（在合成事件和生命周期钩子中），React会将这些更新收集起来，并在当前的事件处理或生命周期钩子完成后，统一进行DOM的更新。这有助于减少不必要的渲染次数，提高性能。

React合成事件的原理，有什么好处和优势？

原理：React的合成事件是一种封装了浏览器原生事件对象的高级事件机制。React在组件树中使用事件委托机制，将事件处理程序绑定在组件树的根节点上，统一管理和处理组件内部和外部的事件。当在组件中触发事件时，React会将该事件包装成一个合成事件对象，并在组件树中冒泡传递，直到根节点处。

好处和优势：
跨浏览器兼容性：React的合成事件可以屏蔽浏览器的差异，保证在各种浏览器上运行一致。
性能优化：React的合成事件可以对事件进行池化处理，重用事件对象，避免创建大量的事件对象，从而提高性能。
事件委托：通过事件委托机制，避免了多次绑定事件处理程序的问题，提高了效率。
支持自定义事件：React的合成事件可以支持自定义事件，开发者可以自定义组件事件，提供更多的自定义能力

对fiber架构的理解？解决了什么问题？

Fiber架构是React在16版本引入的一种新的协调算法和架构设计，旨在解决React应用在大型和复杂场景下遇到的一些性能问题和用户体验问题。

增量渲染和优先级控制：

在旧的栈式调和算法中，当React开始渲染一个组件树时，它会一直执行，直到渲染完整棵树或者中途被中断。这种方式可能导致渲染长时间阻塞主线程，影响用户体验。Fiber架构通过引入任务优先级和可中断性的概念，使得React可以在渲染过程中根据优先级动态中断和恢复，从而更好地响应用户输入和其他高优先级的任务

更好的可预测性和控制：

Fiber架构引入了更精细的渲染阶段和任务拆分，使得React能够更可靠地控制和管理更新过程，从而提供更一致的性能。开发者可以通过Suspense、Concurrent Mode等新特性来更精确地控制组件的加载和渲染过程，提升用户体验和性能。

更好的复用和渲染逻辑：

Fiber架构使得React能够更灵活地重用组件渲染逻辑，实现更高效的组件更新和重渲染。通过Fiber节点的链表结构和可重用的工作单元，React能够更智能地处理组件树的变化，减少不必要的DOM操作，提升性能。

更好的错误边界和调试支持：

Fiber架构为React引入了更好的错误处理机制和调试支持，使得开发者能够更容易地识别和修复组件更新过程中的问题，提升应用的稳定性和可维护性。

Fiber架构通过引入增量渲染、任务优先级控制、更细粒度的渲染阶段、重用机制和更好的错误处理，有效解决了React在大型和复杂应用中遇到的性能问题和用户体验问题，使得React应用能够更加流畅和可靠地运行

对redux中间件的理解？常用的中间件有哪些？实现原理？

常用的Redux中间件：

redux-thunk：处理异步操作的最基本中间件。允许action creator返回一个函数，而不是一个普通的action对象。
redux-saga：基于generator函数实现的高级异步操作中间件，可以处理复杂的异步流程，如串行/并行请求、取消请求、定时任务等。
redux-logger：用于在控制台打印每次dispatch的action及其对应的状态变化，便于开发者调试和追踪状态变化。
redux-thunk：用于处理异步操作的中间件，允许action creator返回一个函数而不是一个action对象。
redux-persist：用于将Redux的状态持久化到本地存储，以便应用在刷新后能够恢复之前的状态。
redux-devtools-extension：与浏览器开发者工具配合使用，提供时间旅行调试、状态快照等功能。

实现原理

Redux中间件本质上是对dispatch方法的包装，它拦截和处理action，然后再将处理后的action传递给下一个中间件或者reducer

React有哪些优化性能的手段？

使用生产环境构建：确保在部署到生产环境时使用了React的生产版本，它会进行代码压缩和性能优化。
减少不必要的渲染：利用React.memo、PureComponent或自定义shouldComponentUpdate来避免不必要的组件重新渲染。
列表渲染性能优化：在列表中使用唯一的key属性来标识每个子元素，帮助React识别每个元素的身份，减少重复渲染和操作的开销。
避免多层级的嵌套组件：尽量保持组件的层级扁平和简洁，以减少diff算法的复杂度和渲染时间。
懒加载组件：对于非首屏加载的组件，使用懒加载方式可以减少初始渲染体积，提高首屏加载速度。
使用合适的库和插件：选择合适且经过优化的第三方库和插件，避免过多冗余的库，以减少性能开销。
代码分割和懒加载：通过React.lazy()和Suspense组件实现代码分割和按需加载，进一步减小初始加载体积。

短轮询、长轮询和websocket的区别？

短轮询、长轮询和 WebSocket 是用于实现客户端与服务器之间实时通信的不同技术手段

短轮询：

工作原理：客户端定期向服务器发送 HTTP 请求，询问是否有新的数据。服务器在收到请求后立即返回当前的数据响应，无论是否有新数据可用。
特点：每次请求和响应都是独立的，服务器无需保持与客户端的长连接，因此适合用于频繁但实时性要求不高的场景。
缺点：频繁的 HTTP 请求会增加网络流量和服务器负载，并且不能实时地推送数据，只能通过客户端定期轮询来获取数据更新。

长轮询：

工作原理：客户端发送 HTTP 请求给服务器，服务器接收请求后不会立即返回数据，而是保持连接打开，直到有新数据可供发送或者超时发生。
特点：长轮询克服了短轮询频繁请求的问题，可以实现类似实时数据推送的效果。服务器端只有在有数据更新时才会返回响应，否则会保持连接。
缺点：每个长轮询连接都需要服务器资源来维持，因此在高并发或大规模应用中可能会导致服务器负载较高。

WebSocket：

工作原理：WebSocket 是一种全双工通信协议，允许客户端和服务器之间建立持久性连接，双方可以通过这个连接进行实时数据的双向传输。
特点：与 HTTP 不同，WebSocket 连接只需要建立一次，之后可以保持连接状态，双方可以随时通过这个连接发送和接收数据，实现真正的实时通信。
优点：相比短轮询和长轮询，WebSocket 可以显著减少网络流量和服务器负载，同时实时性更高，适合需要实时数据传输的场景，如聊天应用、实时游戏等。