首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

用连字符分隔的名称命名react组件文件有什么缺点?

用连字符分隔的名称命名React组件文件的缺点是:

  1. 命名不一致:使用连字符分隔命名文件可能导致命名不一致的问题。在不同的文件系统和操作系统中,对于连字符的处理方式可能不同,有些系统会将连字符解释为特殊字符或者路径分隔符,这可能导致文件名解析错误或者不一致。
  2. 难以读取和理解:使用连字符分隔的文件名可能会使文件名变得冗长且难以读取和理解。长文件名可能会增加文件系统的路径长度限制,而且在代码中引用这些文件时,需要记住和输入更长的文件名,增加了出错的可能性。
  3. 不符合命名规范:在React开发中,通常会遵循一定的命名规范,如驼峰命名法。使用连字符分隔的文件名不符合这种规范,可能会导致代码风格不一致,增加维护和阅读代码的困难。
  4. 不易于自动化处理:使用连字符分隔的文件名可能不易于自动化处理。在一些构建工具和脚本中,可能需要对文件名进行处理和解析,使用连字符分隔的文件名可能需要额外的处理步骤,增加了复杂性和潜在的错误。

综上所述,使用连字符分隔的名称命名React组件文件存在一些缺点,包括命名不一致、难以读取和理解、不符合命名规范以及不易于自动化处理。为了提高代码的可读性和可维护性,建议使用符合命名规范的命名方式,如驼峰命名法。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

这些 CSS 命名规范将省下你大把调试时间(文末有福利)

这里向大家介绍一些命名规范,遵照这些规范可以省时省力,少走弯路。 使用字符分隔字符串 如果你常写 JavaScript,那么你知道对变量使用驼峰式命名法(camel case)是一种惯例。...有些团队使用字符分隔(hyphen delimiters)法,还有一些倾向于使用一种叫 BEM 命名法,这种方法更加有条理。...总的来说,这些 CSS 命名规范试图解决 3 类问题: 仅从名字就能知道一个 CSS 选择器具体做什么 从名字能大致清楚一个选择器可以在哪里使用 从 CSS 类名称可以看出它们之间联系 不知你是否见过这样类名...根据上述解释,那么这个组件理想类名称即是 stick-man。 组件样式应写成这样: .stick-man { } 在这里我们使用了字符分隔法,很好!...这就是 BEM 基本用法。 个人来说,我在小项目中一般只用字符分割法来写类名,在用户界面更复杂项目中使用 BEM 方法。 为何要使用命名规范?

927100

React】:CSS 模块化

什么 CSS 要模块化? 模块化 CSS 使用主要场景是棘手大规模 CSS。 写代码并不难,难是在不让你代码随着时间推移成为拖累你“技术债”。 1.1.... box 和 profile 什么关系? profile 和 avatar 什么关系?或者他们之间真的有关系吗? 你应该在 bio 旁边添加 pro-user 吗?...这不是一个页面而是一个组件集合。你会发现页面里包含是 logo,搜索栏,导航,照片列表,辅助导航,标签框,视频播放器等。这些是可以网站任何位置都可以独立使用内容。...BEM 命名约定: .block-name__element--modifier 名称以小写字母书写 名称单词字符(-)分隔 元素由双下划线(__)分隔 修饰符由双连字符(--)分隔 一个 BEM...CSS模块化方案——CSS In JS CSS-in-JS 是一种编程思想,即: JS 语言来写 CSS,而不是独立为一些 .css,.scss 或者 less 之类文件,借助 JS 语言特性来为

1.3K20
  • Vue3 组件注册(2)

    组件名称 在通过 app.component 注册一个组件时,第一个参数是组件名称,定义组件方式两种: 使用 kebab-case(短横线分隔命名) app.component('...但要注意,直接在 DOM(而不是在字符串模板或单文件组件中)中使用时只有 kebab-case 是有效。...而当直接在 DOM 中(而不是在字符串模板或单文件组件中)使用一个组件时,推荐遵循 W3C 规范来给自定义标签命名: 全部小写 多个单词时,多个单词之间字符符号(-)连接 也就是采用 kebab-case...和 methods 等选项了,其实还可以一个 components 选项; 这个 components 选项对应是一个对象,对象中键值对是“组件名称: 组件对象”; 前面我们讲了全局注册组件方式...关于组件更多内容我们会在脚手架中再讲,因为脚手架中我们会使用一个个独立文件编写 Vue 相关代码,那时代码结构会更加清晰。

    67230

    React中引用CSS方式及写法大全

    引用方式 第一种:内联方式 可以使用变量或者传统内联方式 优点: 只生效于当前组件 缺点: 可能产生大量重复代码 import react, { Component } from "react";...[name] .css文件 优点: 复用性强 缺点: 存在样式覆盖问题,不是只生效于当前组件 import React, { Component } from "react"; import TestChidren...,因为个node-sass,scss文件才能在node环境上编译成css文件。...} 第四种:在组件中引用[name].module.css文件 优点: 可实现CSS局部作用域,并且可复用 重点: 1、选择器驼峰命名 2、样式文件后缀名为.module.css 3、在js文件中导入并使用...注: 1、css modules会默认给类名加上一个唯一标识符(哈希字符串),从而实现类名不重复 2、class名称需要使用驼峰命名,不支持 '-' 等连接符 命名规则: xxx.module.css

    21210

    React项目中使用CSS Module

    此外,它是一种通过生成一个随机字符串作为className名称并添加一个唯一哈希来使每个className都唯一工具,从而防止和全局作用域冲突。我们可以使用CSS模块来防止CSS类命名冲突。...最后,在应用中使用这个按钮组件,就像使用普通 React 组件一样。 ---- 2. CSS模块红与黑 优点: 通过使用CSS模块,可以避免CSS类命名空间冲突」。...缺点: 在将样式集成到项目中时,必须将样式包含为带有点号或方括号表示法对象。 与Styled Components不同,CSS模块不接受props。 那么,为什么要使用CSS模块呢?...我们只需要将CSS文件名称更改为[文件名].Modules.css;我们可以任何其他名称替代[文件名]。在使用CSS模块时,我们必须使用import关键字将文件导入到特定组件中。...使用点符号表示法: 如果我们CSS类「包含字符,应使用方括号表示法」: <div className={classes

    1.3K50

    「前端工程四部曲」模块化前世今生(下)

    什么CSS也需模块化? 其实平常我们使用 Vue、React这类框架时,就已经使用到了CSS模块化。...而CSS模块化所针对问题追溯源头其实都很简单: Class命名重复 Class层级结构 CSS代码复用 CSS文件拆分 这也是 CSS 模块化存在原因。 哪些CSS模块化方案?...- 符号,这个是为了让你自己视图块可以单个字符来界定,__ 代表元素,-- 代表修饰符。...「优点:」 属性值灵活性,相当于通过属性值来增加命名空间,减少全局名称空间,以便更好将 CSS 模块化。 「缺点:」 属性选择器性能和类名相比差别很大,过度使用可能会产生可感知性能问题。...「缺点:」 要说到 CSS Modules 缺点,我个人觉得 CSS Modules 本身没有特别明显缺点,硬说起来,它对于开发可能还是缺乏一些 CSS 代码组织方式(规范),比如 CSS 复用、单文件

    72220

    精读《我们为何弃 css-in-js》

    ,先从 css-in-js 优点说起,再转而谈到缺点,说明了 css-in-js 这个新事物拥有明显优点与缺点;然后从性能问题作为切入点,说明自己所在公司为什么不得不抛弃 css-in-js;最后告诉读者目前自己解决方案是...就像 js 文件天然支持模块化好处一样,原生 css 因为没有模块化能力,天然容易导致全局样式污染,如果不是特意 BEM 方式命名,想要避免冲突就只能借助 css-in-js 了。...让 ReactDevTools 结构变得复杂,因为 css-in-js 会包裹额外 React 组件层用来实现样式插入。...所以当性能问题是绕不过去的话题,而 css-modules 在性能最优情况下,一些曲线方案可以同时支持 css-in-js 优点,也就能理解为什么作者要弃 css-in-js 了。...,但这样也限制了声明语法灵活性,显然不可以方式定义样式。

    1.1K10

    CSS — BEM 命名规范

    - 中划线 :仅作为字符使用,表示某个块或者某个子元素多单词之间连接记号。...使用两个字符和下划线而不是一个,是为了让你自己块可以单个字符来界定。...2 如何使用 BEM 命名法 2.1 什么时候应该用 BEM 格式 使用 BEM 诀窍是,你要知道什么时候哪些东西是应该写成 BEM 格式。 并不是每个地方都应该使用 BEM 命名方式。...BEM 格式 在当前流行 Vue.js / React / Angular 等前端框架中,都有 CSS 组件级作用域编译实现,其基本原理均为利用 CSS 属性选择器特性,为不同组件生成不同属性选择器...2.4 避免 .block__el1__el2 格式 在深层次嵌套 DOM 结构下,应避免过长样式名称定义。

    2.7K31

    你不知道 React 最佳实践

    利用 package.json 组织文件 开发人员主要将主组件文件命名为 **index.js **文件。 一旦你了几个文件,这些文件都被命名为 index.js,导航起来就会变得很麻烦。...在创建 React 组件时,重要是要记住,您仍然在构建 HTML 文档。 人们倾向于在 React 中得到分隔符,这最终导致不正确 HTML。...一般来说,注释是一个缺点,它规定了糟糕设计,特别是冗长注释,很明显,开发人员不知道他们到底在做什么,并试图通过写注释来弥补。 ?...在写完组件代码后为函数或组件命名,因为写完之后你知道它承担什么功能。 例如,您可以根据组件代码立即选择像 FacebookButton 这样组件名称。...通常,当您完成函数时,您应该能够为组件和函数选择通用名称。 后置命名增加了可重用性。 11. 注意 State 和 Rendering ? 在 React 中,当我们可以按状态对组件进行分类时。

    3.2K10

    Vue常识面试题

    ,取代了 CGI ,增强了 WEB 与服务端交互安全性,类似于下面这样,其实就是Java + HTML JSP一个很大缺点,就是不太灵活,因为JSP是在服务器端执行,通常返回该客户端就是一个...、非图形各种逻辑均抽象为一个统一概念(组件)来实现开发模式,在Vue中每一个.vue文件都可以视为一个组件2.组件优势 降低整个系统耦合度,在保持接口不变情况下,我们可以替换不同组件快速完成需求...react中我们通过使用回调函数来进行通信,而Vue中子组件向父组件传递消息两种方式:事件和回调函数 diff算法不同。...被重命名了: v-enter -> v-enter-from v-leave -> v-leave-from 组件 watch 选项和实例方法 $watch不再支持点分隔字符串路径,请改用计算函数作为参数...被重命名 组建 watch 选项和实例方法 $watch不再支持以点分隔字符串路径。

    2.2K30

    使用 TypeScript React 组件点表示法

    这篇文章将深入探讨使用组件点表示法时这些优势,重点介绍一些问题,并提供一些示例。 什么组件点符号? 顾名思义,它使用“点”来访问对象属性,通常称为点表示法。...为什么使用组件点表示法? 在使用组件点符号来维护和使用一组组件时,我体验到了一些关键好处。 ✏️ 命名空间 由于使用组件点表示法,所有子组件本质上都由顶级组件命名。...Flex.Item 组件定义和逻辑是否与 Flex 在同一个文件中、在同级文件中或在嵌套目录中都没有关系。底层实现和文件结构可以随时更改,因为唯一公共合约是 Flex 导出。...可发现性 如果一组中有“n”个组件,则开发人员必须记住所有“n”个组件名称才能知道要导入哪个组件或进行文件搜索以找到他们需要组件。...这很好,但唯一缺点是在 React Devtools 中,它会显示为 NeverCallThisComponentDirectly,这可能会非常混乱,因为它从未被直接调用过。

    1.7K30

    译文:Vue3 Composition API 是如何取代 Vue Mixins

    不幸是,他提到关于React mixins缺点也同样适用于Vue。让我们先熟悉一下这些缺点,然后再来看看Composition API是如何克服这些缺点。...mixin可能会期望一个组件一个输入值,它将在自己validate方法中使用。 但这可能会导致问题。如果我们以后想重构一个组件并改变了mixin需要变量名称,会发生什么情况呢?...我们在看这个组件时,不会发现有什么问题。linter也不会发现它。我们只会在运行时看到错误。 现在想象一下一个一大堆mixin组件,我们可以重构一个本地数据吗?...( "use "作为特征描述前缀是Component API命名惯例。)...命名冲突....解决了! 我们之前已经看到了一个混搭元素如何使用可能与消耗组件属性名称相同属性,甚至更阴险是,在消耗组件使用其他混搭元素中也会有相同名称

    3.4K20

    【BBF系列协议】TR-106 CWMP端点和USP代理数据模型模板

    术语“字母”和“数字”定义见XML规范[附录B/1]。 字符很容易与有时由字符算法插入任意字符混淆。因此,ProfileName不应包含任何字符。...(点)始终用作最后一个字符 参数名称必须区分大小写。层次结构中每个节点名称必须以字母或下划线开头,后续字符必须是字母、数字、下划线或字符。术语“字母”和“数字”定义见XML规范[附录B/1]。...字符很容易与有时由字符算法插入任意字符混淆。因此,层次结构中节点名称不应包含任何字符。此外,层次结构中节点名称不应以下划线开头。...在BBF标准中,层次结构中节点名称始终以大写字母开头,且不包含任何字符或下划线(有关相应规范要求,请参见C.3.1 如果一个对象可能出现多个实例,则会显示占位符节点名称{i}。...整个分隔符(包括任何空格字符)不得被视为其分隔列表项一部分。逗号分隔列表中最后一项不得后跟分隔符。逗号分隔列表中单个项目不得包含空格或逗号字符

    27910

    React-Native开发规范文档

    React-Native开发规范 标签(空格分隔): React-Native JavaScript 一、编程规约 (一) 命名规约 【强制】 代码中命名均不能以下划线或美元符号开始,也不能以下划线或美元符号结束...【强制】包名统一使用小写,点分隔符之间且仅有一个自然语义英语单词。...当然你可以指定特定版本号,直接写1.2.3,前面什么前缀都没有,这样固然没问题,但是如果依赖包发布新版本修复了一些小bug,那么需要手动修改package.json文件;和^则可以解决这个问题。...说明:很多 if 语句内逻辑相当复杂,阅读者需要分析条件表达式最终结果,才能明确什么条件执行什么语句,那么,如果阅读者分析逻辑表达式错误呢?...【强制】在React-Native版本大于0.46.0使用本地资源,图片命名不能出现‘@’符号: 说明:不同大小图片需要原生不同尺寸文件夹,系统自动进行不同适配。

    2K10

    React组件基础

    约定1:类组件名称必须是大写字母开头 约定2:类组件应该继承React.Component父类,从而可以使用父类中提供方法或者属性 约定3:类组件必须提供render方法 约定4:render...选择一:将所有组件放在同一个JS文件中 选择二:将每个组件放到单独JS文件组件作为一个独立个体,一般都会放到一个单独 JS 文件中 实现方式 创建Hello.js 在 Hello.js...React想要实现这种功能,就需要使用状态组件来完成。...类组件状态 状态state即数据,是组件内部私有数据,只有在组件内部可以使用 state值是一个对象,表示一个组件中可以多个数据 state基本使用 class Hello extends React.Component...非受控组件不多,推荐使用受控组件

    3K20

    2022前端面试官经常会考什么

    高阶组件、Render props、hooks 什么区别,为什么要不断迭代这三者是目前react解决代码复用主要方式:高阶组件(HOC)是 React 中用于复用组件逻辑一种高级技巧。...在这里,"render"命名可以是任何其他有效标识符。...需要注意是:hook只能在组件顶层使用,不可在分支语句中使用。、在 React中元素( element)和组件( component)什么区别?...ref三种实现方法:字符串格式:字符串格式,这是React16版本之前用得最多,例如:span函数格式:ref对应一个方法,该方法一个参数,也就是对应节点实例...React.forwardRef是什么?它有什么作用?React.forwardRef 会创建一个React组件,这个组件能够将其接受 ref 属性转发到其组件树下另一个组件中。

    1.1K20

    带你了解一些package.json骚操作

    前言 在每个项目的根目录下面,一般都会有一个 package.json 文件,其定义了运行项目所需要各种依赖和项目的配置信息(如名称、版本、许可证等元数据)。...大多数人对 package.json 文件了解,仅停留在: 项目名称、项目构建版本、许可证定义; 依赖定义(包括 dependencies 字段,devDependencies 字段); 使用scripts...name 字段 name 字段定义了模块名称,其命名时需要遵循官方一些规范和建议: 模块名会成为模块 url、命令行中一个参数或者一个文件名称,任何非 url 安全字符在模块名中都不能使用(我们可以使用...先行版本号可以加到主版本号.次版本号.修订号后面,通过 - 号连接一串以句点分隔标识符和版本编译信息: 内部版本(alpha) 公测版本(beta) 正式版本候选版本rc(即 Release candiate...自定义命令(bin) 用过 vue-cli,create-react-app等脚手架朋友们,不知道你们有没有好奇过,为什么安装这些脚手架后,就可以使用类似 vue create/create-react-app

    1.9K40

    常用package.json,还有这么多你不知道骚技巧

    在每个项目的根目录下面,一般都会有一个 package.json 文件,其定义了运行项目所需要各种依赖和项目的配置信息(如名称、版本、许可证等元数据)。...大多数人对 package.json 文件了解,仅停留在: 项目名称、项目构建版本、许可证定义; 依赖定义(包括 dependencies 字段,devDependencies 字段); 使用scripts...name 字段 name 字段定义了模块名称,其命名时需要遵循官方一些规范和建议: 模块名会成为模块 url、命令行中一个参数或者一个文件名称,任何非 url 安全字符在模块名中都不能使用(我们可以使用...先行版本号可以加到主版本号.次版本号.修订号后面,通过 - 号连接一串以句点分隔标识符和版本编译信息: 内部版本(alpha) 公测版本(beta) 正式版本候选版本rc(即 Release candiate...自定义命令(bin) 用过 vue-cli,create-react-app等脚手架朋友们,不知道你们有没有好奇过,为什么安装这些脚手架后,就可以使用类似 vue create/create-react-app

    1.6K30
    领券