СОДЕРЖАНИЕ
02 июня 2020

反应最佳实践


如果您是从事构建高度交互的用户界面的前端开发人员,则很有可能在工具包中加入了React。在使用React驱动的创作时,您应该小心地做一些与React最佳实践一致的事情。这将有助于使您的代码更好地组织.

如您所知,React是Facebook创建的一个库,它允许与许多有趣的组件集成。实际上,任何开发人员都可以创建自己的组件并使社区可以访问它们.

今天,我们将重点介绍给您 React最佳实践中最基本的:

��1.使组件小巧并具有特定功能

众所周知,React可能具有执行许多任务的庞大组件。但是设计组件的一种更好的方法是将它们保持较小,以便一个组件对应一个功能。理想情况下,单个组件应呈现页面的特定位置或修改特定行为。这有很多优点:

  • 功能特定的组件可以是独立的,这使测试和维护更加容易.
  • 每个小组件都可以在多个项目中重复使用.
  • 可以将执行常规功能的组件提供给社区.
  • 使用较小的组件,可以更轻松地实现性能优化.
  • 更新较小的组件更容易.
  • 更大的组件必须表现得更难,并且可能难以维护.

创建一个简洁的组件和创建多个特定于功能的组件之间的平衡因组织而异。毕竟,您可以根据需要拥有任意数量的组件,并以任何想要获得相同最终结果的方式对其进行重组。.

2.️2.可重用性很重要,因此将新组件的创建保持在最低限度

通过遵循一个功能=一个组件的规则,可以提高组件的可重用性。这意味着如果已经存在该功能的组件,则应跳过尝试为该功能构建新组件的尝试.

通过在您的项目或任何数量的项目中重复使用组件,不仅可以实现一致性,还可以为社区做出贡献.

另一方面,如果任何组件变得庞大,笨拙且难以维护,则最好将其分解为所需的多个较小的组件.

例如,您甚至可以更进一步,创建一个可以处理图标的Button组件。然后,每当您需要一个按钮时,就会有一个要使用的组件。使它更具模块化将使您可以用同一段代码涵盖许多情况。你必须瞄准中间的某个地方。您的组件应该足够抽象,但又不要过于复杂.

IconButton类扩展了React.Component {
[…]
render(){
返回(

);
}
}

��3.合并重复的代码–干燥您的代码

所有代码的通用规则是使其尽可能简洁明了.

这里也没有什么不同,因为React最佳实践还会指导您保持代码简洁明了。一种方法是避免重复-不要重复自己(DRY).

您可以通过仔细检查模式和相似性的代码来实现。如果发现任何内容,则可能是您重复了代码,并且可以消除重复。很有可能,重新编写一些内容可以使其更加简洁.

这在很大程度上依赖于React中的可重用性原则。假设您要添加多个包含图标的按钮,而不是为每个按钮添加标记,只需使用上面显示的IconButton组件即可。您甚至可以通过将所有内容映射到数组来走得更远.

const button = [‘facebook’,’twitter’,’youtube’];

返回(

{
button.map((button)=> {
返回(

);
})
}

);

��4.将CSS放入JavaScript

当您开始处理项目时,通常的做法是将所有CSS样式保留在一个SCSS文件中。全局前缀的使用可防止任何潜在的名称冲突。但是,当您的项目扩大规模时,此解决方案可能不可行.

有许多库使您可以用JS编写CSS. 情感JS迷人的 是JS库中两种最受欢迎​​的CSS.

这是在项目中使用EmotionJS的示例。 EmotionJS可以为您的生产生成完整的CSS文件。首先,使用npm安装EmotionJS.

npm install-保存@ emotion / core

接下来,您需要在应用程序中导入EmotionJS.

从’@ emotion / core’导入{jsx}

您可以设置元素的属性,如下面的代码片段所示:

让Component = props => {
返回(


}

这是完整的链接 EmotionJS的文档.

��5.仅在必要时发表评论

仅在必要时将注释附加到代码中。这不仅符合React的最佳实践,而且同时满足两个目的:

  • 它将使代码在视觉上不会混乱.
  • 如果您碰巧在以后的某个时间更改代码,则可以避免注释和代码之间的潜在冲突。.

��6.以功能命名组件

最好以执行的功能命名组件,以使其易于识别.

例如,ProductTable –它可以立即传达组件的功能。另一方面,如果您根据代码的需要来命名组件,则它可能在将来的某个时间使您感到困惑.

再举一个例子,最好为组件Avatar命名,以便可以在任何地方使用-无论是对于作者,用户还是在注释中。相反,如果我们在使用时将组件AuthorAvatar命名,则会限制该组件的效用.

此外,在功能后命名组件使它对社区更有用,因为它更有可能被发现.

��7.使用大写字母表示组件名称

如果像大多数人一样,您正在使用JSX(JavaScript扩展),则您创建的组件的名称必须以大写字母开头。例如,您将组件命名为SelectButton(而不是selectbutton)或Menu(菜单)。我们这样做是为了使JSX可以区别于默认HTML标记来识别它们.

早期的React版本维护了所有内置名称的列表,以区别于自定义名称。但是由于清单需要不断更新,因此报废了,资本成为了规范.

如果JSX不是您选择的语言,则可以使用小写字母。但是,这可能会降低项目之外组件的可重用性.

��8.注意其他命名约定

使用React时,通常会使用JSX(JavaScript扩展)文件。因此,为React创建的任何组件都应以Pascal大小写或大写驼峰命名。这将转换为没有空格的名称,并且每个单词的首字母大写.

如果要创建提交表单的函数,则应将其命名为大写驼峰的SubmitForm,而不是SubmitForm,submit_form或submit_form。上骆驼案通常被称为帕斯卡案。这是进一步的 范例清单 Pascal情况下变量和函数名的设置.

��9.将有状态方面与呈现分开

React中的组件可以是有状态的或无状态的。状态组件存储有关组件状态的信息并提供必要的上下文。相反,无状态组件没有内存,也无法为UI的其他部分提供上下文。他们仅从父组件接收道具(输入),并返回JSX元素。它们具有可伸缩性和可重用性,类似于JavaScript中的纯函数.

React最佳实践之一是将有状态数据加载逻辑与呈现无状态逻辑分开。最好有一个有状态的组件来加载数据,而让另一个无状态的组件来显示该数据。这降低了组件的复杂性.

更高版本的React v16.8具有一项新功能– React Hooks,可编写与状态函数相关的组件。最终可以消除对基于类的组件的需求.

例如,您的应用程序正在装入某些数据。您要做的是管理主组件中的数据,并将复杂的渲染任务作为道具传递给子组件.

从’./RenderTable’导入RenderTable;

类表扩展了组件{
状态= {loading:真};

render(){
const {loading,tableData} = this.state;
返回加载? :;
}

componentDidMount(){
fetchTableData()。then(tableData => {
this.setState({loading:false,tableData});
});
}
}

��10.代码应按预期执行并且可以测试

确实,此规则无需解释。您编写的代码应该表现出预期的效果,并且可以轻松,快速地进行测试。最好将测试文件的名称与源文件的后缀.test命名为相同。这样就可以轻松找到测试文件.

您可以使用JEST测试您的React代码.

��11.与任何一个组件相关的所有文件应放在一个文件夹中

将与任何一个组件相关的所有文件(包括样式文件)保存在一个文件夹中.

如果仅某个特定组件使用了任何小的组件,则将这些较小的组件全部放到该组件文件夹中是有意义的。这样,层次结构将变得易于理解-大型组件具有自己的文件夹,而所有较小的部分均被拆分为子文件夹。这样,您可以轻松地将代码提取到任何其他项目,甚至可以随时修改代码.

例如,对于Form组件,所有与Form相关的部分(如CSS文件,图标,图像,测试和任何其他子组件)都应位于同一文件夹中。如果您明智地命名文件,并按逻辑将相关文件保持在一起,那么以后找到它们就不会有任何困难.

��12.使用位工具

可帮助组织所有React组件的React最佳实践之一是使用诸如 .

这些工具有助于维护和重用代码。除此之外,它还有助于使代码变得易于发现,并促进团队在构建组件方面的协作。此外,代码可以跨项目同步.

��13.使用摘要库

代码段可帮助您掌握最新的最佳语法。它们还有助于使您的代码保持相对无缺陷,因此这是您不应错过的React最佳实践之一。.

您可以使用许多代码段库,例如ES7 React,Redux,JS代码段等。.

14.️14.为所有代码编写测试

在任何编程语言中,适当的测试都可以确保添加到项目中的任何新代码都可以与现有代码很好地集成在一起,并且不会破坏现有功能。为您创建的任何新组件编写测试是一个好主意。作为一种好习惯,您应该在组件目录中创建__Test__目录以容纳所有相关测试.

您可以将React中的测试大致分为两部分:使用React应用程序测试组件的功能,并在完整的应用程序在浏览器中呈现后对其进行测试。您可以使用跨浏览器测试工具进行后一类的测试.

对于前者,您可以使用JavaScript测试运行程序, 笑话 使用jsdom模拟HTML DOM来测试React组件。虽然只有在真实设备上的浏览器中才能进行完全准确的测试,但在项目的开发阶段,Jest可以很好地近似真实的测试环境.

��15.遵守起毛规则,将太长的线分开

Linting是一个过程,其中我们运行一个程序,该程序分析代码以查找潜在错误.

通常,我们将其用于与语言相关的问题。但是它还可以自动解决许多其他问题,尤其是代码样式。在React代码中使用linter有助于保持代码相对无错误和无bug.

关于React最佳实践的总结

我希望这份React最佳实践清单能帮助您将项目置于正确的轨道上,并避免日后出现任何潜在问题.

如果您有任何与React相关的问题,请随时在下面的评论中提交.

别忘了加入我们的速成班,以加快WordPress网站的速度。通过一些简单的修复,您甚至可以减少50-80%的加载时间:

Andrei Băicuș的代码示例。 Shaumik Daityari的内容更新

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    
    目前市场上有15种最佳网站设计软件 אירוח וורדפרס הזול הטוב ביותר
    0 комментариев
    
    אירוח וורדפרס הזול הטוב ביותר: 10 אפשרויות עבור פחות מ- $ 0.99 לחודש אירוח וורדפרס הזול הטוב ביותר
    0 комментариев
    
    2020年20种以上最佳Angular Admin仪表板模板 אירוח וורדפרס הזול הטוב ביותר
    0 комментариев
    
    10+外观精美的Wix模板与WordPress主题 אירוח וורדפרס הזול הטוב ביותר
    0 комментариев
    Adblock
    detector