react 编写规范

react 编写规范

介绍

这里或许是一些固定的语法,或许是一些建议,不过有些时候约定也是为了更少出现语法错误或者更利于开发者的开发和维护。因此,最好严格遵守这些规定来完成jsx 或者 tsx 代码的编写。

jsx/tsx 要求

1. 必须只返回一个 dom 元素

类似于 vue2 中只能有一个根节点,当然这个根节点也可以是 react 提供的空标签 <></>

2. 组件命名使用大驼峰命名法

组件命名使用大驼峰命名法,比如 <MyComponent />

3. 标签必须闭合

所有标签必须闭合,比如 <div></div>

4. hook 调用必须在顶层

hook 只能在函数组件或者自定义 hook 中调用,不能在循环、条件判断或者嵌套函数中调用。

5. hook 命名必须以 use 开头

hook 命名必须以 use 开头,比如 useState。自定义的hook 也必须以 use 开头,比如 useMyHook

6. hook 只能在 React 函数中调用

hook 只能在 React 组件或者 hooks 中调用,不能在普通的 JavaScript 函数中调用。

7. 没有子内容的标签必须使用自闭合标签

没有子内容的标签必须使用自闭合标签,比如 <input />,还包括自己定义的组件标签,比如 <MyComponent />

8. 超过一行的 jsx 代码必须使用括号括起来

超过一行的 jsx 代码必须使用括号括起来,比如 <div>{name}</div>。增强可读性。

相关推荐
西安小哥5 分钟前
从前端到AI工程师:一场跨越鸿沟的真实蜕变之旅
前端
Prince4188 分钟前
侧边栏收起缩放适配方案
前端
用户77833661321126 分钟前
serpbase + Cloudflare R2 边缘持久化实战
前端·人工智能
এ慕ོ冬℘゜29 分钟前
jQuery attr() 方法超详细讲解:属性获取、赋值、实战踩坑全解
前端·javascript·jquery
东方小月32 分钟前
从零开发一个 Coding Agent(三):EventStream 事件流通道设计与实现
前端·人工智能·后端
程序员黑豆2 小时前
鸿蒙应用开发:Refresh + List 下拉刷新组件使用教程
前端·华为·harmonyos
Hilaku2 小时前
为什么大厂对前端算法要求极高?
前端·javascript·程序员
Tkto2 小时前
我用 WebGL 从「画个点」一路画到「贪吃蛇」
前端
xiaobaoyu2 小时前
前端代码常用规范
前端
xiaobaoyu2 小时前
img,word,excel,pdf文件在线预览
前端