Web前端:2023年React最佳实践

news2024/12/25 0:06:41

  大多数前端开发人员都希望React JS能成为他们的武器库,来创建独特的、前沿的用户界面。

  1.重要文件组织

  服务于相似功能并且被设计为使用某一特征的文件应该被保存在一起。例如,与单个组件相关的所有样式文件和其他文件应该位于同一位置。在这种做法的帮助下,开发人员可以很容易地在一个位置找到相关的项目。因此,用户不必在整个项目中搜索特定的文件。无论项目变得多么大,文件总是位于它应该在的地方。

  开发人员也可以选择以组件为中心的文件结构。这需要将关于一个组件的所有文档放在一个文件夹中。例如,可以创建一个名为NavBar的文件夹,其中包含导航栏组件本身、样式化组件以及任何其他JavaSript和资产文件。当一个组件的所有文件都包含在一个文件夹中时,重用、共享和调试该组件就很容易了。

  2.小而特殊的功能组件

  众所周知,React允许开发能够执行各种任务的大型组件。然而,最好通过保持组件的适度来构建它们,以便每个组件都执行特定的目的。

  使用React,开发人员可以生成可重用的UI组件。就操作而言,较小的组件更易于阅读和理解,并且易于更新。因此,代码的可用性也得到了提高。每个组件通常都很短(100到200行),使得其他程序员理解和调整代码很简单。

  3.选择碎片而不是分裂

  任何React组件返回的代码都应该包装在一个单独的标记中。通常,使用<div>或React片段,但选择React片段是最佳实践之一。你使用的每个标签或< div >都会获取内存。因此,<div>的数量越多,你的网站需要的内存就越多,需要的能量就越多,加载网站的时间也就越长。这最终导致网站速度慢,用户体验差。

  

  4.命名规格

  命名约定有助于使代码更易于阅读。这适用于变量、React钩子、组件名等等。

  React文档中没有提供正式的命名方案,但是使用了3个主要的命名约定:

  l 组件名称应该反映它们的功能,而不是指特定的应用程序功能。它们也应该大写字母camelCase。

  l 需要成分的键应该有唯一的、非随机的标识符。建议不要仅仅使用索引作为键。组合两个不同对象属性的键分配是可接受的。

  l 在camelCase中,方法应该根据它们的目的和功能来命名,而不是特定于应用程序。一般来说,组件是用PascalCase编写的,必须根据它们的用途而不是它们在项目中的功能来命名。

  5.不要重复你的代码

  React最佳实践让你能够编写准确而简洁的代码,从而使它变得可行而简单。问题是——你如何知道你是否要合并重复的代码?你只需要寻找相似之处,如果你找到了,那就意味着你在复制一个代码。

  6.使用React开发工具

  React开发人员工具在开发React应用程序时派上用场。它包含状态、子元素、道具和组件层次结构。这也有助于调试代码。借助React开发工具,开发人员可以轻松构建交互式UI。

  React开发者工具会定期添加新功能。

  7.条件渲染实践

  React允许用户创建封装所需行为的独特组件。然后,根据React应用程序的状态,可以呈现一些组件。这就是条件渲染。现在,有很多方法可以执行条件渲染。

  8.使用代码片段库

  编写代码时,你应该始终努力使用最好和最新的语法。你可以通过使用代码片段来保持语法最新,它们还有助于确保你的代码没有错误和bug。因此,为了提高效率,你应该坚持使用代码片段库代码片段,如ES7 React、Redux、JS片段等。

  

  9.JavaScript中的CSS

  对于一个活动项目来说,将其所有CSS样式放在一个SCSS文件中是非常常见的。全局前缀有助于避免名称崩溃,然而,当项目开始增长时,这种技术可能不会派上用场。React提供了很多库来在JS解决方案中编写CSS测试,最流行的库是EmotionJS和Glamorous。。

  10.延迟加载实施

  简单地说,延迟加载是一种设计模式。通过允许应用程序的部分仅在必要时加载,可以减少初始加载时间。例如,你可以首先加载用户注册和登录所需的部件和模块。然后可以基于用户导航加载其余的功能或类组件。

  为了扩大你的React应用程序,延迟加载是一个很好的工具。如果你的代码库很大,你的网站加载时间就会变慢。这是因为每次用户登录时,必须加载整个应用程序。

  11.测试和监测规范

  为了消除错误概率的组件编写测试。测试可确保部件的性能符合预期。Jest是最流行的测试React组件之一,它提供了一个可以运行测试的设置。在浏览器中运行React应用程序允许你在创建应用程序时对其进行测试。任何发现的问题通常都会显示在屏幕上。这相当于使用DevKinsta创建WordPress站点,这是一个允许你在本地创建、编辑和启动WordPress站点的程序。

  12.在ReactJS应用程序中管理状态

  处理React功能组件为呈现自己所需的数据的过程称为React状态管理。通常,这些信息保存在组件的状态对象中。当状态对象更改时,组件将重新渲染自身。

  它有所有的信息。演示文稿包括HTML、CSS和格式,构成了剩下的一半。应用程序的呈现部分依赖于状态和状态管理。React应用程序只会在状态更改时重新渲染自己。

  13.使用JSX编写干净易读的代码

  作为一名开发人员,可能希望编写清晰易读、易于理解的代码结构。你可以使用JSX速记,将不相关的代码移动到单个组件中,并为一个组件开发单独的文件。开发人员还可以在钩子中将功能组件组合在一起。

  

  14.使用React路由器实现正确的路由

  路由方法包括将用户发送到各种网站,以响应他们的请求或操作。ReactJS路由器的主要应用是创建单页web应用程序。使用React Router在应用程序中定义了多条路由。

  React Router包是一个构建在React之上的标准库系统,用于在React应用程序中实现路由。它将在网页上显示的信息提供给浏览器中的同步URL。它主要用于创建单页web应用程序,并保留应用程序的常规结构和功能。

  15.ReactJS应用程序中的错误处理和调试

  前端开发人员经常忽略错误处理和日志记录。但是,任何抛出错误的代码段都必须得到正确处理。此外,根据具体情况,React中有许多处理和记录故障的方法。以下是开发人员可以用来处理和调试错误的一些实践:

  类组件的错误边界

  尝试-捕捉超越界限的捕捉

  反应误差边界库

  总结

  为了确保React项目可维护、高效且易于理解,在使用React进行开发时遵循最佳实践非常重要。你可以使用它们来更快地编写React代码。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/386467.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

iphone备忘录删除怎么恢复?分享苹果数据找回办法

手机备忘录上写记录&#xff0c;这是不少上班族的小习惯。因为它可以先记录紧急事务&#xff0c;然后再慢慢的解决。也可以把我们一些重要的账号密码存在备忘录里&#xff0c;方便在何时何地直接登入使用。那么如果我们不小心删除了iphone备忘录呢?碰到这种事该怎么办呢?有没…

Vue中二级菜单的实现

在不使用ElementUi等框架的情况下&#xff0c;制作一个二级菜单&#xff0c;网上搜寻很多资料&#xff0c;但部分要不只显示HTML结构&#xff0c;不显示CSS样式&#xff0c;要不就是复杂的让人无法理解。效果图&#xff1a;针对菜单做了CSS样式修饰&#xff0c;给一级二级菜单都…

基于STM32+CS创世 SD NAND(贴片SD卡)完成FATFS文件系统移植与测试(下篇)

四、移植FATFS文件系统 前面第3章&#xff0c;完成了SD NAND的驱动代码编写&#xff0c;这一章节实现FATFS文件的移植。 4.1 FATFS文件系统介绍 &#xff08;1&#xff09;介绍 FatFs 是一种完全免费开源的 FAT 文件系统模块&#xff0c;专门为小型的嵌入式系统而设计。它完…

07--组件

一、小程序组件分类微信团队为开发者提供了一系列基础组件&#xff0c;开发者可以通过组合这些基础组件进行快速开发。小程序中的组件也是非常丰富的&#xff0c;开发者可以基于组件快速搭建出漂亮的页面结构。小程序中的组件其实相当于网页中的HTML标签&#xff0c;只不过标签…

5年测试路,终于爬到了半山腰,结果碰到00后入场,我该拿什么争,我不想35岁被淘汰......

软件测试是一个付出就有回报的工作&#xff0c;可能很多人会说软件测试就是吃青春饭&#xff0c;然而其他工作又何尝不是&#xff1f;没有哪一家公司养尸位素餐之人&#xff0c;大龄员工有被辞退的&#xff0c;也有没被辞退的。干任何职业&#xff0c;抱着一劳永逸的心态&#…

关于k8s集群备份和恢复工具Velero 的一些笔记整理

写在前面 分享一个k8s集群容灾备份恢复开源工具 Velero博文内容涉及&#xff1a; Velero 的简单介绍Velero 安装下载备份恢复 Demo&#xff0c;以及容灾测试 Demo恢复失败情况分析 理解不足小伙伴帮忙指正 我所渴求的&#xff0c;無非是將心中脫穎語出的本性付諸生活&#xff0…

第九届蓝桥杯省赛 C++ A/B组 - 全球变暖

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?spm1011.2415.3001.5343 &#x1f4da;专栏地址&#xff1a;蓝桥杯题解集合 &#x1f4dd;原题地址&#xff1a;全球变暖 &#x1f4e3;专栏定位&#xff1a;为想参加蓝桥杯的小伙伴整理常考算法题解&#xff0c;祝大家…

分布式架构设计模式

咖啡不冲&#xff0c;你一定会成功 分布式架构设计模式一、什么是设计模式&#xff1f;1.1 设计模式的由来1.2 设计模式有哪些种类1.3 如何学习设计模式二、六大设计原则2.1 开闭原则2.2 单一职责原则2.3 里氏替换原则2.4 迪米特法则2.5 接口隔离原则2.6 依赖倒置原则三、创建型…

websocket原理及简单应用

websocket是什么&#xff1f; 一般做系统开发前后端交互使用最多的就是http协议&#xff0c;但http协议是无状态协议每一次前端发起的请求都认为是一次单独的请求和之前的请求无任何关系&#xff0c;所以我们需要http协议分别用户信息时&#xff0c;就需要使用cookie、session…

Rust学习总结之if,while,loop,for使用

目录 一&#xff1a;if的使用 二&#xff1a;while的使用 三&#xff1a;loop的使用 四&#xff1a;for的使用 本文总结的四种语句&#xff08;if&#xff0c;while&#xff0c;loop&#xff0c;for&#xff09;除了loop&#xff0c;其他的三个在C语言或者Python中都是常见…

DDD系列 - 第1讲 DDD相关概念入门

目录一、引言二、 统一语言Ubiquitous Language三、 三个阶段&#xff08;战略、战术、实现&#xff09;阶段1&#xff1a;战略设计阶段阶段2&#xff1a;战术设计阶段阶段3&#xff1a;技术实现阶段四、限界上下文Bounded Context五、上下文映射Context Map防腐层Anti-Corrupt…

深度学习代码怎么读-小白阶段性思路

深度学习代码怎么读-小白阶段性思路目前思路学习资料读代码工具-chatgpt目前思路 努力上路的小白一枚&#xff0c;麻烦路过的大佬指导一二&#xff0c;同时希望能和大家交流学习~ 和学长、实习老师们交流后的目前思路&#xff1a; 先找到自己研究领域的顶级期刊&#xff0c;…

21 Nacos客户端本地缓存及故障转移

Nacos客户端本地缓存及故障转移 在Nacos本地缓存的时候有的时候必然会出现一些故障&#xff0c;这些故障就需要进行处理&#xff0c;涉及到的核心类为ServiceInfoHolder和FailoverReactor。 本地缓存有两方面&#xff0c;第一方面是从注册中心获得实例信息会缓存在内存当中&a…

AGV机器人出圈:助力产线物流自动化

随着开年档电影《流浪地球2》的热映&#xff0c;里面的四足仿生机器人机械狗“笨笨”、可穿戴的外骨骼机器人等“黑科技”&#xff0c;都让人对机器人的魅力刮目相看&#xff0c;机器人成功“出圈”了&#xff0c;随着智能技术的发展与进步&#xff0c;我们常见的机器人种类越来…

Linux命令之sed

sed&#xff0c;Stream Editor&#xff08;字符流编辑器&#xff09;的缩写&#xff0c;简称流编辑器&#xff0c;是操作、过滤、转换文本内容的工具。 常用功能包括结合正则表达式对文件实现快速的增删改查。 工作原理 sed有2个空间来缓存数据&#xff0c;paattern space&am…

Qt交叉编译环境搭建

环境及版本&#xff1a;Deepin 20.3 Qt 5.12.9 arm编译工具 gcc-linaro-7.5.0-2019.12-x86_64_arm-linux-gnueabihf.tar.xz 1.下载Qt源码&#xff1a;qt-everywhere-src-5.12.9.tar.xz&#xff0c;并解压 2.下载arm编译工具&#xff1a; gcc-linaro-7.5.0-2019.12-x86_64_arm…

央企集团是怎么设置信息化、数字化部门的?

在数字经济大潮中&#xff0c;数字化转型已不是企业的“选修课”&#xff0c;而是关乎企业生存和长远发展的“必修课”。在企业数字化转型中&#xff0c;国有企业特别是中央企业普遍将数字化转型战略作为“十四五”时期业务规划的重要内容之一&#xff0c;数字化能力也成为衡量…

代码随想录【Day31】| 455. 分发饼干、376. 摆动序列、53. 最大子数组和

455. 分发饼干 题目链接 题目描述&#xff1a; 假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i]&#xff0c;这是能让孩子们满足胃口的饼干的最小尺寸&#xff…

用Docker搭建yolov5开发环境

拉取镜像 sudo docker pull pytorch/pytorch:latest 创建容器 sudo docker run -it -d --gpus "device0" pytorch/pytorch bash 查看所有容器 sudo docker ps -a 查看运行中的容器 sudo docker ps 进入容器 docker start -i 容器ID 将依赖包全都导入到requiremen…

如何将图数据库应用于电影智能推荐

导读 电影&#xff0c;是一种结合视觉与听觉的现代艺术。如今&#xff0c;电影已不单是人们娱乐消遣的生活方式&#xff0c;也逐渐成为国家文化软实力的重要标志之一。据有关数据统计&#xff0c;2021年中国影视行业市场规模达2349亿元&#xff0c;同比增长23.2%&#xff0c;预…