技术原理

React组件——ReactJS中的道具和状态

人士“在React中,一切都是一个组件

如果你熟悉React,那么你一定听过或读过很多次这个短语。但你知道它的确切含义和使用方法吗?如果没有,那么请阅读这个博客,了解所有关于React组件和生命周期中不同阶段的信息。我相信当你读完这个博客时,你会对React组件及其相关概念有一个完整的理解。但在继续之前,请快速查看我将要讨论的主题:

什么是React组件?React Components Props States vs Props React Component Lifecycle的优势什么是React Components?”

“早期开发人员必须编写1000行代码来开发一个简单的单页应用程序。这些应用大多遵循传统的DOM结构,对其进行修改对开发人员来说是一项非常具有挑战性和繁琐的任务,他们必须手动搜索需要修改的元素并相应地进行更新。即使是一个小错误也会导致应用程序失败。而且,更新DOM非常昂贵。因此,引入了基于组件的方法。在这种方法中,整个应用程序被划分为逻辑块,称为组件。React是选择这种方法的框架之一。如果您计划在web开发领域建立自己的职业生涯,提前开始将为您打开许多机会。先获得认证。

现在让我们了解这些组件是什么。

React组件被视为用户界面的构建块。这些组件中的每一个都存在于同一空间中,但它们彼此独立执行。React组件有自己的结构、方法和api。它们是可重用的,可以根据需要注入到接口中。为了更好的理解,把整个UI看作一棵树,在这里开始的组件变成根,每个独立的部分变成分支,它被进一步划分为多个子分支。

UI Tree - React Components - Edureka这使我们的用户界面保持有序,并允许数据和状态更改从根逻辑流到分支,然后再流到子分支。组件直接从客户端调用服务器,这允许DOM在不刷新页面的情况下动态更新。这是因为react组件是基于AJAX请求的概念构建的。每个组件都有自己的接口,可以调用服务器并更新它们。由于这些组件彼此独立,因此每个组件都可以刷新而不影响其他组件或整个UI反应.createClass()方法创建组件。必须向此方法传递一个将定义React组件的对象参数。每个组件必须正好包含一个render()方法。它是负责在JavaScript、JSX中解析HTML的组件最重要的属性。此render()将返回组件的HTML表示形式作为DOM节点。因此,所有HTML标记都必须包含在render()内的封闭标记中。

下面是创建组件的示例代码。

从“React”导入React;类MyComponent扩展反应组分{渲染(){返回( 你好 这是一个组件);},文档.getElementById(“内容”));从“React”导入React;类MyComponent扩展反应组分{渲染(){ 你好}函数头(道具){ }返回( 欢迎:{道具名称}}反应dom.render();

由于道具只能从父组件传递,因此不能更改它们。这让他们变得一成不变,哑口无言。这是一个巨大的挑战,因为现代应用程序并没有在页面加载时准备好所有的状态。数据返回时可能会发生Ajax或事件,因此需要有人负责处理更新。这就是反应状态出现在图片中的地方。

状态

一般来说,组件获取道具并呈现它们。这些称为无状态组件。但它们也可以提供用于存储数据或组件信息的状态,这些数据或信息可以随时间变化。这种组件称为有状态组件。状态更改可以作为对用户事件或系统事件的响应发生。换句话说,状态是每个反应组件的核心,它决定组件的行为和呈现方式。它们还负责使组件具有动态性和交互性。因此,它们必须尽可能简单。

可以使用此引用访问状态,例如。,本州. 可以使用大括号{}访问和打印JSX中的变量。同样,可以渲染本州在render()中。必须为组件设置默认状态,否则将设置为空。

现在让我们看看如何将状态分配给组件。

从“react dom”导入ReactDOM;类MyComponent扩展反应组分{构造函数(){本州= {name:'最大值',编号:101}{返回( 你好{this.state.name公司} 你的身份证是{this.state.id号});}},文档.getElementById(“内容”));States vs Propsstate vs props - React Components - Edureka

React组件生命周期

React提供各种方法,在组件生命周期的某个阶段发生时发出通知。这些方法被称为生命周期方法,这些生命周期方法并不复杂。您可以将这些方法视为专用的事件处理程序,在组件生命周期的不同时间点调用它们。您甚至可以将自己的代码添加到这些方法中以执行各种任务。谈到组件的生命周期,生命周期分为4个阶段。它们是:

初始阶段更新阶段Props更改阶段卸载阶段

每个阶段都包含一些仅针对它们的生命周期方法。现在让我们来了解在每个阶段中发生了什么。

a.初始阶段–反应组件生命周期的第一个阶段是初始阶段或初始呈现阶段。在这个阶段中,组件将开始它的旅程并走向DOM。此阶段由以下按预定义顺序调用的方法组成。

getDefaultProps():此方法用于指定这个道具. 甚至在创建组件或将父级的任何道具传递给组件之前,都会调用它。getInitialState():此方法用于指定本州在创建组件之前。componentWillMount():这是组件呈现到DOM之前可以调用的最后一个方法。但如果在该方法中调用setState(),则组件将不会重新呈现。render():此方法负责返回单个根HTML节点,并且必须在每个组件中定义。如果不想呈现任何内容,可以返回null或false。componentDidMount():一旦组件被呈现并放置在DOM上,就会调用此方法。在这里,您可以执行任何DOM查询操作。”

“b.更新阶段——一旦组件被添加到DOM中,它们只能在发生状态更改时更新和重新呈现。每次状态更改时,组件都会再次调用其render()。任何依赖于此组件输出的组件也将再次调用其render()。这样做是为了确保我们的组件显示的是它自己的最新版本。因此,为了成功地更新组件状态,将按照给定的顺序调用以下方法:

shouldComponentUpdate():使用此方法,您可以控制组件更新自身的行为。如果此方法返回true,则组件将更新。否则,如果此方法返回false,则组件将跳过更新。componentWillUpdate():在组件即将更新之前调用此方法。在此方法中,不能通过调用本设置状态. render():如果通过shouldComponentUpdate()返回false,将再次调用render()中的代码,以确保组件正确显示自身。componentDidUpdate():一旦更新并呈现了组件,就调用此方法。您可以将任何代码放入此方法中,以便在组件更新后执行。”

“c.Props Change Phase–在组件被呈现到DOM中之后,除了状态更改之外,组件将更新的唯一其他时间是其prop值更改时。实际上,这个阶段的工作原理与前一阶段类似,但它处理的不是状态,而是道具。因此,此阶段只有一个来自更新阶段的附加方法。

componentWillReceiveProps():此方法返回一个参数,该参数包含即将分配给组件的新属性值。其余生命周期方法的行为与我们在前一阶段看到的方法相同。shouldComponentUpdate()componentWillUpdate()render()componentDidUpdate()

d.卸载阶段–这是组件生命周期的最后一个阶段,在这个阶段中,组件将被完全销毁并从DOM中移除。它只包含一个方法:

componentwillunmunt():调用此方法后,您的组件将永久地从DOM中移除。在此方法中,您可以执行任何与清理相关的任务,如移除事件侦听器、停止计时器等。

下面是整个生命周期图:

lifecycle of components - React Component - Edureka这将我们带到React组件日志的末尾。我希望在这个博客中我能够清楚地解释什么是React组件,它们是如何使用的。你可以参考我在ReactJS教程上的博客,如果你想了解更多关于ReactJS的信息。

如果你想接受React方面的培训并希望自己开发有趣的用户界面,那么请查看由Edureka提供的ReactJS with Redux认证培训,Edureka是一家值得信赖的在线学习公司,拥有超过250个网络,全球有1000名满意的学习者。

有问题要问我们吗?请在评论部分提到它,我们会给你回复的

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片
人工智能专业就业前景排名 投稿者
我还没有学会写个人说明!
最近文章
  • * 没有更多文章了
  • 热门搜索

    分类目录