小秀的博客

和前端路由一样，后端路由处理也同样采用约定式路由。比如可以在 /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函数内部使用。

react18之后，引入了自动批处理功能，所以默认情况下都是批量更新，都是异步处理。2）在所有的同步代码执行完之后，React 调度机制会统一处理这些队列中的更新，将多次 setState 进行合并（将多次状态改变完成后，再统一对 state 进行改变，然后触发 render），批量处理。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，抽离公共部分，复用代码。

当我们 dev 编译项目后，public 中的文件会被放到项目的根目录下，这就是为什么我们可以直接在项目中路径中访问，也可以直接进行 ajax 发送请求获取。所以，public 下的文件 不会被编译，而 assets 下的文件会被编译。public目录的资源编译之后会存放到根目录，而静态资源assets是会随着项目一起打包的，public则不会被编译。src/vite-env.d.ts 中的三斜线指令用于引入类型声明，比如各种预处理器，各种文件后缀的类型等。

*** 权限枚举*/// 默认用户userName: "未登录",userProfile: "暂无简介",

笔记来源：编程导航。

笔记来源：编程导航。

Next.js 版本 14.2 ， Node.js 的版本要求必须 >= 18.18。Next 有两种开发模式，下面讲新的 APP Router。

网站渲染可以在服务端和客户端两种环境下进行。在客户端渲染（Client-Side Rendering，CSR）中，客户端（浏览器）会先向服务器请求 HTML 文件，服务器会返回一个基础的 HTML 文件，其中包含必要的 JavaScript 脚本。这些脚本在浏览器端运行，动态请求后端的数据、生成网页内容并渲染到页面上。服务端渲染（Server-Side Rendering，SSR） 是一种将网页在服务器端生成并渲染为 HTML 内容的技术。

当页面组件抛出 not found 404 错误时，也就是未找到 url 对应的页面路由组件，Next 会自动渲染 /app/not-found.tsx 组件。当然一级路由内部存在 […slug] 等动态路径参数的路由，会优先在动态路径参数对应的页面进行渲染，而不是抛出 404 错误，也就不会被 not-found.tsx 捕获。如果只是在某个页面中发生了 notFound() 函数的调用（Next的内置函数），则会优先在该页面文件夹下寻找 not-found.js ，没有的话才回去全局里面找。

不同于 nuxt ，next 的样式绝大部分都需要手动导入。

在Reactr中创建SSR应用，需要调用 ReactDOM.hydrateRoot 函数，而不是 ReactDOM.createRoot。createRoot:创建一个Root,接着调用其 render 函数将 App 直接加载到页面上hydrateRoot:创建水合 Root, 是在激活的模式下渲染 App服务端可用 ReactDOM.renderToString 来进行渲染。

插件都需要兼容 umi4 才能用，插件 api 有变化，没兼容的是用不了的。也减少了 webpack 升级导致的问题。app.tsx 是项目全局入口文件（在首次访问页面执行 / 刷新页面），定义了整个项目使用的公共数据，getInitialState 方法定义了项目初始化需要执行的操作。这里 start 模式使用了前端项目内的 mock 数据，而 start:dev 没有使用mock 数据，需要真实的后端接口。这是最新版的 umi，不同于上个版本，上一个版本应该是 透传的 umi-request。