React组件— ReactJS中的道具和状态以及示例

“在React中,一切都是组成部分”

如果您熟悉React,那么您一定已经多次听过或读过这个短语。 但是您知道它的确切含义和用法吗? 如果没有,请阅读此博客以了解有关React组件以及生命周期中不同阶段的所有信息。 我相信,当您阅读完本博客后,您将对React组件及其周围的概念有一个完整的了解。 但是在继续之前,请快速浏览我将要讨论的主题:

  • 什么是React组件?
  • React组件的优势
  • 道具
  • 状态
  • 国家与道具
  • 反应组件生命周期

什么是React组件?

早期,开发人员必须编写1000行代码才能开发一个简单的单页应用程序。 这些应用程序大多数都遵循传统的DOM结构,因此对它们进行更改非常具有挑战性,对于开发人员来说是一项繁琐的任务。 他们必须手动搜索需要更改的元素并相应地进行更新。 即使是很小的错误也会导致应用程序失败。 而且,更新DOM非常昂贵。 因此,引入了基于组件的方法。 在这种方法中,整个应用程序被划分为称为组件的逻辑块。 React是选择这种方法的框架之一。

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

React组件被视为用户界面的构建块。 这些组件中的每一个都存在于同一空间中,但彼此独立执行。 React组件具有自己的结构,方法和API。 它们是可重用的,并可根据需要注入接口。 为了更好地理解,请将整个用户界面视为一棵树。 在这里,起始组件成为根,每个独立的片段变为分支,进一步细分为子分支。

这可以使我们的UI保持井井有条,并允许数据和状态更改从根逻辑流到分支,然后再到子分支。 组件直接从客户端对服务器进行调用,这允许DOM动态更新而无需刷新页面。 这是因为react组件建立在AJAX请求的概念上。 每个组件都有自己的接口,可以调用服务器并进行更新。 由于这些组件彼此独立,因此每个组件都可以刷新而不会影响其他组件或整个UI。

我们使用React.createClass()方法创建一个组件。 该方法必须传递一个对象参数,该参数将定义React组件。 每个组件必须只包含一个render()方法。 它是组件的最重要属性,它负责解析JavaScript JSX中的HTML。 此render()将组件的HTML表示形式返回为DOM节点。 因此,所有HTML标记都必须包含在render()内的封闭标记中。

以下是用于创建组件的示例代码。

 从'react'导入React; 
从'react-dom'导入ReactDOM;

MyComponent类扩展了React.Component {
render(){
返回(

你好


这是一个组件



);
}
}
ReactDOM.render(
,document.getElementById('content')
);

React组件的优势

  1. 代码可重用性 -基于组件的方法使您的应用程序开发更加轻松快捷。 如果要在代码中使用预先存在的功能,则可以将该代码放在自己的代码中,而不是从头开始构建它。 它还可以使您的应用程序体系结构随时更新,因为您可以更新需要升级的特定区域。
  2. 快速开发 -基于组件的UI方法可导致迭代和敏捷的应用程序开发。 这些组件托管在一个库中,在整个开发过程中,不同的软件开发团队可以从中访问,集成和修改它们。
  3. 一致性 -实现这些可重用组件有助于保持设计的一致性,并可以在组织整个应用程序的代码时提供清晰的信息。
  4. 可维护性 -具有一组组织良好的组件的应用程序可以快速更新,并且您可以对受影响的区域和不会受影响的区域充满信心。
  5. 可伸缩性 —通过适当组织的,易于实施的组件库,开发将变得更加容易。 确保组件正确命名空间有助于避免样式和功能在项目扩展时泄漏或重叠到错误的位置。
  6. 易于集成 —组件代码存储在GitHub之类的存储库中,该库开放供公众使用。 应用程序开发团队精通使用源代码存储库,因此他们能够根据需要提取代码并将其注入到应用程序中。

现在您已经了解了什么是组件以及它的优点是什么,现在让我们了解如何将数据馈送到这些组件。

组件有两种接收数据的方式:

  1. 道具
  2. 状态

道具

道具代表属性。 它们是只读组件,其工作方式类似于HTML属性。 Prop是一种将数据从父组件传递到子组件的方法。 让我们通过一个例子来理解这一点。

众所周知,react组件以树的形式排列UI,其中父组件成为根,子组件成为分支和子分支。 现在,假设父组件希望将数据发送到其深层嵌套的组件之一。 让我们说从组件1开始,您需要向组件6发送一个属性。

您不能将属性直接传递给目标组件。 这是因为React遵循的规则是,属性必须从父组件流到直接子组件。 这意味着在发送属性时您不能跳过子组件层,并且子组件也无法将属性发送回父级。 您可以使用默认道具,以防父组件不传递道具以使它们仍然被设置。 这就是为什么React具有单向数据绑定的原因。

因此,在这种情况下,我们需要逐层发送数据,直到到达目标子组件为止。 此路径中的每个组件都必须从其父级接收该属性,然后在收到后将该属性重新发送给其子级。 重复此过程,直到您的媒体资源达到其目标组件为止。

这是传递道具的一个例子。

 从'react'导入React; 
从'react-dom'导入ReactDOM;

MyComponent类扩展了React.Component {
render(){
返回(

你好




);
}
}

函数标题(道具){
返回(



);
}
功能页脚(道具){
返回(

欢迎:{props.name}


ID为:{props.id}



);
}
ReactDOM.render(
,document.getElementById('content')
);

由于道具只能从父级组件传递,因此无法更改。 这使它们不可变且笨拙。 这带来了巨大的挑战,因为现代应用程序尚未在页面加载时准备好所有状态。 数据返回时可能会发生Ajax或事件,因此有人需要负责处理更新。 这就是React状态出现的地方。

状态

通常,组件会接受道具并进行渲染。 这些称为无状态组件。 但是它们还可以提供状态,该状态用于存储随时间变化的有关组件的数据或信息。 这些组件称为有状态组件。 状态更改可以作为对用户事件或系统事件的响应而发生。 换句话说, 状态是每个反应组件的核心,它决定了组件的行为和渲染方式。 他们还负责使组件动态和交互式。 因此,它们必须保持尽可能简单。

可以使用引用(例如this.state)访问状态。 您可以使用花括号{}访问和打印JSX中的变量。 同样,您可以在render()内部渲染 this.state 。 您必须为组件设置默认状态,否则它将设置为null。

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

 从'react'导入React; 
从'react-dom'导入ReactDOM;

类MyComponent扩展了React.Component {
constructor(){
超();
this.state = {
名称:“ Maxx”,
id:'101'
}
}
render()
{
setTimeout(()=>; {this.setState({name:'Jaeha',id:'222'})}},2000年)
返回(

你好{this.state.name}


您的ID为{this.state.id}



);
}
}
ReactDOM.render(
,document.getElementById('content')
);

国家与道具

反应组件生命周期

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

  1. 初始阶段
  2. 更新阶段
  3. 道具变更阶段
  4. 卸载阶段

每个阶段都包含一些生命周期方法,这些方法仅特定于它们。 现在让我们找出在每个阶段都发生了什么。

初始阶段

React组件生命周期的第一阶段是初始阶段或初始渲染阶段。 在此阶段,组件将开始其旅程并进入DOM。 此阶段包含以下方法,这些方法以预定义的顺序调用。

  1. getDefaultProps():此方法用于指定this.props的默认值。 它甚至在您的组件被创建或父级的任何道具被传递到其中之前就被调用。
  2. getInitialState():此方法用于在创建组件之前指定this.state的默认值。
  3. componentWillMount(): 这是在组件呈现到DOM中之前可以调用的最后一个方法。 但是,如果在此方法内调用setState(),则组件将不会重新呈现。
  4. render():此方法负责返回单个根HTML节点,并且必须在每个组件中进行定义。 如果您不想渲染任何内容,则可以返回nullfalse
  5. componentDidMount():呈现组件并将其放置在DOM上后,将调用此方法。 在这里,您可以执行任何DOM查询操作。

更新阶段

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

  1. shouldComponentUpdate():使用此方法,您可以控制组件更新自身的行为。 如果从此方法返回true,则组件将更新。 否则,如果此方法返回false,则组件将跳过更新。
  2. componentWillUpdate():此方法称为 在您的组件即将更新之前。 在此方法中,您无法通过调用this.setState来更改组件状态。
  3. render():如果通过shouldComponentUpdate()返回false, 则将再次调用render()内部的代码,以确保组件正确显示自身。
  4. componentDidUpdate():一旦更新并渲染了组件,便会调用此方法。 您可以将任何代码放入此方法中,一旦组件更新,便要执行该代码。

道具变更阶段

在将组件渲染到DOM中之后,除了状态更改外,组件的唯一其他更新时间就是其prop值更改的时间。 实际上,此阶段的工作方式与上一阶段类似,但不是状态,而是道具。 因此,从更新阶段开始,此阶段只有一种其他方法。

  1. componentWillReceiveProps():此方法返回一个参数,该参数包含将要分配给组件的新属性值。
    其余生命周期方法的行为与上一阶段中看到的方法相同。
  2. shouldComponentUpdate()
  3. componentWillUpdate()
  4. render()
  5. componentDidUpdate()

卸载阶段

这是组件生命周期的最后一个阶段,在该阶段中,将组件完全销毁并从DOM中删除。 它仅包含一种方法:

  1. componentWillUnmount():调用此方法后,将从DOM中永久删除您的组件。 用这种方法 您可以执行任何与清理相关的任务,例如删除事件侦听器,停止计时器等。

以下是整个生命周期图:

这使我们到了React Components博客的结尾。 我希望在本文中我能够清楚地解释什么是React组件,以及如何使用它们。

如果您想查看有关市场上最流行的技术(如人工智能,Python,道德黑客)的更多文章,则可以访问Edureka的官方网站。

请注意本系列中的其他文章,这些文章将解释Web开发的其他各个方面。

1. ReactJS教程

2. React Router v4教程

3. React Redux教程

4.角度教程

5.角度指令教程

6.使用ngAnimate指令对AngularJS应用程序进行动画处理

7. NodeJS教程

8. PHP教程

9. jQuery教程

10.十大JavaScript框架

11.使用Node.js和MySQL构建一个CRUD应用程序

12.使用Node.JS和MongoDB构建CRUD应用程序

13.使用Node.js构建REST API