当我尝试编译 React 应用程序时，Webpack 无法编译错误
无法解析源映射：'webpack:///../../src/chains/index.ts' URL 不受支持 无法解析源映射：'webpack:///../../src/eips/index.ts' URL 不受支持 无法解析源代码...
我正在尝试设置 webpack 的开发服务器和 HMR 来配合 Shopify 主题开发。当运行服务器并打开本地 IP 时，我从 Shopify 的 DNS 提供商 CloudFlare 收到此错误......
我最近启动了带有临时和生产环境的 Heroku 管道。我的应用程序是使用 React、NodeJS 和 Webpack 构建的。 当我部署到 staging 时，我的 baseURL 是生产 url，但它...
Vue 2.0 + webpack 使用 npm 包中的组件
我正在尝试使用 webpack 和 Vue 2.0 设置一个项目，但在我的项目中使用 npm 包（如 vue-parallax）中的组件时遇到了一些麻烦。 我安装了该软件包并且一切...
Next.js：如何通过 https localhost 使用 CLI (next dev) 启动开发模式
在 Next.js 中，哇，通过 https localhost 使用 CLI (next dev) 启动开发模式？ 我应该将哪些参数传递给“next dev”命令，该命令可以在 package.json 中编辑？ 我不...
运行 npm run dev || 时出现总线错误npm 启动
我似乎无法在我的 macOS 计算机上运行 npm run dev 或 npm start 。 每次尝试这样做时，我都会收到总线错误消息，输出通常如下所示： klvn git:(主) ✗ npm run dev ...
我使用 webpack 5 和 HtmlWebpackPlugin 来构建我的前端 SPA。 我需要向 添加随机数属性 <question vote="0"> <p>我正在使用 webpack 5 和 <pre><code>HtmlWebpackPlugin</code></pre> 来构建我的前端 SPA。</p> <p>我需要将 <pre><code>nonce</code></pre> 属性添加到 <pre><code><script ...</code></pre> 注入的 <pre><code>HtmlWebpackPlugin</code></pre> 标签中。</p> <p>我该怎么做？</p> <p>额外问题：之后我在服务之前使用此页面作为 Thymeleaf 模板。如何注入<pre><code>nonce</code></pre>值？</p> </question> <answer tick="false" vote="0"> <p>如果您使用的是 webpack 4，海里有很多鱼——只需使用任何注入属性的插件，例如 <a href="https://github.com/numical/script-ext-html-webpack-plugin" rel="nofollow noreferrer">script-ext-html-webpack-plugin</a> 或 <a href="https://github.com/dyw934854565/html-webpack-inject-attributes-plugin" rel="nofollow noreferrer">html-webpack-inject-attributes-plugin</a> </p> <p>但是，上面提到的大多数插件都不适用于 webpack 5。解决方法是使用 <pre><code>HtmlWebpackPlugin</code></pre> <a href="https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates" rel="nofollow noreferrer">templates</a>。</p> <ol> <li>将<pre><code>inject</code></pre>中指定的<pre><code>false</code></pre>选项中的<pre><code>HtmlWebpackPlugin</code></pre>设置为<pre><code>webpack.config</code></pre>。</li> <li>在模板中添加以下代码，将所有生成的脚本插入到结果文件中：</li> </ol> <pre><code> <% for (key in htmlWebpackPlugin.files.js) { %> <script type="text/javascript" defer="defer" src="<%= htmlWebpackPlugin.files.js[key] %>"></script> <% } %> </code></pre> <ol start="3"> <li>在 <pre><code>script</code></pre> 中添加所有必要的属性。百里香示例：</li> </ol> <pre><code> <% for (key in htmlWebpackPlugin.files.js) { %> <script type="text/javascript" defer="defer" th:attr="nonce=${cspNonce}" src="<%= htmlWebpackPlugin.files.js[key] %>"></script> <% } %> </code></pre> <p>基于 <a href="https://github.com/jantimon/html-webpack-plugin/issues/538#issuecomment-270340587" rel="nofollow noreferrer">github 帖子</a></p>的答案 </answer> </body></html>
如何在 Linux ARM64 上构建 Chrome V8？
我正在尝试在 Ubuntu 22.04 ARM64 上构建 V8。我尝试通过便利脚本进行构建，即tools/dev/gm.py arm64.release，以及tools/dev/v8gen.py arm64.release，但没有成功（clang
在我的 React Typescript 应用程序中，我收到此错误。 webpack 编译时出现 1 个警告 src/App.tsx 中出现错误：30:21 TS2304：找不到名称“DecompressionStream”。 28 | 28 const enc = new TextEncoder()...
安装pact-lang-api后Webpack/polyfill出错
在尝试连接刚刚使用 create-react-app 创建的 React 前端时，在将 pact-lang-api 导入应用程序后运行 npm run start 时收到此错误消息： ./
如何在 React 中使用带有 className 属性的 TailwindCSS 实用程序类
我为 React 创建了一个模板（样板）存储库，它提供 ESLint、Typescript、TailwindCSS 和 Jest 测试，并使用 Webpack 构建。 然而，TailwindCSS 实用程序类不...
`我的 React 应用程序运行良好，但升级到 React 18、mui v5 和 redux v5 后，它没有渲染任何内容。 在终端中，我得到： webpack 编译成功 但在 chrome 控制台中...
webpack devserver 代理到 https，给出“尝试代理请求时发生错误”和 SELF_SIGNED_CERT_IN_CHAIN
尝试设置从本地主机到 https 站点的代理时看到以下错误 [HPM] 尝试将请求 /api/analytics/getDataByPage 从 localhost:8080 代理到 https://exam 时出错...
我已经签出了一个非常旧的功能分支，并且想要对 master 进行变基。 但是，有一些 webpack 构建文件未包含在 .gitignore 中，这会导致 rebase 提示我解决
考虑： PS C:\.dev\despesas-python> heroku 创建 app-despesas-pessoais-python » 警告：heroku 更新从 7.53.0 到 8.0.5 可用。 创建 ⬢ app-despesas-pessoais-python...完成 https...
WordPress.com VIP 主题激活问题 - 找不到 vip-init.php
我正在 Ubuntu 14.04 LTS 计算机上按照以下说明设置我的第一个 VIP 主题： https://vip.wordpress.com/documentation/vip/dev-environment/ 和 http://docs.chassis.io/en/latest/quick...
使用 testcontainers 和 prisma orm 安装 postgis 时出错
我正在使用 testcontainers 创建 e2e 测试，我有一个为 Postgres 安装 Postgis 扩展的迁移，但收到以下错误： 命令失败：npx prisma migrate dev 错误：
运行 Vite-React：“npm run dev”出现问题
当我尝试运行代码时，我收到以下消息。 节点：内部/模块/cjs/loader：1147 抛出错误； ^ 错误：在ite.js 中找不到模块“D:\Web-Development ite” 在...
在flutter项目中添加风味后，AppCilrcle平台上的iOS构建失败
我已经只为单个环境构建了setps，但现在我正在尝试为多个环境（prod、dev）构建iOS应用程序。为此，我已在
它恰好发生在我今天添加到集群中的 almalinux 9.0 服务器上。 k8s 版本是 1.19.16 名称 CPU（核心数） CPU% 内存（字节） 内存% k8s-dev-node1 110m 11% ...
基于此（https://github.com/r9r-dev/portaefik）我已经设置了portainer，前面有traefik。效果很好，我正在用它主持 portainer 和 traefik 背后的其他一些事情。 我愿意
SvelteKit：RollupError：意外的标记“，”。预期的标识符或字符串
当我使用 npm run dev 运行 SvelteKit vite 开发服务器时，尝试打开页面时出现错误： RollupError：意外的标记“,”。预期的标识符或字符串 在 getRollupError (f...
在 Heroku 上找不到 PostgreSQL 数据库的附加爱好开发
我正在尝试使用 Django 将我的应用程序推送到 Heroku，但是当我运行 heroku addons:create heroku-postgresql:hobby-dev -a (appname) 时，它给了我这个错误： 找不到附加服务...
如何使用 C# 开发套件在 Visual Studio Code 中设置 dotnet Release 配置构建？
我已经安装了 Visual Studio Code 和“C# Dev Kit”。看起来没有默认的方式让人们选择发布配置构建。 查看文档包，它提到了 a...
我正在尝试通过JavaScript API在Excel中开发自定义函数。环境是Mac OS和Excel Online (Chrome)。 我按照教程并通过 npx office-addin-dev-certs 安装证书
Os Dev 的 PCI IDE 教程中的 insl 函数是做什么用的？
这是调用insl的函数。 void ide_read_buffer（无符号字符通道，无符号字符寄存器，无符号整数缓冲区， 无符号整型四元组) { /* 警告：此代码包含...
我正在尝试在 Linux 上的 Qt C++ 项目中使用 RHVoice。 我安装了 RHVoice，并与它的库 RHVoice.h 进行了斗争，该库由 librhvoice-dev 包提供，到目前为止，它似乎是...
GitVersion 正确更新 master、dev、hotfix 分支的程序集版本
我在 Azure DevOps 管道中使用 GitVersion 来自动化部署，但是我正在努力让自动版本控制按我想要的方式工作。 分支结构是这样的： 大师-这...
以编程方式从 iPhone 发送短信的最佳方式是什么？可以选择与 /dev/tty.debug 上的调制解调器对话或使用私有 API。 我想制作一个命令行短信实用程序，并且我想要...
Vite-Vue 应用 HTTP 请求重定向 - DEV 模式
我想在开发模式（npm）上将 HTTP 请求的基本 URL 从 Vite 应用程序的主机地址（http://localhost:5173）更改为我的 ASP .NET API 的主机地址（http://localhost:5815）运行开发）。 但我有这样的
上面你可以看到我的aws环境的图示。也许这将有助于说明问题。 我有一个 DEV 环境，其中多个 Beanstalk 项目由一个共享应用程序管理......
在 Nodejs 上使用 readFileSync 和 esm 模块时遇到问题
我正在尝试将我的 commonjs 存储库转换为 ESM，但在使用 readFileSync 命令时遇到问题。看来我在节点 18 和节点 20 上得到了不同的行为。我尝试加载路径： D:\dev s-
LiteSpeed WebServer 上的 MIME 类型（“text/html”）不匹配（X-Content-Type-Options：nosniff）
不知道如何解决这个问题，它基本上会引发 React 应用程序构建 css/js 引用文件的错误。 可以查看 https://eliptum.tech/dev/ 从浏览器开发工具控制台： 资源来自“https://eli...
如果我有一个控制器，其操作方法使用基于属性的路由并像这样声明它，那么一切都很好： [http获取] [路线(“/dev/info/{*somevalue}”)] 公共 IActionResult 获取（
我正在尝试编译一个包含一些图像的项目。当我使用yarn dev时，我可以编译几乎所有内容，但是当涉及到图像时，它总是会给我以下错误： 错误：图像导入&...
Vite Dev 模式可以工作，但服务构建不起作用。 n2.BigInt 不是函数
所以我在我的项目中使用vite，这是一个使用turborepo的monorepo设置。使用开发模式或构建项目时没有问题，但是当我为项目提供服务时，我收到错误
在 GCP 计算引擎代码服务器上运行 django 时出现 CORS 问题
我正在开发一个 Django 项目。为此，我在个人笔记本电脑上以及在 GCP 计算引擎上运行的远程代码服务器实例 (VS Code Remote) 上工作。 我在 https://dev 上运行代码远程。
Vite 应用程序在 DEV 中可以运行，但在 BUILD 和 PREVIEW 后不能运行 BigInt 不是一个函数
大家好，我已经被这个问题困扰了一段时间，我通过 vite config 和 tsconfig 更改尝试了许多建议的解决方案。但我在构建 m 时仍然遇到 BigInt 的问题...
使用 create-next-app 启动新的 Next.js 14 应用程序时，为什么会出现与 favicon.ico 相关的“模块未找到”错误？
我运行了以下命令来启动一个新的 Next.js 应用程序： npx create-next-app@latest 但是 npm run dev 给了我以下错误： 找不到模块：无法解析 'C:\xxxxx\xxxxx\xxxxx\my-app\src pp\
在发布为 npm 包之前使用 npm 链接测试组件时出现重复的 ReactJS 导入问题
我有一个像这样的简单组件。 从'react'导入React，{useState}； 函数 MyComponentWithState(props) { const [值，setValue] = useState(0); 返回 （ 我的价值... 我有一个像这样的简单组件。 import React, {useState} from 'react'; function MyComponentWithState(props) { const [value, setValue] = useState(0); return ( <p>My value is: {value}</p> ) } export default MyComponentWithState; 我想将它作为单独的包发布在 NPM 上。因此，为此我准备了 package.json 和 webpack.config.js，如下所示。 package.json： { "name": "try-to-publish", "version": "0.0.1", "description": "Just a test", "main": "build/index.js", "scripts": { "start": "webpack --watch", "build": "webpack" }, "author": { "name": "Behnam Azimi" }, "license": "ISC", "peerDependencies": { "react": "16.9.0", "react-dom": "16.9.0" }, "dependencies": { "react": "16.9.0", "react-dom": "16.9.0", "prop-types": "15.7.2", "react-scripts": "3.1.1", "webpack": "4.39.3" }, "devDependencies": { "@babel/core": "7.6.0", "@babel/plugin-proposal-class-properties": "7.5.5", "@babel/preset-env": "7.6.0", "@babel/preset-react": "7.0.0", "babel-loader": "8.0.6", "babel-plugin-transform-object-rest-spread": "6.26.0", "babel-plugin-transform-react-jsx": "6.24.1", "css-loader": "3.2.0", "node-sass": "4.12.0", "sass-loader": "8.0.0", "style-loader": "1.0.0", "webpack-cli": "3.3.8", "webpack-external-react": "^1.1.2" } } webpack.config.json： const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'build'), filename: 'index.js', libraryTarget: 'commonjs2' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, include: path.resolve(__dirname, 'src'), use: { loader: "babel-loader" } }, ] }, resolve: { alias: { 'react': path.resolve(__dirname, 'node_modules/react'), 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'), } }, externals: { 'react': "commonjs react", 'react-dom': "commonjs react-dom" }, }; 这是我的 .babelrc: { "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": ["@babel/plugin-proposal-class-properties"] } 当我将组件发布到 NPM 并使用 `npm install 将其安装到我的另一个 ReactJs 项目中时，这些配置就像魅力一样，但我的观点是本地测试！ 我想在发布之前测试这个组件/库。为此，我使用 npm link 功能将我的组件与我的主 ReactJS 项目链接起来。 正如您在上面看到的，我的组件是功能性的，我也使用了钩子。因此，当我将本地链接的库注入到我的主 ReactJs 项目中时，会遇到此错误， 无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一： 1.您的React和渲染器版本可能不匹配（例如React DOM） 2. 你可能违反了 Hooks 规则 3. 您可能在同一个应用程序中拥有多个 React 副本 我的问题与第三个原因有关。我的项目使用 ReactJs 并导入一次，我的组件也会导入 React！我的意思是在一个项目中两次 React 导入！. 我的 Webpack 配置中还有关于 react 和 react-dom 的 externals 配置。 我应该怎么做才能解决这个问题？我的错误在哪里？ 更新： 我也尝试过 @sung-m-kim 和 @eddie-cooro 所说的，但没有成功！意思是，我更改了 package.json 并从 react 中删除了 react-dom 和 dependencies 并将它们添加到 devDpendencies。 我终于通过这些步骤解决了这个问题。 运行npm链接里面 <your-library-package>/node_modules/react 还有 运行npm链接里面 <your-library-package>/node_modules/react-dom 然后在 应用程序根目录中运行 npm link react 和 npm link react-dom 并且不要忘记将 React 和 React-dom 作为库中的外部对象保留 // webpack.config.js const externals = { "react": "react", "react-dom": "react-dom", } module.exports = { . . . externals } 我解决了我的问题。我使用 RollupJS 而不是 Webpack 作为捆绑工具进行捆绑。 这是我的rollup.config.js： import {uglify} from 'rollup-plugin-uglify' import babel from 'rollup-plugin-babel' export default { input: "./src/index.js", external: ['react', 'react-dom'], output: { name: 'test-lib', format: "cjs", }, plugins: [ babel({ exclude: "node_modules/**" }), uglify(), ], }; 和我的package.json： { "name": "test-lib", "version": "1.0.0", "main": "dist/test-lib.min.js", "scripts": { "build": "rollup -c -o dist/test-lib.min.js" }, "author": "Behnam Azimi", "license": "ISC", "peerDependencies": { "react": "^16.9.0", "react-dom": "^16.9.0" }, "devDependencies": { "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@babel/preset-react": "^7.0.0", "rollup": "^1.21.4", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-uglify": "^6.0.3" } } 经过这些更改，npm link在我的ReactJS（Hooks）项目中真正发挥了作用。 请注意，这只是一个简单的 Rollup 配置来展示我的解决方案，您可以在配置中添加多种内容，例如热重载、样式加载器和许多其他插件。 仅在 package.json 的 react 部分（而不是 react-native）内设置 peerDependencies 和 dependencies 包。另外，对于本地开发（当您的包未包含在任何其他 React 项目中并且您想在本地运行它时），您可以使用 devDependencies 字段。 我在打字稿反应项目中解决了这个问题。 可能，当使用 npm link 时，请使用主应用程序项目和组件项目中的 react。 因此，在您的 package.json 中从 react 和/或 dependencies 中删除 devDependencies 检查答案：https://stackoverflow.com/a/62807950/5183591 我也有同样的问题。 就我而言，我开发了一些 UI 组件作为包，其中有一个包含 React 应用程序的示例文件夹，用于创建 React 应用程序。 问题是，当我使用 npm i ../ 将包安装到示例应用程序中时，它会将包中的所有文件安装到示例应用程序中，包括 node_modules 文件夹。由于我已经安装了 react 和 react-dom 作为对等依赖项，示例应用程序现在有两个不同的 React 副本。 从包中删除 node_module 文件夹并重新安装包再次解决了我的问题。
为什么我有很多对 API 的请求，需要在 next.js 13v 的服务器端获取数据
我使用 Next.js 13v 在服务器端获取数据。 我的组件 const 页脚 = async () => { // 获取数据 const allCategories = (await getAllCategories({})).data; 返回 我使用 Next.js 13v 在服务器端获取数据。 我的组件 const Footer = async () => { // Get data const allCategories = (await getAllCategories({})).data; return <footer className={styles.footer}></footer>; }; 我的功能 export const getAllCategories = async ( params: IGetAllCategoriesRequest, ): Promise<AxiosResponse<IGetAllCategoriesResponse>> => { const url = 'static-pages/category/public'; const response = await axiosInstance.get<IGetAllCategoriesResponse>( url, { params: params, }, ); return response; }; 如果请求成功，我有一个请求 但是如果出现错误，我有很多请求，然后重定向到错误页面 本机获取具有相同的行为 那么为什么我在 next.js 13v 中对 API 有很多请求并在服务器端获取数据？ 可能和开发模式有关。我发现这篇文章可能与此行为有关：https://dev.to/noclat/fixing-too-many-connections-errors-with-database-clients-stacking-in-dev-mode-with-next -js-3kpm
在具有 Open Liberty Dev 模式的 Maven 项目中使用本地库
我有一个 Maven 项目，它构建了一个部署到 Open Liberty 的战争。我正在使用 Liberty maven 插件： io.openliberty.tools 我有一个 Maven 项目，它构建了一个部署到 Open Liberty 的战争。我正在使用 Liberty maven 插件： <plugin> <groupId>io.openliberty.tools</groupId> <artifactId>liberty-maven-plugin</artifactId> <version>3.9</version> <!-- Specify configuration, executions for liberty-maven-plugin --> </plugin> 我正在利用开发模式并且它运行良好。但是，我想在 Dev 模式下使用本地 jar 文件库。 我期望我能够将 jar 文件放置在项目中的特定位置，并且 Liberty 开发模式会自动拾取它们 - 类似于自动拾取 server.xml 的方式src/main/liberty/config。我的 server.xml 设置为在此处查找库：${shared.config.dir}/lib/global，因此我尝试将罐子放入 src/main/liberty/shared/config/lib/global 中，但这不起作用。 我看到的另一种选择是使用 Libity 插件的 copyDependencies 配置。 有一些推荐的方法可以实现我想做的事情吗？理想情况下，我想要最简单的解决方案，既适用于 liberty dev 模式，也适用于 vanilla maven 构建 (mvn package)。 这里的类似问题利用了 copyDependencies 配置，但具体来说，我正在寻找本地 jar 的最佳解决方案（是的，我可以使用系统范围的 Maven 坐标或在本地安装 jar） 如何在 Maven 构建期间将外部依赖项复制到 Open Liberty 谢谢 好问题，稍微概括一下问题，您可能可以使用三种方法： 1.使用资源插件 <build> <resources> <!-- Explicitly configure the default too --> <resource> <directory>${project.basedir}/src/main/resources</directory> </resource> <!-- Custom library --> <resource> <directory>${project.basedir}/mylib</directory> <targetPath>${project.build.directory}/liberty/wlp/usr/shared/lib/global</targetPath> <!-- Default, but just emphasizing the point --> <filtering>false</filtering> </resource> </resources> 由于开发模式在其“生命周期”中调用 resources:resources 目标，因此可以在没有任何插件配置的情况下进行配置（使用“/project/build/resources”（在 XPath 术语中）元素），并使用您的 <targetPath>可以复制到任何位置。 2.添加到config目录（src/main/liberty/config） 除了src/main/liberty/config/server.xml处的主服务器XML配置文件之外，您还可以将其他文件和目录放在那里，所有文件和目录都将通过开发模式复制过来。 所以你可以创建，例如src/main/liberty/config/mylib/my.jar，它会被复制到target/liberty/wlp/usr/servers/defaultServer/mylib/my.jar。然后，您可以从 server.xml 将此位置引用为相对于服务器配置目录的 "mylib/my.jar"。 （这不太适合要求复制到“.../shared/lib/global”的原始用例，但可能适合其他查看此问题的人）。 3.添加系统范围的依赖项 这在原来的问题中已经提到过。我不太喜欢这个解决方案。为了完整起见，我会提及它，但请您自行查找详细信息。 这可能会很有趣。
我正在使用 Expo/React Native/Typescript 构建一个类似于填字游戏的小型拼图应用程序。 这是 PuzzleMain 组件的精简版本： const PuzzleMain：React.FC 我正在使用 Expo/React Native/Typescript 构建一个类似于填字游戏的小型拼图应用程序。 这是 PuzzleMain 组件的精简版本： const PuzzleMain: React.FC<PuzzleMainProps> = ({ navigation }) => { let puzzle: AcrosticPuzzleData = parseAcrosticPuzzle(PUZZLE_TEXT); const grid = <PuzzleGrid puzzle={puzzle} />; const clueView = <PuzzleCluesView puzzle={puzzle} />; const [index, setIndex] = React.useState(0); return <View style={styles.container}> {index == 0 ? grid : clueView} <View style={styles.keyboardContainer}> <Button onPress={() => setIndex(index == 1 ? 0 : 1)} title={"See " + routes[index == 0 ? "Grid" : "Clues"].key} /> <Keyboard /> </View> </View>; } 总结一下，有“网格”组件和“线索”组件，并通过按钮在它们之间进行切换。 毫不夸张地说，在我用来测试的 Pixel 5 上点击此按钮大约需要 3 秒的时间才能进行更改。我在这里做错了什么？使用Expo在网络上打开这个，它立即发生，所以可能它是Android特有的？ 我尝试过的事情： 记住 PuzzleGrid 和 PuzzleCluesView 组件（const PuzzleGrid: React.FC<Props> = memo(({ puzzle }) ...。这基本上没有什么区别。我检查过，在我为备忘录功能制作的自定义拼图比较器中没有打印任何内容，所以我认为它没有重新渲染。 改用 TabView 在组件之间滑动 - 这有效！但说实话，我真的更喜欢两者兼得，而且当我将其合并到 TabView 实现中时，按钮同样很慢。 使用 npx expo start --no-dev 并仅构建一个 apk 并安装 - 这使得速度更快，但仍然可能需要整整一两秒，这太慢了。 正如我所看到的，您正在执行条件渲染，因此每次条件更改时，整个组件都会被创建为新组件。这种方法会使渲染速度变慢，具体取决于组件的重量。 为什么备忘录不起作用？ Memo 是一种优化技术，并不能保证性能提升。 现在，提升加载速度 内部优化PuzzleGrid和PuzzleCluesView，比如每个可以接收重复道具的子组件都会被memo覆盖，重型物品会异步加载，使用loader。 使用 InteractionManager 提高加载速度，并帮助显示加载程序而不冻结 UI。 不要卸载组件，而是重叠它们并使用可见性，因为可见性不会卸载组件 而不仅仅是 {index == 0 ? grid : clueView}你可以尝试类似的事情 <View> {grid} <View style={{ // Add height and other required props to make it visible position: 'absolute', visibility: index == 0 ? 'hidden' : 'visible', }}> {clueView} </View> </View>