保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847

我们应该对React组件了解什么

React组件:(有状态& Stateless)

React是最受欢迎的JavaScript前端库。它促进了交互式用户界面的建立。在实践中,React更容易学习。它在为什么最近受到如此多的关注并日益流行的原因中起着重要作用。 React就是它的组成部分,它是React的灵魂。对React的组件有深刻的了解会使开发人员’ lives very easy.

什么是React Component?

反应组件是一个可自我维持的独立微实体,可以描述用户界面。任何应用程序的用户界面都可能分成较小的部分,称为组件。每个组件将具有自己的结构,代码和API。如果以Facebook为例,它包含成千上万个单独的React组件,当我们查看它们的应用程序时,它们会相互连接。任何现代应用程序中的组件数量都在不断增长。它们具有组件的功能,它使开发人员可以将每一部分视为独立的代码。我们可以处理一个组件,而无需考虑它对代码的其他组件的影响。可重用,它增加了使用组件的优势

什么是国家?

状态是我们通常导入到组件中以向用户显示易于更改的数据。原因很多,因为诸如数据库之类的数据发生了变化,我们从中获取信息的信息可能会被用户更新。

有状态和无状态组件

有状态和无状态组件也可以通过各种名称来调用,例如:

  • 容器与演示组件
  • 智能与哑巴组件

区别在于从字面上看,其中一个具有状态,而另一个不具有状态!

有状态的组件会跟踪变化的数据。而无状态组件将打印出正在馈送给它们的内容。它会通过道具来做到这一点,否则他们将始终渲染同一件事。

状态/容器/智能组件:

无状态/谓词/哑组件:该函数写为-

什么时候React组件应该是无状态的和有状态的?

通常,人们从开始编写组件之初就没有意识到这些组件的样子,而是随着进一步的发展而逐渐发现。但是,这里有一些重要的准则可供您参考:

考虑并可视化您的网站,就好像它是一个单独的组件,然后将其分解为较小的组件。

当信息发生变化时,我们会发现需要该州。最好有一个保留所有信息的父组件。它传递给无状态的子组件。

这样可以确保在状态组件发生错误的情况下是否需要进行任何调试,以便我们可以查找父组件。看看问题出在哪里,而不是在孩子那里检查’的组件。儿童部分的唯一工作是将信息作为道具接收。

无状态组件可能会根据接收到的信息而有所不同。而有状态组件会跟踪信息本身,而不是通过道具来获取信息。也将其作为输出。

当信息不是全部是动态的而是完全静态的时,我们便有了表示性的组件,因此我们事先知道它不会改变。

在这里,在这个无状态组件中,我们甚至发现它甚至不需要道具!

无状态和有状态组件及其可重用性:

尽管您可能不需要重用无状态/表示组件,但是您仍应在React中构建它,就像您打算这样做一样。现在,可能会出现一个问题,即有状态组件是否可重用?当然,我们可以重用有状态组件!即使在某些情况下,也有观察到,使用整洁的代码库,重用有状态组件必须减少工作量。在重用有状态组件之前,必须牢记以下几点:

哪个子组件可以获取其父组件的保留状态。这样子组件就更容易握住道具了?

是否有很多组件在跟踪其状态。

是否有可能最大程度地减少保持状态的组件数量?

并且是否有任何数据足以使子组件在没有任何父母帮助的情况下跟踪使用状态?

 

有状态组件与无状态组件

区分组件的一种非常流行的方法是区分。它们分为有状态和无状态两个部分’t have.

有状态组件:

有状态的组件始终由类组件组成。如前所述,有状态组件由在构造函数中初始化的状态组成。

构造函数(道具){

超级(道具);

this.state = {count:0};

}

在这里,我们创建了一个状态对象,并使用0计数对其进行了初始化。为使类字段更容易而提出了另一种语法。这不在ECMAScript规范之内,但是如果我们要使用babel转译器,那么我们的语法将起作用。

无状态组件:

无状态组件可以使用函数或类来成形。但是除非我们需要使用生命周期挂钩,否则我们应该使用无状态的功能组件。如果我们决定使用无状态功能组件,则有很多用处。使用无状态功能组件的好处是:它们易于编写,理解和测试。但是,到目前为止,与类组件相比,使用无状态功能组件没有任何额外的性能优势。不利之处是我们将无法使用生命周期挂钩。

在讨论有状态和无状态组件时,我们还应该对另一种在编写组件时非常有用的模式有所了解。此方法的有用之处在于,表示逻辑与行为逻辑分离。因此,它分为表示组件和容器组件。

演示组件:

演示组件实际上就是外观。这些组件在那里用于接受来自容器对方的道具。与呈现UI有关的所有内容都是Presentational Components的一部分。它们可以再次使用,并且必须与行为组件保持不同。除非需要状态,否则在编写表示性组件时,功能组件应该是我们的首选。如果表示组件需要状态,则UI数据很重要,而不是实际数据。我们应该记住,表示性组件永远不会与Redux存储交互或进行任何API调用。

容器组件:

容器组件是行为方面。它告诉演示组件应使用道具渲染哪些内容以及不应该渲染哪些内容。容器组件绝不能包含标记和样式有限的DOMS。如果我们要使用Redux,则容器组件将包含将动作分配给商店的代码。这也是我们应该放置API调用的地方,其结果应处于组件的状态。通常的结构是在顶部存在结构组件,该组件会将数据向下传递给其子组件’的演示组件作为道具。这对于较小的项目将很好地工作,但是当我们将有较大的项目时,事情将会变得混乱很多,许多中间组件将接受并传递道具。因此,使容器组件对于叶组件唯一是一个好主意。反过来,这也将缓解大脑中的中间成分。

结论

无状态功能组件非常优雅。在大多数情况下,它们是创建演示文稿组件的正确选择。原因在于无状态功能组件就是功能,我们将不会花费很多时间来编写和理解它们。除此之外,它们易于测试。我们必须记住,功能性反应组件没有上边缘优化。这可能会随着React的未来版本而改变,因为后者可能会优化功能组件以获得更好的性能。因此,如果我们不必关心性能。我们必须选择功能组件来获得漂亮的视图和表示以及类组件。

 

作者头像
QuikieApps
//www.qinheli.com.cn/blog

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。