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>。增强可读性。

相关推荐
橘子编程6 分钟前
React 19 全栈开发实战指南
前端·react.js·前端框架
DanCheOo7 分钟前
AI Streaming 架构:从浏览器到服务端的全链路流式设计
前端·agent
我是小趴菜13 分钟前
前端如何让图片、视频、pdf等文件在浏览器直接下载而非预览
前端
cg3317 分钟前
开源项目自动化:用 GitHub Actions 让每个 Issue 都被温柔以待
前端
haierccc27 分钟前
Win7、2008R2、Win10、Win11使用FLASH的方法
前端·javascript·html
We་ct30 分钟前
LeetCode 50. Pow(x, n):从暴力法到快速幂的优化之路
开发语言·前端·javascript·算法·leetcode·typescript·
柠檬味的Cat33 分钟前
使用腾讯云COS作为WordPress图床的实践
前端·github·腾讯云
Hilaku36 分钟前
卷AI、卷算法、2026 年的前端工程师到底在卷什么?
前端·javascript·面试
非凡ghost37 分钟前
AIMP(音乐播放软件)
前端·windows·音视频·firefox
xiaotao13139 分钟前
Vite 完全学习指南
前端·vite·前端打包