文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

React 项目结构和组件命名规范

命名组件中的类 上面我们看到了如何构建目录并按模块分离我们的组件。 但是，还有一个问题：如何命名它们？...当我们需要使用工具作为React Dev工具进行调试时，以及当应用程序中发生运行时错误时，组件的名称非常方便，错误总是与发生错误的组件名一起出现。...我最初使用 React 的时候喜欢用完整的名字来命名文件，但是这样会导致相同的部分重复太多次，同时引入时的路径太长。...因此，我们根据文件 的上下文来命名文件，根据组件的相对位置来命名组件是一种更好的方式。 页面（Screen） 屏幕，顾名思义，就是我们在应用程序中展示出来的样子。...组件根据其与组件或src的相对路径进行相应命名。 鉴于此，位于src/components/User/List.jsx的组件将被命名为UserList。

7.6K30

React服务器组件会摧毁React吗？

React 服务器组件在 React 生态系统中存在争议。一位 Angular 联合创始人和其他前端专家讨论了其优缺点。...其想法是将相关的 React 组件从客户端移到服务器。 “React 之前可以在服务器端执行，尽管效率非常低，”Minar 指出。“RSC 的变化在于一些组件专门在服务器端执行。这是新的。...React 服务器组件背后的关键思想是，如果一个组件需要数据获取或执行不涉及客户端交互的任务，那么通常最好在 服务器 上处理该组件，而不是作为常规的客户端组件。 到目前为止，这很合乎逻辑。...毕竟，这有点像浏览器组件在 1990 年代的工作方式——还记得 CGI、PHP 和 ASP 吗？只是现在，并非所有事情都需要在服务器上完成。React 本身是为了更容易地在客户端上做更多事情而发明的。...最大的问题是：这种两极分化会损害 React 最宝贵的东西——它的生态系统和社区吗？

1.5K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    React 函数组件不是有状态吗，为什么还要说他是纯函数

    React 知命境第 40 篇，原创第 153 篇 许多人在学习 React 时会有这样一个疑问，不断看到 React 官方团队言论，或者说各路大佬都是在说 React 是函数式编程，我们写组件确实写的是组件...今天这篇文章，就来跟大家解释一下，为什么 React 的函数式组件，其实就是纯函数。...于是把这个情况定性为 React 的设计缺陷。但这真的是设计缺陷吗？ 我们只需要换个思路，你就能对这个现象豁然开朗。 1、hook 存在哪？...也就是说，只要 React 允许，我们甚至可以在别的组件访问到任意一个组件里的状态。当然 React 对这种情况做了限制，只允许通过特定的语法来做到这个事情。...但是为什么语法不这样设计呢，不是更好理解吗？

    1.9K10

    Facebook 重构：抛弃 Sass u002F Less ，迎接原子化 CSS 时代

    人们通常手工编写实用工具/原子 CSS，精心制定命名约定。但是很难保证这个约定易于使用、保持一致性，而且不会随着时间的推移而变得臃肿。 这个 CSS 可以团队协作开发并保持一致性吗?...你最终会得到更大的 html 标签和更烦人的命名约定吗?Tailwind 已经有了足够多的原子类了啊。 那么，我们是否应该放弃原子 CSS 的想法，而仅仅使用 Tailwind CSS?...Tailwind 是一个优秀的解决方案，但仍然有一些问题没有解决: 需要学习一套主观的命名约定 CSS 规则插入顺序仍然很重要 未使用的规则可以轻松删除吗?...作为 web 开发人员，你只需要理解 React-Native-Web 是一个常规的 CSS-in-JS 库，它自带一些原始的 React 组件。...所有你写 View 组件的地方，都可以用 div 替换。 React-Native-Web 的作者是 Nicolas Gallagher，他致力于开发 Twitter 移动版。

    4K50

    Facebook 重构：抛弃 Sass Less ，迎接原子化 CSS 时代

    人们通常手工编写实用工具/原子 CSS，精心制定命名约定。但是很难保证这个约定易于使用、保持一致性，而且不会随着时间的推移而变得臃肿。 这个 CSS 可以团队协作开发并保持一致性吗?...你最终会得到更大的 html 标签和更烦人的命名约定吗?Tailwind 已经有了足够多的原子类了啊。 那么，我们是否应该放弃原子 CSS 的想法，而仅仅使用 Tailwind CSS?...Tailwind 是一个优秀的解决方案，但仍然有一些问题没有解决: 需要学习一套主观的命名约定 CSS 规则插入顺序仍然很重要 未使用的规则可以轻松删除吗?...作为 web 开发人员，你只需要理解 React-Native-Web 是一个常规的 CSS-in-JS 库，它自带一些原始的 React 组件。...所有你写 View 组件的地方，都可以用 div 替换。 React-Native-Web 的作者是 Nicolas Gallagher，他致力于开发 Twitter 移动版。

    3.5K10

    医疗数字阅片-医学影像-REACT向事件处理程序传递参数-.bind-传递函数给组件

    this.handleClick.bind(this)}>Click Me; } } 注意： 在 render 方法中使用 Function.prototype.bind 会在每次组件渲染时创建一个新的函数...return this.handleClick()}>Click Me; } } 注意： 在 render 方法中使用箭头函数也会在每次组件渲染时创建一个新的函数...可以在 render 方法中使用箭头函数吗？ 一般来说是可以的，并且使用箭头函数是向回调函数传递参数的最简单的办法。 但是如果遇到了性能问题，一定要进行优化！...在这两种情况下，React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式，事件对象必须显式的进行传递，而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

    1.4K40

    react源码面试题解答

    组件react元素$$typeof属性什么 答：用来表示元素的类型，是一个symbol类型react怎么区分Class组件和Function组件 答：Class组件prototype上有isReactComponent...内存占用：类组建需要创建并保存实例，占用一定的内存 值捕获特性：函数组件具有值捕获的特性 下面的函数组件换成类组件打印的num一样吗export default function App()...react的理解/请说一下react的渲染过程答：是什么：react是构建用户界面的js库能干什么：可以用组件化的方式构建快速响应的web应用程序如何干：声明式（jsx） 组件化（方便拆分和复用 高内聚...全小写 小驼峰 事件处理函数字符串 函数对象 阻止默认行为返回falseevent.preventDefault()...答：通过internalInstanceKey对应 图片解释结果和现象点击Father组件的div，Child会打印Child吗function Child() { console.log('Child

    1.5K10

    react源码解析20.总结&第一章的面试题解答

    组件react元素$$typeof属性什么 答：用来表示元素的类型，是一个symbol类型react怎么区分Class组件和Function组件 答：Class组件prototype上有isReactComponent...内存占用：类组建需要创建并保存实例，占用一定的内存 值捕获特性：函数组件具有值捕获的特性 下面的函数组件换成类组件打印的num一样吗export default function App()...react的理解/请说一下react的渲染过程答：是什么：react是构建用户界面的js库能干什么：可以用组件化的方式构建快速响应的web应用程序如何干：声明式（jsx） 组件化（方便拆分和复用 高内聚...全小写 小驼峰 事件处理函数字符串 函数对象 阻止默认行为返回falseevent.preventDefault()...答：通过internalInstanceKey对应 图片解释结果和现象点击Father组件的div，Child会打印Child吗function Child() { console.log('Child

    1.4K20

    ChatGLM-6B 安装试用

    用户：我没有猪肉这个食材，我可以用鸡肉代替吗？做出来好吃吗？ ChatGLM-6B：可以用鸡肉代替猪肉做鱼香肉丝，鸡肉的口感和味道与猪肉相似，也比较容易制作出嫩滑的口感。...输出的结果是正确的 用户：你能帮我写一个react版本的web表单页面吗？用来收集用户的调查问卷。 ChatGLM-6B：当然可以！...以下是一个使用 React 编写的简单表单页面，可以收集用户的调查问卷。 首先，我们需要创建一个名为问卷表单的组件，它包含一个输入框和一个提交按钮。...接下来，我们可以在组件的 state 中保存表单中填写的信息，并在组件的生命周期方法中处理表单的提交和显示。...那我再把上面的 我没有猪肉这个食材，我可以用鸡肉代替吗？做出来好吃吗？ 不带上下文问一下 用户：我没有猪肉这个食材，我可以用鸡肉代替吗？做出来好吃吗？

    1.6K50

    【React】2054- 为什么React Hooks优于hoc ？

    在现代的 React世界中，每个人都在使用带有 React Hooks的函数组件。然而，高阶组件（HOC）的概念在现代的 React世界中仍然适用，因为它们可以用于类组件和函数组件。...然而，高阶组件（HOC）的概念在现代的 React世界中仍然适用，因为它们可以用于类组件和函数组件。因此，它们是在历史和现代 React 组件之间使用可重用抽象的完美桥梁。...HOCS VS HOOKS: 命名冲突 如果给一个组件赋予相同名称的 prop 两次，后者将会覆盖前者： React"...如果只有一个请求失败，整个组件会作为错误渲染吗？ 如果一个请求依赖于另一个请求会发生什么？ …… 尽管这使得 HOC变得非常复杂（但功能强大），我们在内部引入了另一个问题。...最终，这就是我们最初得出这个结论的原因，通过重命名从React Hooks 中输出的变量，我们避免了名称冲突。当使用 HOCs时，我们需要注意 HOCs可能在内部使用相同名称的props。

    2K00

    React 播客专栏 Vol.10｜你以为是复习？其实是 TypeScript + React 真正上手的开始！

    这不是简单的温习，而是一次系统串联，把你前面学过的“组件”、“Props”、“State”统统打通，写出第一个真正像样的组件应用！ React 的底层思维：组件是拼装出来的！ 什么是组件？...否则 React 识别不出来！ 应用启动流程你知道吗？ 你的 React 应用其实是从 index.tsx 启动的。.../Alert'; 小技巧：每个组件一个文件，写 React 更舒服！ ️ TypeScript 能做什么？...TypeScript 的常见类型一览表 类型 说明 string 文本 number 数字 boolean 布尔值（true / false） any 任何类型（❌ 不推荐） unknown 安全的未知类型...: number }; 当然你也可以用 interface、enum、class 来定义结构！ ️ 整合任务清单：今天就做项目！

    37100

    使用 TypeScript 开发 React Hooks

    在 hooks 之前，有两种风格的 React 组件： 处理状态的 类组件（Classes） 完全由其 props 定义的 函数式（Functional）组件 一种常见用法是，由前者构建复杂的容器（Container...What Are React Hooks? 但随着代码的增长，函数式组件也大有取代类组件成为容器的意思。 将函数式组件升级为状态庞杂的容器倒是谈不上痛苦，只是费时费力。...在 React 类组件中编写原生 TypeScript 着实痛苦，因为 React 开发者不得不同时对 props 和 state 定义类型，即便二者的许多属性是相同的。...React Hooks 的其他益处 React 团队始终将 React 视为一个函数式框架。过去他们使用类组件以处理自身状态，现在有了 hooks 这种允许一个函数跟踪组件状态的技术。...如果对变量命名得当，就能很大程度上避免指鸭为猫。

    3.1K10

    React环境搭建

    利用React脚手架create-react-app搭建项目 编写一个React计数组件 利用React脚手架create-react-app搭建项目 这里笔者例举两种利用create-react-app...编写一个React计数组件 我们要实现这样一个组件，点击加号按钮数字加1，点击减号按钮数字减1。...我们先定义一个文件ClickCounter.js, 这里的命名规范讲一下，类似于JAVA的导包com.ataola.utils这种，用户的这个行为是点击，点击是为了计数。...('root') ); 至此我们已经学会了搭建React项目，并能够设计简单的React组件。...答案肯定是能写成那种形式，你能访问到那个对象，你给它加加有问题吗？但是从React设计理念上，这是非常暴力鲁棒的做法，你就想嘛，难道这个setState是放着让你看哒，很显然不是的。

    2.1K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券