React组件实例化

React组件是一个小型的、可重用的代码，负责渲染HTML。在React中，我们可以将一个组件定义为一个类或一个函数。

为了定义一个React组件，我们将创建一个组件并扩展React.component 类。例如，要创建一个教室组件，教室组件应该有教室的详细信息。

在本教程中，我们将主要讨论JJSX。JSX元素可以用HTML格式写，也可以写成一个组件实例。在JJSX中，你用大写字母来区分类似HTML和组件实例。

前提条件

为了有效理解本教程，读者需要具备以下条件。

对React库的基本了解。
一个合适的IDE，如VS Code。
对JSX的基本了解。

主要收获

什么是组件实例化？
如何实例化一个React组件
JSX元素中类似HTML和组件实例之间的区别
新关键词的含义以及它在React中的使用方法
React组件实例化

实例化React组件

让我们从导入React库开始。

  import React from 'react';

我们导入React是因为JSX将被转换为普通的JavaScript，使用React的React.createElement 方法。因此，在使用JSX时，我们需要导入React。

在导入React库后，我们将导入ReactDOM 。如果你没有使用ES6，在你的IDE中安装react-dom ，使用。

npm install react-dom

但由于我们将使用ES6，我们将使用下面的代码导入ReactDOM 。

  import ReactDOM from 'react-dom';

ReactDOM 对于渲染JSX元素和反应组件到，这是非常重要的。代表你的应用程序的整个用户界面。DOM DOM

让我们来创建一个组件类。我们将子类化React.Component 来创建我们的组件类。我们将通过使用以下语法来实现。class V extends React.Component {}.这就是ES6创建一个有状态组件的方法。

现在我们将在我们的代码中加入render() 函数。

   class V extends React.Component {
   render() {}
   }

在我们的应用程序中，render() 函数的动机是使React在我们的网页上渲染HTML。对于一个render() 函数来说，必须有一个return 语句。如图所示，render() 函数中的return 语句会返回一个 JSX 表达式。

  class V extends React.Component {
  render() {
    return <h1>Welcome to React world</h1>;
   }
  }

像HTML和JSX元素中的组件实例之间的区别是，要制作一个React组件，不要像下面所示的那样用<P> </p>,<h1> </h1> 或<div> </div> 等标签来命名你的JSX元素，而是给它起一个和组件类一样的名字。

  ReactDOM.render(
    <h1>Welcome to React World</h1>,
   document.getElementById('root')
  );

例如，我们通过在代码下面添加将是我们组件的类来创建一个组件实例，如下图所示。

 import React from 'react';
 import ReactDOM from 'react-dom';

   class Valley extends React.Component {
    render() {
    return <h1>Welcome to React world</h1>;
   }
 }
   <Valley />

在创建了一个组件实例后，代码是这样的。这就是你的组件实例了!当类Valley 作为参数传入ReactDOM.render() ，它就被实例化了。

现在我们来渲染我们的组件。

    ReactDOM.render(
  <Valley />,
  document.getElementById('app')
  );

当ReactDOM.render() 告诉我们的组件类<Valley /> 调用其render() 方法时，render() 方法被调用。

然后类<Valley /> 调用它的render() 方法，该方法返回JSX元素<h1>Welcome to React World</h1> 。这将使 "欢迎来到React世界 "的信息显示在屏幕上。

使用一个新的关键字

new 关键字创建一个空白的、简单的JavaScript项目。它的语法是new constructor[([arguments])] 。

当你创建一个对象时，会创建一个类实例。要实例化的类名是由构造函数名提供的。

构造函数初始化了新的对象。一个引用被返回到由new 操作符创建的对象。

new 关键字使this 关键字指向新创建的对象，每次提到this 关键字时。

new 关键字执行构造函数，使用新创建的对象。因此，新创建的对象被返回。

实例化函数组件

函数组件是简单的JavaScript组件。它们不使用render() 方法。相反，它们负责渲染用户界面。

它们也接受和使用props。一个函数组件被认为是一个 "转储"，因为它只是接受数据。

例子

 function Student (marks) {
  this.marks = marks;
  }

 const study = new Student(50);

  console.log(study);

上面的代码输出学生的分数。这是因为JS引擎会看到new 关键字，创建一个新的对象并将原型设置为Student.prototype 。

如果一个属性在被请求的新对象中未被定义，脚本将检查[Prototype] 对象中的属性。对象的原型属性是不可见的，因此我们将添加Object.getPrototypeOf(obj) 方法来访问原型对象。

让我们添加console.log(Object.getPrototypeOf(study) === Student.prototype) 来查看study 的原型是否是Student ，这将输出真。

如果我们添加Student ，而不是study ，如图所示console.log(Object.getPrototypeOf(Student) === Student.prototype) ，它将输出错误，因为Student不是Student的原型。

在上面的代码中会发生什么？

const study 是指。变量声明需要内存。
赋值运算符= 意味着：this 变量将用赋值运算符= 后的表达式进行初始化。
表达式new Student(50) ：一个新的对象被创建，原型被设置为 student.prototype。
分数被分配给新创建的study 对象。
新创建的对象被返回并被分配到变量study 。

实例化类组件

类是一个蓝图，可以帮助你定义类似对象之间的共享结构和行为。

类组件实现了逻辑和状态，因此它们被视为 "智能"。道具被传递给类组件，并通过this.props 。

在下面的代码中，开发者类定义了一个构造函数。开发者类期望有一个名字参数，它使用this 关键字在实例上存储这个值。

new 关键字生成了一个新的对象。因此，dev1 作为新对象被返回，因此它输出Tom 作为我们的新开发者。

   class Developer {
  constructor() {
    this.name = 'Tom';
    }
  }
   // class instantiation
  const dev1 = new Developer();

  console.log(dev1.name);
 // expected output: "Tom"

一个Student 类在我们的代码中扩展了Human 类。两个类都定义了一个constructor() 函数。每个学生也是一个Human 。Human 类期望得到名字参数，该值使用this 关键字存储在实例中。

Student 类期望名字和级别参数，然后级别值被存储在其实例上。

由于Student 类扩展了Human 类，Student 类用name 参数调用super() 方法，这将调用Human 类的构造函数并存储名称。

最后，两个类都定义了greet() 函数。

  class Human{
  constructor(name) {
  this.name = name;
  }
  greet() {
    console.log(`Hello ${this.name}!`);
  }
}

class Student extends Human {
  constructor(name, level) {
    super(name);
    this.level = level;
  }
  greet() {
    console.log(`Hello ${this.name} from ${this.level}`);
  }
}

我们在实例化这些对象时传递的参数可以在类的构造函数中访问。

每当一个对象在类外被实例化时，构造函数就会被调用，我们通过使用new 关键字来做到这一点，如下所示。

我们从人类类中实例化了一个对象，从学生类中实例化了另外两个对象。

在第三个对象中，也就是我们从学生类中实例化出来的对象，我们直接对该对象定义了一个greet() 函数。

const o1 = new Human("John");
const o2 = new Student("Tina", "1st Grade");
const o3 = new Student("Mary", "2nd Grade");
o3.greet = () => console.log('I am wonderful!');

 o1.greet();
 o2.greet();
 o3.greet();

预期输出

Hello John!
Hello Tina from 1st Grade
I am wonderful!

当我们测试这个脚本时会发生什么呢？

构造01将使用它的类（人的类）中的问候方法。
构造02将使用学生类的greet方法。
Const 03将使用它自己直接定义的greet方法。

结论

JSX语法被Babel转译并被React用来创建对象的实例。因此，在Babel中使用JSX时，我们需要导入react。这就像告诉Babel你要提供一个JJSX文件。

一个React组件实例使用类来实例化一个react组件。你可以在你的React应用程序中使用多个实例或只使用一个实例。每个实例都可以单独执行，使它们成为创建应用程序时的一个要求。实例是原始类的复制品。