小秀的博客

配置灵活性Vue 的提供更细粒度的控制（如加载延迟、超时、错误组件），适合需要复杂交互的场景；Reactlazy更依赖Suspense和生态工具，配置较为简洁。错误处理机制Vue 内置错误处理组件，React 需通过 Error Boundaries 实现，后者需要额外编码。与路由集成Vue 的异步组件可直接用于路由配置，而 React 需手动结合路由库（如 React Router）。Vue3。

在最后插入数据有无key 意义不大。前面插入数据如果没有 key 后面的节点都需要修改，如果有key ，原节点只需要移动，不需要修改。React 在props 或者 state 发生改变时，会调用 React 的render 方法，创建一颗不同的树。：父组件渲染(父组件render 调用，所有子组件的render 都会重新调用)、（SCU） 生命周期，进行强制渲染。React 18 的更新流程基于。、Context 变化等。

React中 setState 的时候会调用 render()，但是 Vue 相对来说是一个看不到的操作。如果只有一个，那么children 是一个子节点的对象。所以，如果我们在代码中直接使用 babel 转换后的代码（全部改为 js 的写法），而不是 jsx 语法，一样可以正常开发。Vue 中的插槽用法完全通过 React 中的父子组件通信搞定，因此React 相较于 Vue 来说，灵活程度大大提升。为了方便阅读，我们通常在jsx的外层包裹一个小括号()，这样可以方便阅读，并且jsx可以进行换行书写；

【代码】Vue 和 React 的异同点。

Vue 适合：快速开发、中小型项目，希望减少手动优化的场景。React 适合：大型复杂应用，需要高度控制更新逻辑的场景。

<button onClick={handleClick}>点击</button>}}>Detail 的内容</p>

以下涉及网络请求的内容一定需要根据自身接口文档进行修改。

虽然这个文档好像已经好久没有更新了。mock 的一套接口文档。

默认是从 / 开始，但是如果我们将项目打包文件没有放入在服务器的根目录，而是在某个文件下，这时这些打包文件中的互相应用将找不到正确路径。jsMinifier (webpack) 、jsMinifierOptions 配置项。historyWithQuery 配置项。chainWebpack 配置项。inlineLimit 配置项。externals 配置项等。publicPath 配置项。history 配置项。devtool 配置项。plugins 配置项。proxy 配置项。

以下为知行小课学习笔记。

和前端路由一样，后端路由处理也同样采用约定式路由。比如可以在 /api 目录下定义路由文件。但是要注意：route.ts 和 page.tsx 不可以在同一目录下，因为难以区分是渲染页面还是请求接口。支持以下 HTTP 方法：GET、POST、PUT、PATCH、DELETE、HEAD 和 OPTIONS。如果调用了不受支持的方法，Next.js将返回 405 Method Not Allowed 响应。注意，在生产环境下，GET 请求默认会进行缓存（Next14）退出（取消）

Next.js 的中间件 (Middleware)是一种在请求完成之前运行的函数，用于对入站请求进行处理和操作。它可以在路由匹配前执行逻辑，用于身份验证、请求重写、重定向、设置响应头等任务。使用场景身份验证：在用户访问页面前检查登录状态。国际化处理：根据用户的语言偏好设置动态重定向。A/B 测试：动态分流用户到不同的页面。IP 限制：根据访问者 IP 地址限制访问。中间件基本使用在 API 请求中注入特定的自定义头信息。中间件代码。

上述这个目录中，直接 Link 访问的是 photo[id]\page.js ，而 直接网址访问的 是 (…)photo[id]\page.tsx。对于一个路由以不同的方式（Link 软导航的方式 和 浏览器刷新页面的方式）去访问，得到的页面渲染结果也会不同。） 约定定义拦截路由（Link）。default.tsx 和上述一样。

包括任何字体文件的内置自动自托管。

> React 无法识别 DOM 元素上的 “XXX” prop。如果您有意让它作为自定义属性出现在dom中，请将其拼写为小写的isplaying。如果您不小心从父组件传递了它，请从dom元素中删除它。原文：如果还没有迁移你的样式来使用 transient props （$prefix），你可能会注意到 React 警告说样式 props 在 v6 中进入了 DOM。经过我的一番查找，这个报错已经有人在 GitHub discussions 中提问过了。那么，这个报错是什么意思呢？

【代码】【React】styled-components 基本使用。

cra 配置路径别名 @ 后，出现 ts 报错：找不到模块“@/App”或其相应的类型声明。

图标和题目这些基本配置都是在 public/index.html，直接修改 link 中的 favicon.ico 就是修改图标；title 标签就是题目修改。

提供的全局类型定义，这些类型定义扩展了 TypeScript 编译器对 React 项目的支持，使得项目能够识别和使用 React 的一些特有全局变量。：默认情况下，TypeScript 对导入的静态资源（例如图片、CSS 文件等）并没有类型支持。：该文件确保 TypeScript 了解当前项目的 JSX 运行环境，并为。文件包含静态资源的类型声明，允许项目中直接导入这些资源，例如。文件的作用是为 React 应用中的全局变量和类型进行声明。生成的 TypeScript 项目模板中，

useInsertionEffect 执行时，DOM还没有更新。useLayoutEffect的cb，是同步执行的，执行时机是DOM更新之后，视图绘制完成之前，这个时间可以更方便的修改 DOM。useEffect的cb，准确来说，是异步调用的，会等主线程任务执行完成，D0M更新，JS执行完成，视图绘制完成，才执行。本质上useInsertionEffect主要是解决 css-in-js 在渲染中注入样式的性能问题。如果要改 DOM， 用useLayoutEffect， 其他都用useEffect。

这是最简单直接的方式，即在 JSX 语法中直接传递一个内联函数。这种方式每次渲染时都会创建新的函数实例，可能会导致不必要的性能开销。优点：方便，代码简洁。缺点：每次渲染时都会创建新的函数实例，可能影响性能。2. 类绑定这种方式是将事件处理函数直接传递给事件处理器，但需要手动绑定 。优点：在构造函数中绑定 ，每次渲染时不会创建新的函数实例。缺点：需要手动绑定，代码稍显冗长。3. 构造函数绑定这种方式是在构造函数中创建一个箭头函数，将 自动绑定到当前实例。优点：箭头函数自动绑定

因为这种方式能够更好地集成到现代化的 JavaScript 打包工具（如 Webpack）中，提供诸如代码分割、缓存优化等功能。在 CSS 模块中：可以通过样式绑定背景图片，适用于背景图片或装饰性小图标。），以便在引入图片时进行优化，具体配置可以参考 webpack 文档。语句更加符合 ES6+ 规范，使代码可读性和可维护性都有所提升。有时我们需要根据某些条件动态引入图片，这种情况下可以使用。Webpack 通常会配置文件加载器（如。如果要选择哪种方式更好，我个人推荐使用。（适用于公共资源或外部链接）

React 的并发模式允许 React 打破长时间的同步渲染任务，把工作拆分成多个小任务来提高响应性。在渲染时，React 识别不同的函数和对象。如果每次都创建新的匿名函数或对象，React 会认为它们是不同的，导致额外的渲染。只有在需要时才加载对应组件，可以减小初始加载的体积。可以缓存计算结果和函数，减少因每次渲染导致的重复计算和函数生成。）来实现代码拆分，使应用按需加载不同部分，减小初始包大小。这对于较大的组件或路由非常有效，尤其是在单页应用中。分析应用的性能瓶颈，并优化慢速渲染的部分。

状态存储：每个组件的状态被存储在 React 内部的某个数据结构中，通常是一个状态列表。状态链表：每个调用useState的组件，都有一个状态链表，其中存储了状态值和setState函数。状态更新：当调用setState时，React 会更新链表中的状态值，然后调度一次渲染。下一次渲染时：在下一次渲染时，React 从该链表中获取最新的状态值，确保状态是连续且正确的。状态持久化：React 通过useState。

这不仅是一个命名约定，而且它能让React自动识别这个函数是不是一个自定义Hook，这有助于代码可读性，并且有助于错误排查和调试。如果这些调用在不同的渲染中顺序不同，React就不知道应该使用哪一个状态或效果。如果你把Hooks调用放在条件语句中，就可能改变调用的顺序，这会导致奇怪的bug。因此，你应该始终在React函数组件的最顶层调用Hooks。意味着你只能在React的函数组件内部或自定义Hooks（一个以“use”开头的函数）中使用Hooks，不能在普通的JavaScript函数内部使用。

2）在所有的同步代码执行完之后，React 调度机制会统一处理这些队列中的更新，将多次 setState 进行合并（将多次状态改变完成后，再统一对 state 进行改变，然后触发 render），批量处理。setState 的第二个参数是一个回调函数，会在 setState 更新（因为批量更新，所以实际上是所有状态更新全部完成后才会执行这个回调函数）并重新渲染组件后被调用，所以这时我们可以获取最新值。调用合并成一次批量更新。异步 setState ，合并多个状态更新统一处理，减少渲染次数，提高性能。

onClick 并不会将事件代理函数绑定到真实的 DOM节点上，而是将所有的事件绑定到结构的最外层（document，减少内存开销），使用一个统一的事件去监听。事件监听器维持了一个映射保存所有组件内部的事件监听和处理函数，当组件挂载或者卸载时，在事件监听器上插入或者删除一些对象。react 基于浏览器的事件机制自身实现了一套事件机制，称为合成事件。比如：onclick -> onClick。事件发生 -> 事件处理器 -> 映射真实事件处理函数并调用。获取原生事件：e.nativeEvent。

react 还有一些特性，jsx 语法、单向数据流（react 本身来说 props 只能通过父组件向子组件传输，不能反过来修改，便于对数据的控制）、虚拟 DOM（diff、patch，高效操作 DOM）、声明式编程、Component（一切皆为组件）props 是只读的，但是 this 是可变的（可以在 render 和生命周期读取最新值），所以如果组件在请求运行时更新，类组件 this.props 可以获取最新的值，而 函数组件 props 仍是旧值（函数组件本身不存在 this）。

路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信。

各个主流框架的路由常用的路由模式有俩种，history 模式和 hash 模式, ReactRouter分别由 createBrowerRouter 和 createHashRouter 函数负责创建。在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由。当访问的是一级路由时，默认的二级路由组件可以得到渲染。以下案例希望设置面板组件为二级默认组件得到渲染。

【代码】【React-Router】导航传参。

因为 React 使用的是 JSX，而 JSX 本质上就是 JS 语言，是具有非常高的动态的，而 Vue 使用的 template 则是给了足够的约束，比如说 Vue 的 template 里面使用了很多特定的标记来做不同的事情，比如说 v-if 就是进行变量判断的，而这些标记也是非常有限的，且表达方式也是跟其他HTML语言标记是有区别的，所以就十分容易进行优化分析；

从 React Hook 的实现角度看，React Hook 是根据 useState 调用的顺序来确定下一次重渲染时的 state 是来源于哪个 useState，所以出现了以下限制：而 Composition API 是基于 Vue 的响应式系统实现的，与 React Hook 的相比：

笔记来源：小满zs。

（跨端开发框架）（最推荐，兼容性最好）nut-ui下面的讲解是以 react + ts + taro + taro-ui 为主要技术。

内将at-rule-no-unknown 规则关闭：https://stylelint.io/user-guide/rules/at-rule-no-unknown/ , https://stackoverflow.com/questions/72161637/unexpected-unknown-at-rule-tailwind-scss-at-rule-no-unknown。各种 form-item 的 onChange 里面的参数不同，其他同理。要解决这个问题，你需要在。安装对应的子包即可。

mobx 实现像 vue 一样声明式的修改数据，我们在项目中直接使用 mobx + mobx-react。state 数据action 动作derivation 派生computedobserver监听变化，包裹的 React 组件autorun监听变化，像 watchcomputed 必须是纯函数。而 action 可以修改 state （如 arr.push）。computed 采用惰性求值，会缓存其输出，并且只有当其依赖的可观察对象被改变时才会重新计算。它们在不被任何值观察时会被暂时停用。

eject 命令可以是将 cra 配置完全暴露出来，但这是一个不可逆的操作，同时也会失去CRA带来的便利和后续升级。所以我们可以选择 craco 重写 react 配置。craco 是专门由于 cra 配置的重写，扩展配置 cra （webpack）。根目录下创建 craco.config.js 和配置。

【代码】【React Router】路由快速上手。

自定义 hooks 或者第三方 hooks，抽离公共部分，复用代码。