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

相关推荐
qq_316837752 小时前
uni.chooseMedia 读取base64 或 二进制
开发语言·前端·javascript
Zoey的笔记本3 小时前
2026告别僵化工作流:支持自定义字段的看板工具选型与部署指南
大数据·前端·数据库
小二·3 小时前
Python Web 开发进阶实战:混沌工程初探 —— 主动注入故障,构建高韧性系统
开发语言·前端·python
gis开发3 小时前
【无标题】
java·前端·javascript
小二·3 小时前
Python Web 开发进阶实战:低代码平台集成 —— 可视化表单构建器 + 工作流引擎实战
前端·python·低代码
慧一居士3 小时前
Vite 中配置环境变量方法及完整示例
前端·vue.js
天意pt4 小时前
Idempotency 幂等性 - 点赞和投票功能
前端·javascript·express
weixin_427771614 小时前
cursor 智能commit
前端
努力的小陈^O^4 小时前
问题:Spring循环依赖问题排查与解决
java·开发语言·前端
徐_三岁5 小时前
127.0.0.1 和 localhost 有什么区别?
前端