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

相关推荐
SuperEugene2 分钟前
Vue3 + Element Plus 表格实战:批量操作、行内编辑、跨页选中逻辑统一|表单与表格规范篇
开发语言·前端·javascript
极梦网络无忧26 分钟前
基于 Vite + Vue3 的组件自动注册功能
前端·javascript·vue.js
Predestination王瀞潞39 分钟前
5.4.3 通信->WWW万维网内容访问标准(W3C):WWW(World Wide Web) 协议架构(分层)
前端·网络·网络协议·架构·www
爱学习的程序媛1 小时前
【Web前端】优化Core Web Vitals提升用户体验
前端·ui·web·ux·用户体验
zabr1 小时前
花了 100+ 篇笔记,我整理出 了一套 AI Agent 工程完全指南
前端·后端·agent
软弹1 小时前
深入理解 React Ref 机制:useRef 与 forwardRef 的协作原理
前端·javascript·react.js
YaHuiLiang1 小时前
Ai Coding浪潮下的前端:“AI在左,裁员在右”
前端
雪碧聊技术1 小时前
前端vue代码架子搭建
前端·javascript·vue.js·前端项目代码框架搭建
爱学习的程序媛1 小时前
【Web前端】前端用户体验优化全攻略
前端·ui·交互·web·ux·用户体验
han_1 小时前
JavaScript设计模式(二):策略模式实现与应用
前端·javascript·设计模式