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

相关推荐
deli0072 小时前
手机20%突然关机?电量百分比是估的,SOC曲线4组实测
前端
深蓝AI12 小时前
Meta 开源用了八年的设计系统 astryx:连坐两天 GitHub 总榜第一,组件库开始写给 agent 的说明书
前端·人工智能
IT_陈寒13 小时前
Vue的watch把我坑惨了,原来要这样用才靠谱
前端·人工智能·后端
1-1=013 小时前
Vue 3 模板语
前端·javascript·vue.js
用户76103044737113 小时前
【转战智能眼镜开发】ROKID AIUI 小游戏 亚马逊标枪项目实战讲解
前端
风卿13 小时前
看着AI写代码太孤独了,来欣赏星云吧:一个DSH 装饰插件
前端·javascript
牧艺14 小时前
弹层不用再手算坐标了:CSS Anchor Positioning 从原理到可上线
前端·javascript·css
用户老李14 小时前
YOLO 目标检测自学教程 07:YOLOv3——多尺度预测
前端
moshuying14 小时前
ESP32 墨水屏金价牌(上):从点亮到把图片推过去
前端
李剑一14 小时前
别再抬杠,前端岗已经没了!无论前后端,我们最终都要成“全干”工程师
前端·面试