但是，列表中的每个项目都需要是唯一的，因为 React 使用 key 来跟踪 DOM 中的所有记录。如果没有 key，React 将无法知道添加、删除或修改了什么。...基本上，有两种命名约定，如下所示： Pascal Case（大驼峰命名法） Camel Case（小驼峰命名法） 无论您的组织或项目将哪种大小写规范作为标准，请记住，您命名文件夹、变量、函数或方法时应该让它们有一定的意义...但我们应该记住的一件事是文件/文件夹结构很重要，因为它给应用程序提供了方向感，告诉您在哪里放置/查找某些内容。在制定文件结构时，您可以依据个人喜好，但也要始终考虑到接下来接手代码的人。...可以将整个应用程序中要使用的逻辑提取到一个组件中，并在任何时候使用。这是另一种 DRY 技术，这将使您免受许多代码行的影响，并隔离错误。...这非常重要，因为随着应用程序的增长，实施测试以避免问题将变得非常重要。测试可以巩固代码，并确保您的功能和逻辑按预期工作。
要设置它们中的每一个，我们既可以使用 yarn init（在每个文件夹中），也可以手动创建文件（例如，通过 IDE）。 软件包名称使用的命名约定是在每个软件包之前都使用 @my-app/* 作为前缀。...文件 在本教程中，common 软件包将非常简单。首先，从添加新文件夹开始： src/ 文件夹，包含包的代码。...在我们的案例中，我们希望有一个可以运行 Node.js 应用程序的环境。 WORKDIR 设置容器中的当前工作目录。 COPY 将文件或文件夹从当前本地目录（项目的根目录）复制到容器中的工作目录。...如您所见，在此步骤中，我们仅复制与依赖项相关的文件。这是因为 Docker 将每个构建中的命令的每个结果缓存为一层。...添加 .dockerignore 使用 .dockerignore 文件不是强制性的，但强烈建议您使用以下文件： 确保您没有将垃圾文件复制到容器中。 使 COPY 命令的使用更加容易。
不仅在 React 中，在所有的应用程序开发中，通用的规则都是尽可能保持代码的简洁和小巧。 React 最佳实践指示保持无错误的代码和精辟的代码。...当您在 React 中工作时，请记住您使用的是 JSX (JavaScript 扩展)而不是 HTML。 您创建的组件应该以大写的 camel 命名，即 「Pascal Case」。...不仅仅是在 React 中，还应该在其他编程语言中进行测试。 测试非常重要，因为它确保代码能够按照预期的方式运行，并且易于快速地进行测试。...在最佳实践中，在 components 文件夹中创建一个 __test__ 文件夹。 使用组件的名称作为测试文件 . test.js 的前缀....如果您编写更多的测试用例，它将为您的代码提供更多的测试覆盖率。 但是，至少你应该做一些崩溃组件测试。
为前端项目创建适当且可扩展的文件结构可能是具有挑战性的。在使用像React这样的非优化工具时，我们拥有很大的自由度。 通常，当我们讨论文件结构时，讨论重点是整个项目。...Test 测试 为什么将测试放在这里而不是放在单独的tests目录中？两个字-代管！ 属于一起的文件应该放在一起。如果您想象编辑或者删除组件的过程，此方法的好处将变得非常明显。...出于上述所有相同的原因，将每个story及其相应的组件并置在一起很重要。 Styles 样式文件 使用CSS-in-JS时，可以直接在组件文件中创建样式化的组件。...它们通常供主组件使用。 如果您打算在整个应用程序中使用它们（如MenuItem示例所示），则应将它们重新导出到主索引文件中。没有主要组件的子组件应该是不可能的。...我们应该将其从Menu组件中取出，然后将其放在更高的位置，也许放在我们的常规utils文件夹中。
react-redux 配置说明 reducer 首先我们在项目/app/reducers下新建一个index.js，用于导出所有的reducer。...在index中引入后，即为state中的admin节点。 configureStore 配置store的文件。这个文件的功能正如其名，就是配置store的。其中我们主要做了如下工作。...最后倒入store，用于在App中使用。 react-router 配置说明 react-router中的配置主要在/container/index.js文件中。该文件负责导出所有路由中的文件。...关于admin中为什么判断this.props.userInfo后续权限判断哪里会说到。以及会说这里遇到的一些问题（重点）。这里我们还是只关注路由部分。再次强调，必须使用match 来取url。...后续随着开发，回往/app/reducers中在添加对应的reducer。以及在路由中添加新建的页面。 如果您有更好想法，欢迎您联系我。我们一起改进~ 如果有什么不明白的地方，欢迎提issue。
幸运的是，在这种情况下，样式对象始终是相同的，因此我们可以在 App 组件之外创建一次，然后在每次渲染时重新使用它。...键应该是唯一的，并且列表中的任何两个元素都不应具有相同的键。 我们上面使用的 item.name 键并不理想，因为多个列表元素可能具有相同的名称。...works if you use the full name: 您不能使用短语法（）将键添加到片段，但如果您使用全名，它可以工作： ...如果周围的 DOM 结构发生变化，子组件将被重新挂载。例如，这个应用程序在列表周围添加了一个容器。 在更现实的应用程序中，您可能会根据设置将项目放在不同的组中。...在可能的情况下，保持 DOM 结构相同。 例如，如果您需要在列表中的组之间显示分隔符，请在列表元素之间插入分隔符，而不是为每个组添加包装 div。
下面是一些建议的方式： pages 与页面名称相同，您需要将所有页面放在此文件夹中 components 与组件名称相同，您需要将所有组件放在此文件夹中 该文件夹将包含您的 JSX 文件、CSS 文件和...因此，我们可以将这些组件放在不同的文件夹中，如下所示： src ├── components │ ├── Login │ │ ├── Login.js │ │ ├── Login.css...让我们看看如何在 React.js 中使用 SOLID 原则： 单一职责原则（SRP） 意味着每个组件应该只做一件事 在设计 React 应用程序时，请记住这个原则，因为它将使您的代码更易读和可维护 开闭原则...的类，它扩展到另一个名为 Car 的类，我们应该能够扩展类 Make 而不影响 Car 类的功能 在使用类组件或在 React 中使用 TypeScript 时是可能用到 接口隔离原则（ISP） 应该仅使用所需的接口...在 React 中，这可以说是 props props 在每个 React 应用程序中非常重要，当将这些 props 从父组件传递到子组件时，只应传递所需的内容，而不是所有 props 中的内容 可以通过在传递之前解构
组件与视图 app/components/ 和 app/views 文件夹都包含 React 组件。 使用通常不会在代码库的其他部分重用的 UI 视图。 使用设计为高度可重用的 UI 组件。...组件应该有一个关联的 .stories.js 文件来记录它应该如何使用。...注意：你的文件名必须是 .spec.jsx 否则 jest 不会运行它！ 我们在 setup.js 中定义了有用的 fixtures，使用这些！如果您以重复的方式定义模拟数据，则可能值得添加此文件。...仅在检查不存在时使用 queryBy... 仅当期望元素在可能不会立即发生的 DOM 更改后出现时才使用 await findBy......https://testing-playground.com/ 不要忘记，你可以在测试中的任何地方放置 screen.debug() 来查看当前的 DOM。 在官方文档中阅读有关查询的更多信息。
Testing 在测试方面，我们认为单体前端和微前端之间没有太大区别。一般来说，您用来测试单体前端的任何策略都可以在每个单独的微前端中重现。...这可以使用您首选的功能/端到端测试工具（例如 Selenium 或 Cypress）来完成，但不要太过分；功能测试应该只涵盖无法在测试金字塔的较低级别进行测试的方面。...我们的意思是，使用单元测试来覆盖您的低级业务逻辑和呈现逻辑，然后使用功能测试来验证页面是否正确组装。例如，您可以在特定 URL 加载完全集成的应用程序，并断言相关微前端的硬编码标题存在于页面上。...这与我们之前一直在掩盖的历史对象相同。我们使用这个对象来操作客户端历史，我们也可以使用它来将多个 React Router 链接在一起。...因此，尽管考虑每个架构决策对性能的影响很重要，但请确保您知道真正的瓶颈在哪里。 Environment differences 我们应该能够开发单个微前端，而无需考虑其他团队正在开发的所有其他微前端。
入口(entry) 将您应用程序的入口起点认为是根上下文(contextual root)或app第一个启动文件。...一般来说，在Angular中我们将是启动.bootstrap()的文件，在Vue中则是new Vue()的位置，在React中则是ReactDOM.render()或者是React.render()的启动文件...12345678 // 在webpack1里使用loader属性，在webpack2中为rules属性module.exports = {module: {rules: [{test: /\....CommonsChunkPlugin 提取代码中的公共模块，然后将公共模块打包到一个独立的文件中，以便在其他的入口和模块中使用。...ExtractTextPlugin 可以将样式从js中抽出，生成单独的.css样式文件（同样因为方便调试[捂脸+1]）。
（意味着我们在调用 setState() 时不应该依赖当前状态） 解决方案是将一个函数传递给 setState()，并以先前的状态作为参数。...要在 React 中使用动态键名称设置状态，可以在 ES6 中使用计算属性名称。计算属性名称允许您使用表达式来指定对象文字中的属性名称。...您可以通过使用 JSX 中的 autoFocus 属性或通过以编程方式将输入元素集中在功能组件中的 useEffect 挂钩或类组件中的 componentDidMount 生命周期方法中，将输入元素集中在页面加载上...j) 分析和优化您的 Webpack 捆绑包膨胀：在生产部署之前，您应该检查并分析您的应用程序捆绑包以删除不需要的插件或模块。...这使您的代码对于其他开发人员来说更具可读性和理解性。 一致的格式和命名约定：在整个代码库中遵循一致的格式和命名约定。这包括缩进、间距、变量和组件的命名以及文件命名约定。
react项目的脚手架库: create-react-app，项目的整体技术架构为: react + webpack + es6 + eslint，使用脚手架开发的项目的特点: 模块化, 组件化, 工程化...创建项目并启动第一步，全局安装：npm i -g create-react-app第二步，切换到想创项目的目录，使用命令：create-react-app project_name第三步，进入项目文件夹...(需要web-vitals库的支持)setupTests.js---- 组件单元测试的文件(需要jest-dom库的支持)注意事项1.动态初始化列表，如何确定将数据放在哪个组件的state中？...——某个组件使用：放在其自身的state中——某些组件使用：放在他们共同的父组件state中（状态提升）2.父子之间通信：【父组件】给【子组件】传递数据：通过props传递【子组件】给【父组件】传递数据...：通过props传递，要求父提前给子传递一个函数注意defaultChecked 和 checked的区别，类似的还有：defaultValue 和 value状态在哪里，操作状态的方法就在哪里react
，通过.web.js扩展名可以使该文件仅在Web上使用,其他一些可用的扩展如.native.js、.ios.js和.android.js适用于移动端。...当然，如果您希望将本不同端的代码都保存在一个index.js文件中，则可以使用import { Platform } from 'react-native'来按照条件区分不同平台的代码。...App.web.tsx 该文件是临时添加的文件，用于在使用React Native Web 同构之前验证我们的设置是否正常运行。...最终，您可以删除此文件，因为App的入口js文件可以在移动端运行，也能在Web端运行。...不过为了处理某些在Web上能运行而在移动端不能运行的业务，需要将代码抽离出来存放在``.web.js`为后缀的文件中。
3.3.3 打包静态资源 执行 react-native bundle 命令可以将js代码打包成jsbundle文件，也可将静态文件如图片打包到文件夹中。...通常，您只想使用 CodePush 来解析发布版本中的 JS 包位置，因此，我们建议使用 DEBUG 预处理器宏在使用打包服务器和 CodePush 之间动态切换，具体取决于您是否调试与否。...如果需要动态使用不同的部署，还可以使用 Code-Push options 在JS代码中覆盖部署密钥 方法二：多部署测试 为了有效利用与 CodePush 应用程序一起创建的 Staging 和 Production...详细步骤，看文档吧 方法三：动态部署分配 如果您希望能够执行 A/B 测试，或配置某些用户提前访问到新版本的应用程序(灰度测试)，那么能够在运行时将特定用户动态放置到特定部署中被证明是非常有用的。...修改服务器地址 步骤同多部署测试，然后在 Info.plist 中添加名称为 CodePushServerURL 的字段，将值设置为各个环境的code-push服务器的地址(IP:host)。 5.
一、 使用create-react-app创建react应用 1.1. react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置（语法检查、jsx编译、devServer...robots.txt -------- 爬虫协议文件 src ---- 源码文件夹 App.css -------- App组件的样式 App.js --------- App组件 App.test.js...--- 页面性能分析文件(需要web-vitals库的支持) setupTests.js ---- 组件单元测试的文件(需要jest-dom库的支持) 1.4....——某个组件使用：放在其自身的state中 ——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升） 3.关于父子之间通信：...value, checked必须要写onChange方法配合使用 5.状态在哪里，操作状态的方法就在哪里 ?
你可以把它放在项目根目录下的静态文件夹中，也可以把它放在src文件夹下的动画文件夹中。 这取决于你，因为我们将从任何文件路径导入JSON数据。...我选择把我的JSON文件(称为react-logo.json)放在我的静态文件夹: 安装 Lottie-Web 完成之后，我们将通过引入Lottie -web包来安装Lottie。...一旦安装了lottie-web，我们就可以将动画放置在任何JSX元素中，方法是给出一个指示，表明我们希望它驻留在某个选择器中。 最好的方法是使用id属性，因为它应该只在应用程序的元素中使用一次。...在我们的例子中，我们可以给它指定react-logo的id值: // src/App.js import React from "react"; export default function App.../lottie_light"; 希望这篇文章能够帮助您启动并运行Lottie，当您在web应用程序中寻找一些特别的东西时，可以将Lottie作为一个特性添加到您的React项目中。
在本文中，我将引导您完成将React应用程序（Create-React-App: CRA）迁移到Next.js所采取的步骤。 这非常简单，只需几个小时即可完成。...循序渐进：将CRA转换为Next.js 创建一个新的Next.js项目 首先，在终端中运行此命令以创建新应用程序： $ npx create-next-app 将组件放入Next.js项目： 在新的Next.js...对所有可重复使用的组件使用该组件。 现在，您需要将代表实际页面的组件转换为页面。这就是pages文件夹的用途。页面中的每个文件代表您网站上的一个页面。接着，将页面组件放在此处。...首先，您必须为该类型的资源添加一个webpack加载器到next.config.js中。 对于图片文件，我正在使用next-images。...如您在本文中所见，这使得将React应用程序迁移到Next变得非常容易。 希望您现在应该至少在本地拥有一个正在运行的Next.js应用程序。
将所有应用程序状态都放在一个对象中也会导致其他问题，即使您没有使用Redux。当一个反应获取一个新值，使用该值的所有组件都将更新并必须呈现，即使它是只关心部分数据的函数组件。...但我的观点是，如果您的状态在逻辑上更为分离，并且位于React树中更靠近它的位置，那么就不会出现这个问题。 这是真正的关键，如果您使用React构建应用程序，那么您的应用程序中已经安装了状态管理库。...这种方法的酷之处在于，我们可以将更新状态的常用方法的所有逻辑放在useCount钩子中： function useCount() { const context = React.useContext(CountContext...如何将数据导入每个提供程序取决于这些提供程序使用的钩子以及如何在应用程序中检索数据，但您知道从何处开始查找（在提供程序中）如何工作。...在React中，这种情况一直都会发生，而且它本身通常不是问题（您应该首先集中精力快速进行不必要的重新渲染），但是如果这真的是瓶颈，那么以下是一些在React上下文中使用state解决性能问题的方法： 将你的状态划分为不同的逻辑部分
随着 React 越来越受欢迎，React 开发者也越来越多，在开发过程中也遇到各种各样的问题。...本文我将结合自己实际工作经验，总结 11 个 React 开发中常见的一些错误，帮助您避免一些错误的发生。...如果您刚开始使用 React，那建议这篇文章你要好好看一下，如果您已经使用过 React 开发项目，也建议您能查缺补漏一下。...将 state 值直接绑定到 input 标签的 value 属性 问题描述 当我们直接将 state的值作为参数绑定到 input标签的 value属性上，我们会发现，无论我们在输入框输入什么内容，输入框内容都不会发生变化...错误的使用布尔运算符 问题描述 在 JSX/TSX 语法中，我们经常通过布尔值来控制渲染的元素，很多情况我们会使用 &&运算符来处理这种逻辑： const count = 0; const Comp =
它会带来很多好处，例如： 零副作用 不可变的数据对象更易于创建，测试，和使用； 利于解耦； 更加利于追踪变化； 在 React 环境中，我们使用 Component 的概念来维护组件内部的状态，对状态的更改可以导致组建的重新渲染...专业提示： 所有使用 React.PureComponent 的子组件，也应该是纯组件或函数组件。 3.生成多个块文件 Multiple Chunk Files 您的应用程序始终以一些组件开始。...它不会公开源代码，文件路径等等。 5.依赖优化 在考虑优化程序包大小的时候，检查您的依赖项中实际有多少代码被使用了，会很有价值。例如，如果您使用 Moment.js会包含本地化文件的多语言支持。...这是因为构造函数仅在EditPanel 组件首次创建时被调用。 引用React文档： 避免将 props 的值复制给 state！...DOM 元素上传递 Props 您应该避免将属性传播到 DOM 元素中，因为它会添加未知的 HTML 属性，这是不必要的，也是一种不好的做法。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
