涂涂

Monorepo 通过集中化管理和代码共享，解决了多仓库协作的碎片化问题，尤其适合复杂项目或需要高度协作的团队。选择时需权衡项目规模、工具链支持与团队能力，合理使用工具（如 Turborepo 或 Nx）可大幅降低维护成本。服务端渲染（SSR） vs. 客户端渲染（CSR）服务端渲染（SSR - Server-Side Rendering）客户端渲染（CSR - Client-Side Rendering）它们的区别在于HTML 生成的时机SSR：HTML在服务器端生成，然后返回完整的页面给浏览器。

解决问题：改善与 Web Components 的集成完整支持自定义元素正确处理属性和属性传递数据不可变性遵循不可变数据的原则，避免直接修改原有状态。异步和批量更新支持异步更新，React 可以批量处理多个状态更新，提升性能。生命周期管理：通过setState，React 能够触发生命周期钩子，确保组件正确更新。性能优化可以通过智能的差异化更新减少不必要的 DOM 操作，而直接修改this.state会跳过这一过程。因此，直接修改this.state。

以上代码实现了一个简化的React Fiber渲染过程，包括创建Fiber节点、协调子元素和更新DOM。实际的React Fiber实现要复杂得多，涉及到更多的优化和功能，如优先级调度、并发模式等。通过这个简化的示例，可以更好地理解iber的基本概念和工作原理。

1.React 高阶组件（HOC） ****1. HOC（高阶组件）HOC (Higher - Order Component) 定义： 高阶组件是一个****接收组件作为参数并返回新组件的函数，用于

是一个用于管理服务器状态的库，提供了高效的数据获取、缓存、同步和更新机制。

useDebugValue 是一个 React Hook，用于在 React DevTools 中为自定义 Hook 添加标签。它可以帮助我们在开发过程中更好地调试和理解自定义 Hook 的状态。

useInsertionEffect 是 React 18 引入的一个特殊的 Hook，它的执行时机比 useLayoutEffect 更早，主要用于在 DOM 变更之前注入样式。这个 Hook 主要面向 CSS-in-JS 库的开发者使用。通过合理使用 useInsertionEffect，我们可以优化 CSS-in-JS 的性能，避免样式注入导致的布局抖动。但要记住，这个 Hook 主要面向库的开发者，普通应用开发中很少直接使用。

useTodoStore 是一个自定义 Hook，它使用了 useSyncExternalStore 来同步外部存储（即 todoStore）的状态。todoStore.subscribe：订阅状态更新。每当 todoStore 中的状态变化时，useSyncExternalStore 会触发重新渲染。todoStore.getSnapshot：获取当前的状态快照，在此返回的对象包含 todos 和 filter。

usememo和usecallback你如何使用他们进行性能优化，什么时候使用usecallback,什么时候使用usememo

解决问题：改善与 Web Components 的集成完整支持自定义元素正确处理属性和属性传递。

生成稳定的唯一标识符服务端渲染兼容适合可访问性属性组件级别的唯一性存储可变值不触发重渲染适合 DOM 引用组件内部状态管理HTML/ARIA 属性关联用 useIdDOM 操作和可变值存储用 useRef考虑渲染一致性需求考虑值更新特性。

);T},(err) => {return {read() {简化异步数据获取支持条件性使用更好的类型推断统一的资源使用方式数据获取Context 消费自定义订阅并行数据加载配合 Suspense 使用实现适当的错误处理注意性能优化合理组织代码结构。

useOptimistic 是 React 19 引入的新 Hook，用于实现乐观更新(Optimistic Updates)。它允许你在等待异步操作完成时立即更新 UI，提供更好的用户体验。提升用户体验减少感知延迟支持复杂状态更新易于实现回滚评论系统待办事项列表表单提交数据列表操作合理处理错误情况实现优雅的回滚机制注意状态一致性优化性能表现。

useActionState 是 React 19 引入的新 Hook，用于处理表单 action 的状态更新。它允许你基于表单 action 的结果来更新组件状态。官网useFormStatus 是一个专门用于获取父级表单提交状态的 Hook。它提供了表单提交过程中的详细状态信息。简化异步状态管理提供完整的状态信息易于集成错误处理支持类型安全专注于表单状态提供详细的提交信息易于实现加载指示器支持复杂表单流程合理区分两个 Hook 的使用场景实现适当的加载状态展示。

useDeferredValue 是 React 18 引入的新 Hook，用于延迟更新某个不那么重要的部分。它接收一个值并返回该值的新副本，新副本会延迟更新。这种延迟是有益的，让紧急更新(如用户输入)优先于不紧急的更新(如渲染搜索结果列表)。useDeferredValue 不会丢弃更新自动适应用户设备性能与 React 并发特性集成提供过时状态标识大数据列表渲染实时预览功能复杂图表更新搜索建议配合 useMemo 使用提供加载状态反馈合理处理过时内容注意性能优化。

useTransition 是 React 18 引入的新 Hook，用于标记非紧急的状态更新。它允许组件在状态转换期间保持响应，通过将某些更新标记为"过渡"来推迟它们的渲染。大量数据处理复杂 UI 更新后台计算非阻塞渲染提升用户体验保持 UI 响应性优化渲染性能提供加载状态合理区分更新优先级适当处理加载状态避免过度使用配合其他性能优化手段。

但要记住，过度优化可能会适得其反，应该在实际需要时才进行优化。useCallback 是 React 的一个 Hook，用于记忆函数定义，避免在每次渲染时创建新的函数实例。同样的当依赖项省略时组件重新渲染都会执行，当依赖项为空数组的时候只有组件初始化的时候会执行一次，数组里有依赖项的时候依赖项发生变化的时候都会缓存一次。当state变化的时候引起组件重新渲染执行会导致某个方法被反复创建增加内存负担，这个时候可以使用useCallback将该函数进行缓存，只创建一次。

通过合理使用 React.memo 和 useMemo，我们可以显著提升 React 应用的性能。但记住，过度优化可能会适得其反，应该在实际需要时才进行优化。React.memo 是一个高阶组件（HOC），用于优化函数组件的性能，通过记忆组件渲染结果来避免不必要的重新渲染。useMemo 是一个 Hook，用于记忆计算结果，避免在每次渲染时重复进行昂贵的计算。只有props发生变化才会重新渲染MemoizedComponent。

通过使用useReducer和Immer，我们可以更好地管理复杂的状态逻辑，同时保持代码的可读性和可维护性。Immer特别适合处理深层嵌套的状态更新，让代码更简洁直观。useReducer是React的一个Hook，用于管理复杂的状态逻辑。它接收一个reducer函数和初始状态，返回当前状态和dispatch函数。具体参照：[https://immerjs.github.io/immer/zh-CN/example-setstate]

useLayoutEffect 是 React 的一个 Hook，它的函数签名与 useEffect 完全相同，但它会在所有的 DOM 变更之后同步调用 effect。它可以用来读取 DOM 布局并同步触发重渲染。

数据获取（API 调用）订阅数据源手动修改 DOM设置定时器存储数据日志记录纯函数是特定的输入只会有特定的输出，也就是说组件会输出特定的DOM给浏览器渲染，除去这份逻辑以外的操作就称之为副作用，比如获取数据，监听，订阅等等保持 effect 函数简洁，专注于单一功能合理使用依赖项，避免不必要的执行始终清理副作用，防止内存泄漏使用条件语句控制 effect 的执行考虑使用自定义 Hook 封装常用的副作用逻辑。

通过合理使用 useRef，可以优化组件性能，实现更复杂的组件交互，同时保持代码的可维护性和可读性。useRef 是 React 的一个 Hook，返回一个可变的 ref 对象，其。属性被初始化为传入的参数。这个对象在组件的整个生命周期内保持不变。

使用 URL 的 hash 部分（#）来保持 UI 与 URL 同步，适用于不支持 HTML5 history API 的旧版浏览器。是 React Router 应用的基础容器，使用 HTML5 的 history API 实现路由功能。hook 用于配置式路由，可以用对象的方式定义路由结构。hook 用于匹配当前 URL 是否符合指定的路径模式。hook 用于读取和修改 URL 的查询参数。组件用在父路由中，渲染当前匹配的子路由。hook 返回当前匹配的子路由元素。hook 返回当前路由的位置信息。

Error Boundary 是 React 16 引入的一个特性，它可以捕获子组件树中的 JavaScript 错误，记录错误并展示备用 UI，而不是让整个应用崩溃。大白话：嵌套组件某个组件出错时显示备用页面而非报错信息，影响整个页面显示render() {return (Oops!数据获取错误处理组件渲染错误处理复杂计算错误处理第三方组件错误隔离。

PureComponent 是 React 提供的一个优化类组件，它通过自动实现 shouldComponentUpdate 生命周期方法，对 props 和 state 进行浅比较来决定是否需要重新渲染组件。PureComponent 通过浅比较优化性能适用于简单数据结构的场景需要注意引用类型的处理配合不可变数据使用效果最佳。

Context 提供了一种在组件树中共享数据的方式，而不必通过 props 显式地逐层传递。它主要用于共享那些对于组件树中许多组件来说是"全局"的数据。// 创建自定义 Hook 封装 Context 逻辑// 使用自定义 Hookreturn (主题切换用户认证状态语言偏好全局配置路由状态共享。

Fragment需要 key 属性时在 TypeScript 中需要明确类型需要语义化的代码结构空标签简单的组件包裹不需要任何属性追求简洁的代码。

useState 用于在函数组件中管理状态状态更新是异步的使用函数式更新处理依赖之前的状态合理组织和拆分状态。

延迟加载非必需的组件，只有你需要加载的时候加载，或者在指定时间预加载，比如首屏渲染后再预加载主要组件，当路由到主要组件时，主要组件已经在首屏渲染后预加载好了。减小初始包的大小提高应用的首次加载性能使用 React.lazy 实现组件懒加载使用 Suspense 处理加载状态配合 React Router 实现路由懒加载实现预加载优化用户体验。

setState 是异步的状态更新会被合并使用函数式更新处理依赖之前的状态注意避免常见陷阱。

使用范围：Redux 更通用，React-Redux 专注于 ReactAPI 设计：React-Redux 提供更简洁的 API性能优化：React-Redux 提供自动优化。

Redux 是一个用于 JavaScript 应用的状态管理工具，它帮助你以可预测的方式管理应用状态。状态集中管理单向数据流纯函数更新中间件扩展。

Redux 是一个可预测的状态容器，用于管理 JavaScript 应用的状态。单一数据源：整个应用的状态存储在单个 store 中状态是只读的：唯一改变状态的方式是触发 action使用纯函数进行修改：使用 reducer 来指定状态如何更新可预测的状态管理集中的状态管理易于调试强大的中间件生态大型应用复杂的状态逻辑多人协作项目需要状态持久化使用 TypeScript采用 Redux Toolkit实现状态范式化使用选择器模式。

基本路由嵌套路由动态路由404 路由URL 参数查询参数状态传递声明式（Link/NavLink）编程式（useNavigate）集中配置路由懒加载路由守卫权限控制。

定位不同路由组件：页面级，负责整体布局和业务逻辑一般组件：功能级，负责特定功能的实现参数传递路由组件：主要通过路由参数一般组件：主要通过 props生命周期路由组件：与路由切换紧密相关一般组件：与父组件更新相关。

fetch 是现代浏览器中用来发起 HTTP 请求的原生 API，它依赖浏览器的网络堆栈来执行低级别的请求操作。通过基于 Promise 的设计，fetch 提供了更清晰的异步操作流程。它的实现利用了浏览器的网络层和异步编程机制，能够有效处理 HTTP 请求、响应、CORS 等问题。fetch 是一个现代的、基于 Promise 的 API，具有更简洁的语法和更强大的功能，如流式响应、异步操作的简化、更易于使用的错误处理等。

if (!订阅事件：通过 subscribe 方法，可以为某个事件注册一个回调函数。发布事件：通过 publish 方法，可以触发某个事件，并将数据传递给所有已订阅该事件的回调函数。取消订阅：subscribe 返回的函数可以用来取消订阅某个事件。// 使用自定义事件系统// 发布者组件});// 订阅者组件});}, []);就近原则父子组件优先使用 props兄弟组件优先通过父组件通信灵活性考虑简单场景使用 props 和回调。

【代码】React 脚手架配置代理完整指南。

ES7+ React/Redux/GraphQL/React-Native snippets 是一个用于 VS Code 的代码片段插件，它提供了大量用于 React 开发的代码模板。

React 脚手架(Create React App)是 Facebook 官方提供的创建 React 单页应用的工具。它提供了一个零配置的现代构建设置。快速创建项目零配置开始完整的开发环境优化的构建过程遵循目录结构规范合理使用环境变量保持代码规范统一适时添加必要的配置慎用 eject及时更新依赖保持项目结构清晰做好文档维护。