应对最佳实践和安全

在前端技术领域被广泛接受和熟知, 反应JS是一个很流行的名字. 它是一个灵活的开源JavaScript库,用于创建独特和创新的应用程序. 通过这个博客,九五至尊vi老品牌值得信赖的目标是带来所有的见解和最佳实践来提供帮助 <一个href="http://www.purlyarn.com/software-development-technology/react-development-services">反应js开发者 而企业则构建伟大的、高性能的应用程序. 让九五至尊vi老品牌值得信赖从项目结构开始.

1. 最佳实践#1:项目结构

在创建一个react项目时,第一步是定义一个可伸缩的项目结构. 你可以创建一个 使用NPM命令“create-react-app”构建react应用结构. 下面的截图显示了基本的react app文件夹结构.

项目结构最佳实践

根据项目规格和复杂性,反应文件夹结构可能有所不同. 在定义项目架构时,可以考虑各种各样的react js最佳实践:

1. 文件夹布局

该体系结构关注于react开发人员体系结构的可重用组件 设计模式 可以在多个内部项目之间共享. 因此,应该使用以组件为中心的文件结构的思想,这意味着所有的文件都与一个不同的组件相关(比如test, CSS, JavaScript, 资产, 等.)应保存在一个文件夹内.

这是另一种用于分组文件类型的方法. 在这种方法中,相同类型的文件被保存在一个文件夹中. 例如

上面的结构是一个基本的例子. 可以根据需求进一步嵌套文件夹.

2. CSS在JS

在一个大型项目中, 样式化和主题化可能是一项具有挑战性的任务,就像维护那些大的SCSS文件一样. 所以,CSS-in-JS解决方案的概念 ( i.e. 把CSS放到JavaScript中) 出现在画面中. 以下库基于此概念.

  • EmotionJS
  • 风格的组件
  • 迷人的

在这些库, 你可以根据需求来使用,比如复杂的主题, 你可以选择有风格的组件或迷人的.

3. 儿童道具

有时需要在另一个组件中呈现一个组件的内容. 所以九五至尊vi老品牌值得信赖可以将函数作为子道具传递给组件渲染函数.

4. 高阶组件(临时)

这是反应中允许重用组件逻辑的一种高级技术 渲染方法内部. 可以使用组件的高级级别将组件转换为更高级别的组件. 例如,当用户登录时,九五至尊vi老品牌值得信赖可能需要显示一些组件. 要检查这一点,您需要为每个组件添加相同的代码. 这里使用了高阶组件,其中检查用户登录并将代码保存在一个应用程序组件下的逻辑. 而其他组件被包装在其中.

2. 最佳实践#2:反应组件

它的组件是一个react项目的构建模块. 下面是在组件状态和组件层次结构中使用反应进行编码时可以考虑的一些反应最佳实践.

1. 分解为小组件

尝试将大组件分解为小组件,以便组件尽可能多地执行一种功能. 管理、测试、重用和创建新的小组件变得更加容易. 这很有道理,对吧?

2. 基于需求使用功能组件或类组件

如果您需要在不执行任何逻辑或状态更改的情况下显示用户界面, 使用功能组件代替类组件,因为在这种情况下,功能组件更有效.

例如:

  1. 尽量减少反应生命周期方法的逻辑,如componentDidMount(), componentDidUpdate()等. 不能与功能组件一起使用,但可以与类组件一起使用.
  2. 当使用功能性组件时,您将失去对渲染过程的控制. 这意味着只要在组件上有一个小的变化,功能组件总是重新渲染.

3. 使用带有钩子的功能性组件

在反应 v16发布之后.08,发展是可能的 功能组件的状态 有了新功能 “反应挂钩”. 它降低了管理Class组件状态的复杂性. 所以总是倾向于使用带有反应钩子的功能性组件,如useEffect()、useState()等. 这将允许您在层次循环中重复使用事实和逻辑,而无需进行太多修改.

4. 适当的命名和解构道具

为了保持代码的可读性和简洁性,请使用有意义的短名称来命名组件的道具. 也, 使用函数的道具解构功能,它不需要编写带有每个属性名的道具,可以按原样使用.

这里有了道具解构,九五至尊vi老品牌值得信赖可以不用道具直接使用name和title.名称或道具.title.

5. 使用propTypes进行类型检查和错误预防

对传递给组件的道具进行类型检查是一个很好的做法,这有助于防止错误. 请参考下面的代码如何使用

反应.proptype:

3. 最佳实践#3:代码风格

1. 命名约定

  • 一个组件的名字应该总是Pascal的大小写,比如' SelectButton ', ' Dashboard '等等. 对组件使用Pascal大小写将其与默认的JSX元素标记区分开来.
  • 在组件内部定义的方法/函数应该使用驼峰式大小写,比如' getApplicationData() ', “showText()”等等.
  • 对于应用程序中全局使用的常量字段,尽量只使用大写字母. 例如const PI = " 3.14”;

2. 尽量避免使用国家

无论何时在组件中使用state, 将其集中到该组件,并将其作为道具传递到组件树中.

3. 编写干代码

尽量避免重复代码,并创建一个公共组件来执行维护DRY (Don 't Repeat Yourself)代码结构的重复任务.

例如:当你需要在屏幕上显示多个按钮时,你可以创建一个通用的按钮组件并使用它,而不是为每个按钮编写标记.

4. 尽量避免不必要的Div

  • When there is a single component to be returned, there is no need to use
    .
  • When there are multiple components to be returned, use or in shorthand form <> as shown below:

5. 从代码中删除不必要的注释

只在需要的地方添加注释,这样您在以后更改代码时就不会感到困惑.

也不要忘记删除像Console这样的语句.日志、调试器、未使用的注释代码.

6. 使用解构获得道具

ES6中引入了解构. javascript函数中的这类特性允许您轻松提取 表单 数据和分配你的变量从对象或数组. 此外,解构道具使代码更清晰,更容易阅读.

例如:

  • 示例1:
    有一个反对的员工.

    要访问object的属性,你需要写:

    它可以用析构方法写成如下:

  • 示例2:
    九五至尊vi老品牌值得信赖再举一个例子. 以一只猫为例,九五至尊vi老品牌值得信赖希望通过命名类及其类型将其显示为div. 在div之间, 九五至尊vi老品牌值得信赖可以看到一个语句,它会告诉猫的颜色, 它的性质——好的或坏的, 等.

    保持代码的清晰性, 九五至尊vi老品牌值得信赖可以把所有的三元运算符放在它自己的变量中,看看变化.

7. 应用ES6扩展功能

使用ES6函数传递对象属性将是一种更简单、更有效的方法. 在打开和关闭标签之间使用{…props}将自动插入该对象的所有道具.

您可以使用扩展功能:

  • 不需要三元操作符
  • 不需要只传递HTML标记属性和内容

为避免重复使用功能,在以下情况下请勿使用扩展函数:

  • 还有动态属性
  • 需要数组或对象属性
  • 在需要嵌套标记的呈现情况下

8. 3原则

当有三个或更少的属性时, 然后你应该在组件和渲染函数中保持这些属性.

例如: 下面的代码可以编写一行代码来获取属性.

但是,找到下面的代码,在单行中写了3个以上的道具:

在渲染

上面的代码变得不可读且笨拙. 所以当有3个以上的小道具时,将每一个都写在新的一行中,如下所示:

在渲染

9. 使用父/子组件管理太多的道具

在组件的任何级别上管理属性都是一项棘手的任务, 而是在反应的状态和ES6解构特性的帮助下, Props可以以更好的方式编写,如下所示.

例如:
九五至尊vi老品牌值得信赖创建一个应用程序,其中包含已保存的地址列表和当前位置的GPS坐标.

当前用户的位置应该被添加到收藏地址中,并可以保存在父组件的App部分,如下所示:

现在,让 data 九五至尊vi老品牌值得信赖当前用户距离收藏地址有多近,九五至尊vi老品牌值得信赖将从应用程序传递至少两个小道具

在App的render()方法中:

在FavAddress组件的render()中:

正如你在上面所看到的 信息图表它越来越笨重了. 更可行的做法是保留多个选项集,并将它们分隔在各自的内部对象中.

因此,在应用的构造函数中:

在App渲染()之前的一点:

在应用程序呈现():

对于FavAddress组件,在渲染函数中九五至尊vi老品牌值得信赖可以看到:

10. 使用映射函数动态渲染数组

在反应, 可以使用返回动态HTML块的道具创建对象,而无需编写重复的代码. 为此,react提供了一个map()函数来按顺序显示数组. 当使用带有map()的数组时,数组中的一个参数可以用作键.

除了这个, ES6扩展函数可以使用object发送对象中的整个参数列表.键().

另一个映射数组的例子如下:

11. 动态呈现 && 和三元运算符

在反应中,可以执行与变量声明相同的条件呈现. 对于带条件的小代码, 三元操作符很容易使用,但代码块很大, 要找到这些三元算符变得很困难. 所以代码也可以写如下:

当有两个以上的条件时,或者九五至尊vi老品牌值得信赖需要在一个特定的条件下渲染一些代码,而没有其他部分时,上述条件渲染方法就很有用了. 在这些情况下,您可以使用 && 具有条件的运算符.
所以上面的代码可以用真正的三元方式来写:

尽管上面的代码组织得很好,但它 可以 已经变得混乱和不可读,如果渲染函数有不止一行,因为会有更多的嵌套括号.

如你所见, 在这两种情况下,代码长度是相同的,但有一个主要区别, 在第一个例子中, 两种不同语法之间的快速切换使得视觉解析比第二种困难, 这是一个简单的JavaScript代码与变量分配和一行返回函数.
从上面的代码中可以推断出,如果JavaScript保存在JSX对象中,则超过两个单词(e.g. object. 属性),然后在返回调用之前保留该代码.

12. 使用es-lint或Prettier进行格式化

在编写代码时遵循es-lint规则,并在需要干净和格式化的代码时使用换行符. 您还可以使用prettier来格式化代码.

13. 为每个组件编写测试

为开发的每个组件编写测试用例是一个很好的实践,因为它可以减少在部署代码时出现错误的机会. 通过单元测试,您可以检查所有可能的场景. 玩笑或酶是最常用的反应测试框架.

4. 最佳实践#4:反应 JS安全性

1. 为HTTP身份验证添加安全性

在许多应用程序中,身份验证是在用户登录或帐户创建时完成的,这个过程应该是安全的,因为客户端身份验证和授权可能暴露于许多安全缺陷,这些缺陷可能会破坏应用程序中的这些协议.

通常用于添加真实性的技术可以通过使用验证.

  1. <一个href="http://jwt.io/">JSON Web Token (JWT)
  2. <一个href="http://oauth.net/2/">OAuth
  3. <一个href="http://auth0.com/">AuthO
  4. <一个href="http://reactrouter.com/">反应的路由器
  5. <一个href="http://www.passportjs.org/">PassportJs

安全与JWT
在使用JWT时,有几点需要考虑:

  1. 请避免使用基于本地存储的JWT令牌. 因为人们可以很容易地使用浏览器的Dev工具控制台获得一个令牌并进行编写.
    控制台.日志(localStorage.getItem(令牌))
  2. 将令牌存储到HTTP cookie中,而不是localStorage.
  3. 或者,你可以将你的代币保存到反应应用的状态.
  4. 令牌应该保存在后端. 在后端签署和验证这些密钥将是很容易的.
  5. 您应该使用类似于密码字段的长而不可预测的秘密,同时创建一个要求强而长密码的帐户.
  6. 一定要确保使用HTTPS代替HTTP. 这将为基于web的应用程序提供一个可以通过安全SSL网络发送的有效证书提供保证.

2. 防止破碎的身份验证

有时当您输入身份验证细节时, 应用程序崩溃,这可能导致对用户凭证的利用. 因此,为了消除这种脆弱性,请确保您遵循以下提到的措施.

  1. 是否使用多因素和两步授权.
  2. 您可以使用基于云的身份验证 实例 科尼托)以确保访问安全.

3. 破碎的访问控制

如果对认证用户的限制和限制管理不当,可能会导致对未经授权的数据和反应本地应用程序功能的利用. 有时未经授权的用户还可以更改数据的主键和操作应用程序的功能. 为确保安全,防止未经授权的访问,请遵循以下做法:

  1. 向您的反应代码中添加基于角色的身份验证机制
  2. 要保护应用程序,请拒绝功能访问

4. 跨站点脚本(XSS)

  1. 您可以创建自动化的监督功能,以清理用户输入
  2. 丢弃恶意和无效的用户输入,使其不能呈现在浏览器中.

5. 防范DDoS攻击

脆弱的安全担忧发生在 整个 应用程序 状态管理  有漏洞,掩盖了知识产权. 这将限制由于服务终止而导致的通信. 这里有一些方法可以阻止这种情况:

  1. api上的速率限制——这将使用axios速率限制,对来自特定源的给定IP的请求数量进行限制,该源具有完整的库集.
  2. 向API添加应用级限制.

6. SQL注入

这次攻击与数据操纵有关. 由于这个弱点, 攻击者可以在用户允许或不允许的情况下修改任何数据,也可以提取任何机密信息 data by <一个href=“http://www.purlyarn.com/blog/optimize-sql-query/">执行任意SQL代码.

解决方案

  1. 消除SQL注入攻击, 第一个, 根据各自的API模式验证API调用函数. 为了解决基于时间的SQL注入攻击问题, 您可以使用模式的及时验证来避免任何可疑的代码注入
  2. 防止SQL漏洞的另一种有效方法是使用SSL证书.

7. 使用dangerouslySetInnerHTML

在反应, 你可以对DOM内部的元素使用' innerHTML ',这是一种冒险的做法,因为它是XSS攻击的大门. 为了解决这个问题, 反应提供了一个“dangerous setinnerhtml”道具来防止这种类型的攻击.

也, 您可以使用诸如DOMPurify这样的库来净化用户输入并移除任何恶意的输入. 反应已经有一个称为依赖项注入的内置函数,用于正确管理用户界面.

5. 结论

通过这个博客, 九五至尊vi老品牌值得信赖让你更深入地了解了reactjs开发者和前端开发者是如何工作的, 如何增加安全性, 如何构建组件和应用程序. 反应最佳实践将为您提供更少的输入选项和更明确的代码. 一旦你开始使用它, 你会开始喜欢它清晰清晰的代码重用特性, 先进的反应成分, 添加一个 单独的 状态变量,以及其他较小的现成反应.简化使用Js特性. 这张来自反应的最佳实践清单将帮助你把你的企业放在正确的道路上, 再往后, 消除任何未来的开发并发症.

九五至尊vi老品牌值得信赖已经展示了反应最佳实践的信息图形表示. 看一看:

反应js最佳实践
想要嵌入此图像? 请注明来源 <一个href=“http://www.purlyarn.com">九五至尊vi.com

在您的网站上分享此图像

请注明归属于九五至尊vi.com 图形.
<一个href=“http://www.purlyarn.com/blog/reactjs-best-practices/”><img src="http://www.purlyarn.com/blog/wp-content/uploads/2021/03/ReactJS-Infographic-1.jpg" alt=“最佳实践”的反应 宽度="952" 高度="3948">a>

其他最佳实践博客:

  1. <一个href="http://www.purlyarn.com/blog/angular-optimization-and-best-practices/" rel="noreferrer noopener" target="_blank">角的最佳实践和安全性
  2. <一个href="http://www.purlyarn.com/blog/node-js-best-practices/" rel="noreferrer noopener" target="_blank">NodeJS最佳实践和安全性
  3. <一个href="http://www.purlyarn.com/blog/vue-js-best-practices/" rel="noreferrer noopener" target="_blank">VueJS最佳实践和安全
  4. <一个href=“http://www.purlyarn.com/outsourcing/2021/07/quality-assurance-best-practices.html" rel="noreferrer noopener" target="_blank">软件测试的QA最佳实践
  5. <一个href=“http://www.purlyarn.com/blog/devops-best-practices/" rel="noreferrer noopener" target="_blank">DevOps的最佳实践
  6. <一个href=“http://www.purlyarn.com/blog/best-practices-in-sharepoint-framework-development/" rel="noreferrer noopener" target="_blank">SharePoint的最佳实践
  7. <一个href=“http://www.purlyarn.com/blog/net-core-best-practices/" rel="noreferrer noopener" target="_blank">.净核心最佳实践
头像
<一个href=“http://www.purlyarn.com/blog/author/vishals/">Vishal沙

Vishal沙对多种应用程序开发框架有广泛的理解,并在更新的趋势中占据上风,以便在动态的市场中努力奋斗并茁壮成长. 他在技术和商业方面培养了自己的管理能力,并通过他的博客文章提供了自己的专业知识.

相关的服务

了解更多九五至尊vi老品牌值得信赖反应JS开发

了解更多

想要雇佣有技能的开发人员


    评论

    • 留个口信...

      1. 吉奥莉•翰达岛

        CSS在JS解决方案中的目的是什么?

        1. 哈里森·米尔斯

          在一个更大的项目中,样式化和主题化任务是具有挑战性的活动,维护这些大的CSS文件会增加更多的挑战. 因此,本文引入了CSS-in JS解决方案的概念. EmotionJS, 风格的组件, glamour都是基于这个概念的一些库.

      2. 德克斯特布鲁克斯

        我想给EmotionJS添加一些东西——它是一个JavaScript库,允许你用JavaScript语言编写CSS样式. 它体积小,重量轻,具备高端性能.

      3. 该隐斯塔福德

        非常感谢. 在react中,我已经被许多项目所困扰,正在寻找一些好的资源来执行这些项目. 偶然发现了这一点,并将在我的项目中实现某些东西,并将留下反馈. 回复

      4. 布鲁斯·拉什

        这里JSX代表JavaScript XML(可扩展标记语言),它是反应JS环境的扩展. 换句话说,JSX使开发人员更容易编写和添加HTML代码到反应.

      5. Talika从此Khatri

        什么是反应中的JSX?

      6. Vinod Pandey

        Vue JS是一个开源的进步JavaScript框架. Vue框架提供了基本组件,大大简化了开发过程.

      7. 米洛追逐

        Vue js是框架还是库?

      8. Abha曼德

        之所以如此,是因为反应为开发人员提供了许多优势,比如Virtual DOM, 容易调试和SEO友好. 它还提供了重用组件的功能. 还有许多其他特性使得反应不仅很受欢迎,而且成为开发的首选.

      9. 拉胡尔米特

        为什么反应最近越来越受欢迎?

      10. 亚瑟J. 年轻的

        当存在DDoS攻击时, 它通常意味着黑客通过大量流量淹没或导致网站崩溃而导致网站崩溃, 因此,主要目的是通过中断连接到Internet的主机的服务,确保机器或网络资源对其用户不可用.

      11. 亚伦王

        DDoS的目的是什么?

      12. 沃伦·加勒特

        当然,艾米丽娅,这就是你问题的答案: 分布式拒绝服务(DDoS)是一种针对网站或设备的网络攻击, 攻击者通过单个或多个源发送的流量使网站或设备充满.

      13. 艾美莉亚Herrera

        有什么可以帮助我理解DDoS攻击是什么意思吗?

      14. 艾丹海耶斯

        对于任何想要开始使用反应 JS的人, 这是一个完美的博客,可以帮助他了解项目结构的最佳实践, 组件, 代码风格, 和安全.

      15. 塞德里克·刘易斯

        毫无疑问,反应 JS在开发领域是一个流行的名字. 这个博客强调了所有的见解和最佳实践,这些见解和实践可以帮助开发人员在他/她所从事的任何项目中获得最佳的可能结果. 反应 JS对企业也很有帮助,因为它有助于构建优秀和高性能的应用程序.

      16. 玫瑰可能

        作为一名开发人员, 在我最近完成的反应项目中,我对安全问题有一些担忧,我正在寻找一些参考资料. 感谢您对反应 Security Best Practices的详细解释,它帮助我最小化了我之前遇到的bug