意思是： 数组或迭代器中的每个子元素都应该有一个唯一的“key”属性。 解决的方法和能见到，就是为数组中的元素传递一个唯一的key（例如list的唯一id），就可以很好地解决这个问题。...由于这个是一个 warning ,很多同学在开发中可能会忽略或者是屏蔽调这样一个警告，那究竟加不加这个 key 属性会有什么不一样？它的作用又是什么。...React 中的 element diff 算法 当在数组或者迭代器中循环渲染元素的时候，其实是用到了 React 的 element diff 算法，，当节点处于同一层级时，React diff 提供了三种节点操作...允许开发者对同一层级的同组子节点，添加唯一 key 进行区分 新老集合所包含的节点，老集合进行 diff 差异化对比，通过 key 发现新老集合中的节点都是相同的节点，因此无需进行节点删除和创建，只需要将老集合中节点的位置进行移动...参数列表中的固定位置不变，这个位置就是天然的 key。
Build项目中, 使用 Webpack 的 Babel 对项目代码进行编译,因此使用 TypeScript 的唯一目的仅仅是对项目代码进行类型检查。...strict 相关的配置都应该为 true forceConsistentCasingInFileNames:禁止对同一个文件的不一致的引用.例如:引用文件时大小写必须一致 moduleResolution...: React 代码规范的校验规则 react/jsx-key:用来检查是否声明了 key 属性 no-array-index-key:用来检查是否使用了数组索引声明 key 属性 ....其他 React...这将输出一条语义化的消息和未格式化文件的列表。上面脚本的意思是格式化src目录下的所有文件 prettier:重新格式化所有已被处理过的文件。类似于eslint --fix的工作。...栗子 git commit -m 'feat:添加了一个用户列表页面' git commit -m 'fix:修复用户列表页面无法显示的bug' git commit -m 'refactor:用户列表页面代码重构
存储在同一表中的信息应该是一种类型或者一种清单，便于SQL化管理； column：列。表中没列都有相应的数据类型； row:行。每行记录一条记录。 primary key：主键。...表中每一行都应该有标识自己的一列（一组列）。主键那一列其值能够唯一区分表中每一行。所以同一表中主键任意两行都不具有相同的键值。 二，基础操作， 在MySQL命令行使用程序时，以分号（；）结束每个语句。...USE mysqlstudy; 该语句选择要使用的某一个数据库。如图： ? SHOW tables;该语句显示数据库中所有的表。如图： ?...SHOW columns from table;该语表示列出某个表中列及列的信息。如图： ? SHOW errors/show warnings; 显示出最近的错误和报警。...测试只显示了最近的一条错误/报警。如图： ? 说明一下，SQL语句不区分大小写，但关键字一般采用大写，列表名一般采用小写。系统在处理SQL语句时，多余所有的空格都将被忽略。 （待续）
所有的函数都应该设置为常量。...对象obj的最后一个属性名，需要计算得到。...这时最好采用属性表达式，在新建obj的时候，将该属性与其他属性定义在一起。这样一来，所有属性就在一个地方定义了。 另外，对象的属性和方法，尽量采用简洁表达法，这样易于描述和书写。...如果函数体较为复杂，行数较多，还是应该采用传统的函数写法。 所有配置项都应该集中在一个对象，放在最后一个参数，布尔值不可以直接作为参数。...; alert(message); } greet(); 使用 ESLint 检查这个文件，就会报出错误。
为了获得更准确的错误报告，每条声明都应该独占一行。 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。...对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。...ok // ... } 37.类中不要定义冗余的属性。...// ✓ ok 44.catch 中不要对错误重新赋值。...它以“/”开头，以“/”结束，其间的每一行均以“”开头（均与开始符的第一个“”对齐），且注释内容与“”间留一个空格。 3.1 @module。
组件数据 组件的 data 必须是一个函数。 当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。...一般我们在两种常见的情况下会倾向于这样做： 为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。...在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。...为组件样式设置作用域 对于应用来说，顶级 App 组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的。 这条规则只和单文件组件有关。你不一定要使用 scoped 特性。...单例组件名 只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。 这不意味着组件只可用于一个单页面，而是每个页面只使用一次。
流程属性 一个BPMN2过程是不同类型的节点与使用连接流程图。这个过程本身暴露了以下属性： id：过程中的唯一的ID。 name：过程中的显示名称。 Version: 版本号的过程。...错误处理事件，只能有传入事件没有传出事件，错误事件包含以下属性： Id: 节点的ID（这是一个节点容器内唯一） Name: 节点的显示名称 FaultName: 故障名称，使用些名称来处理故障 FaultVariable...用户任务包含以下属性： Id: 节点的ID（这是一个节点容器内唯一） Name: 节点的显示名称 TaskName: 任务的名称 Priority: 一个整数，指示任务的优先级 Comment:与任务相关的描述...这个文件的列表，然后可以绑定以便在使用过程中的一个过程变量。工作项目完成后，该值将被复制。 9）子流程 ? 表示从这个过程中的另一个进程调用。一个子流程节点都应该有一个传入的连接和一个传出连接。...它包含以下属性： Id: 节点的ID（这是一个节点容器内唯一） Name: 节点的显示名称 ProcessId: 应执行的进程的ID Wait for completion: 如果此属性为true，这个子进程的节点只会继续下去
eslint 是非常有名的 linter，地球上每一个 JavaScript 程序员都应该知道。...linter 是一种代码静态分析工具，它可以帮你找到代码中可能存在的错误与 bug，也能找出代码风格的问题，不过因为只是静态分析，对 js 这种动态类型的语言所能做的就比较有限了，毕竟在 js 中，变量的类型如果不执行就不容易知道...code 对象，后面的 fixer 需要用到 const sourceCode = context.getSourceCode() // 用 for 循环把对象的属性每两个氛围一组...，上一个属性结尾的行号必须与下一个属性结尾的行号相差 2 以上 // 也就是中间有两个以上的空行 if (node.properties[i + 1].loc.start.line...，因为是在两个属性之间，所以就用上一个的 end 与后一个的 start 来指定 loc: { start: node.properties
package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。 如果同一个目录下有多个配置文件，ESLint 只会使用一个。...ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。...在 ESLint 中，插件可以暴露额外的规则以供使用。为此，插件必须输出一个 rules对象，包含规则 ID 和对应规则的一个键值对。...eslintignore 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。...，将 prettier 作为 ESLint 的规则来使用，代码不符合 Prettier 的标准时，会报一个 ESLint 错误，同时也可以通过 eslint --fix 来进行格式化。
使用此规则的方式见下面 ：eslint+prettier配合配置 大概看出的几个共同点 都会把没有改变过的变量从let定义改为const定义 字符串都转为单引号 该有的空格都有 未使用的变量会报错 ...插件： eslint-plugin-html 一个ESLint插件，用于整理和修复HTML文件中包含的内联script脚本,支持多个script标签,此行为不适用于“模块”脚本（即：<script type...了解配合配置的方式，先来了解几个npm包 插件： eslint-plugin-prettier 作用：一个形式上跟standard类似的一个代码规则，用来在基础规则上扩展的规则，eslint的rules...规则优先级大于prettier的规则。...规则冲突示例： 可以看到同一行的同样的错误会抛出两个版本的错误信息 3:19 error Replace `"axios"` with `'axios';` prettier/prettier
如何计算Virtual Dom中真正变化的部分，这就需要diff算法。 Virtual Dom配合高效的diff算法，才能够快速的渲染改动的页面，而不会渲染整个页面。 1....注意：对于同一层级的一组子节点，它们可以通过唯一 id 进行区分（这就是为什么在批量创建同类型组件时需要添加key属性，并且建议将key定义为有意义的唯一标示，而不是index索引）。...Vue在处理children数组时，会循环遍历newChildren（新列表），每循环到一个子节点，就去 > oldChildern（旧列表）中找和当前节点相同的那个旧子节点。...最后，oldChildern未被匹配到的节点会被删除。 Vue渲染列表时，如果提供key属性，那么，可以作为节点的唯一标识。...那么在oldChildern中找相> 同节点时，可以直接通过key获取节点，无需通过循环来查找节点。 可见，Vue和React对于key的使用并不相同
但是由于javascript的动态弱类型语言特性，导致在开发中如果不加以约束会容易出错，也正是因为这种特性导致当程序出现错误的时候，我们需要花费更多的时间在执行的过程中不断去调试，Eslint的出现就是为了让开发人员可以在开发的过程中就发现错误而非在执行过程中...(不会导致程序退出) "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出) 正常的配置通常是键值对的形式，那么这一类的配置是没有属性的只需要开启关闭即可类似于...2 no-delete-var 不允许使用delete操作符 2 no-proto 不允许使用__proto__属性 2 ESLint 提供了大量内置的规则，这里是它的规则列表 ESLint Rules...； 紧接着在父级目录里寻找，一直到文件系统的根目录； 如果在前两步发现有 root：true 的配置，停止在父级目录中寻找 .eslintrc； 如果以上步骤都没有找到，则回退到用户主目录 ~/....eslintrc 中自定义的默认配置； 通常我们都习惯把 ESLint 配置文件放到项目根目录，因此可以为了避免 ESLint 校验的时候往父级目录查找配置文件，所以需要在配置文件中加上 root: true
② 根据模式获取到对应的环境变量文件 根据回调参数中的 mode 属性，拼接上本地文件的前缀名，就可以拿到整个环境变量文件的名称了。...： 需要保持图片名称唯一，增加心智负担 更新图片时，不能立刻刷新缓存，增加开发成本 好处是可采用的，坏处是可优化的，还需要开动脑筋实现一个完美的解决方案，但是目前来说本人认为并没有很好用 ESLint...将数据库连接作为对象存储在内存中，当用户需要访问数据库时，并非建立一个新的连接，而是从连接池中取出个已建立的空闲连接对象。...service 类 当一个业务功能需要执行一个 dao 类中的多个方法才能完成时。...当一个业务功能需要执行多个 dao 中的方法才能完成时 当一个业务功能需要对 dao 类取出来的数据进行处理时 图书表的创建 一级分类 CREATE TABLE `dangdang` .
编程风格 块级作用域 （1）let 取代 var ES6提出了两个新的声明变量的命令：let和const。其中，let完全可以取代var，因为两者语义相同，而且let没有副作用。...JavaScript可能会有多线程的实现（比如Intel的River Trail那一类的项目），这时let表示的变量，只应出现在单线程运行的代码中，不能是多线程共享的，这样有利于保证线程安全。...，可以在创造对象的时候，使用属性表达式定义。...如果函数体较为复杂，行数较多，还是应该采用传统的函数写法。 所有配置项都应该集中在一个对象，放在最后一个参数，布尔值不可以直接作为参数。...如果只是需要key: value的数据结构，使用Map结构。因为Map有内建的遍历机制。
通常来说限流的目的是通过对并发访问/请求进行限速，或者一个时间窗口内的的请求进行限速来保护系统，一旦达到限制速率则可以 拒绝服务（定向到错误页或告知资源没有了）、排队 或 等待（比如秒杀、评论、下单）、...return key; } 任何方法添加上述注解具备了一定的限流能力(具体方法需要在 spring aop 指定拦截范围内)，如上代码表示以参数 key 作为限流 key ，每 2 分钟请求次数不超过...，尤其在复杂的微服务中一套系统中包含了多个子系统服务，而一个子系统服务往往会去调用另一个服务，而服务调用服务无非就是使用 RPC 通信或者 restful ，分布式系统中的网络延时或中断是避免不了的，通常会导致服务的调用层触发重试...如果单纯使用幂等模板进行业务处理，需要自己设置相关幂等key，且要保证其唯一性。...幂等拦截器获取幂等 ID 的优先级： 首先判断 Idempotent 的 spelKey 的属性是否为空，如果不为空会根据 spelKey 定义的 spring 表达式生成幂等 ID 。
前言 Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。...其实我听过一种说法，既然官方要求一个 唯一的key，是不是可以用 Math.random() 作为 key 来偷懒？...用组件唯一的 id（一般由后端返回）作为它的 key，实在没有的情况下，可以在获取到列表的时候通过某种规则为它们创建一个 key，并保证这个 key 在组件整个生命周期中都保持稳定。...eslint 甚至也专门有一个 rule 叫做 react/no-array-index-key，为什么要有这些约束和规范？如果社区总结了最佳实践，为什么一定要去打破它？这都是值得思考的。...除了你前端写死的永远不变的一个列表，就假设你的列表没有在头部新增一项（导致节点全部依次错误复用），在任意位置 删除一项（有时导致错误删除）等这些会导致 patch 过程出现问题的操作。
我假设你已经知道React的基础知识，因此不会涉及“不要改变道具或状态”这样的陷阱。 坏习惯 本节中的每个标题都是你应该避免的坏习惯! 我将使用一个典型的待办事项列表应用程序示例来说明我的一些观点。...重复的 State 每个 state 都应该有一个单一来源。如果同一信息以 state 存储两次，那么这两个state可能会不同步。...在你的代码库中，任何复杂的reducers都应该有接近100%的测试覆盖率。我强烈推荐使用测试驱动开发开发复杂的简化程序。...如果你没有使用React Hooks ESLint插件，你会很容易错过你的效果的一个依赖项，导致一个效果不能像它应该的那样经常运行。这个很容易修复——只需使用ESLint插件并修复警告。...想象一下，在一个待办事项列表应用程序中，“X”按钮删除待办事项时是不可见的，直到你将鼠标悬停在该待办事项上。有些设计师喜欢这样的“整洁”，但这需要用户四处搜寻，弄清楚如何执行基本操作。
通常来说限流的目的是通过对并发访问/请求进行限速，或者一个时间窗口内的的请求进行限速来保护系统，一旦达到限制速率则可以 拒绝服务（定向到错误页或告知资源没有了）、排队 或 等待（比如秒杀、评论、下单）、...return key; } 任何方法添加上述注解具备了一定的限流能力(具体方法需要在 spring aop 指定拦截范围内)，如上代码表示以参数 key 作为限流 key ，每 2 分钟请求次数不超过...，尤其在复杂的微服务中一套系统中包含了多个子系统服务，而一个子系统服务往往会去调用另一个服务，而服务调用服务无非就是使用 RPC 通信或者 restful ，分布式系统中的网络延时或中断是避免不了的，通常会导致服务的调用层触发重试...在实际系统中有很多操作，不管操作多少次，都应该产生一样的效果或返回相同的结果。以下这些应用场景也是通常比较常见的应用场景： 1....如果单纯使用幂等模板进行业务处理，需要自己设置相关幂等key，且要保证其唯一性。
领取专属 10元无门槛券
手把手带您无忧上云
