Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

React technology 2021 React Technology 2021 React Technology (Used to read articles and documents, now feel a little uncomfortable to brush the video, the stand-up teacher spoke very well, too detailed but also good.)

Functional components and class components

React creates components in two ways: functional components apply to simple component definitions, and class components apply to complex component definitions. The power of the class component is that its this, react.componentloads lots of React properties and methods.

Functional component

// 1. Create functional components
function MyComponent() {
  // This is undefined because strict mode is enabled after Babel is compiled.
  console.log(this);
  return <h2>I am a function defined component (for simple component definition)</h2>
}
// 2. Render the component to the page
ReactDOM.render(<MyComponent/>.document.getElementById('test'));
Copy the code

Perform the ReactDOM. Render (< MyComponent / >… After that, what happened?

  1. React parses the component tag and finds itMyComponentComponents.
  2. Returns when a component is found to have been defined using a function and then called that functionVirtual DOMtoReal DOM, which is then rendered on the page.

The component class type

// 1. Create a class component
class MyComponent extends React.Component {
  render() {
    // render is placed where? Prototype object of MyComponent for instance use.
    // Who is this in render? Instance object of MyComponent = MyComponent instance object
    console.log('in the render this'.this)
    return <h2>I am a component defined with a class (for the definition of a complex component)</h2>}}// 2. Render the component to the page
ReactDOM.render(<MyComponent/>.document.getElementById('test'));
Copy the code

Perform the ReactDOM. Render (< MyComponent / >… After that, what happened?

  1. React parses the component tag and finds the MyComponent component.

  2. Discover that the component is defined using a class, then new an instance of that class and invoke the Render method on that prototype through the instance.

  3. Turn the virtual DOM returned by Render into the real DOM and render it on the page.

Classes and inheritance in ES6

The creation of a class

class Person {
  constructor(name) {
    // Instance properties: properties defined inside the constructor on the instance object (this).
    this.name = name;
  }
  
  // Static property: refers to the property of the Class itself, i.e. 'class.propName', not the property defined on the instance object (this).
  static company = 'google';
  
  // Static methods: The static keyword means that the method is not inherited by the instance, but is called directly from the class
  static sayHello() {
    return 'hello';
  }
  
  // Instance methods: methods defined on instance objects (this).
  sayName() {
    return 'hello, I am ' + this.name; }}let kevin = new Person('Kevin');
console.log(Person.company); // 'google'
console.log(Person.sayHello()); // 'hello'
console.log(kevin.sayName()); // 'hello, I am Kevin'
Copy the code

Class inheritance

class Parent {
  constructor(name) {
    this.name = name;
  }
  
  sayName() {
    return 'hello, I am ' + this.name; }}class Child extends Parent {
  constructor(name, age) {
    // Call parent class constructor(name)
    super(name);
    this.age = age; }}let child = new Child('kevin'.'18');

console.log(child); // {name: 'kevin', age: '18'}
console.log(child.sayName()); // 'hello, I am Kevin'
Copy the code

The super keyword represents the constructor of the Parent class, equivalent to ES5’s parent.call (this).

Subclasses must call the super method from the constructor method or they will get an error when creating a new instance. This is because the subclass does not have its own This object, but inherits the parent’s This object and then processes it. If you don’t call super, your subclasses don’t get this.

It is for this reason that in the constructor of a subclass, the this keyword can only be used after super is called, otherwise an error will be reported.

The sayName instance method on Parent is defined as parent.prototype.getName =… As can be seen from the above figure, the instance method is mounted on the Parent prototype, shared by all instances, and the internal this environment of the instance method is determined by the object being called at that time.