React Componentization - Introduction to Class Components and Function Components

React component development

Componentized development idea

Componentization is a divide and conquer idea

If we put all the processing logic in a page together, the processing will become very complicated, and it is not conducive to subsequent management and expansion.

But if we say that a page is divided into small functional blocks, each functional block completes its own independent function, then the management and maintenance of the entire page becomes very easy.

We need to think about the whole application in terms of componentization :

We divide a complete page into many components;

Each component is used to implement a functional block of the page;

And each component can be subdivided;

The components themselves can be reused in multiple places;

Componentization is the core idea of ​​React and the focus of our follow-up courses. The app we encapsulated earlier is itself a component :

Componentization provides an abstraction that allows us to develop independently reusable small components to construct our applications.

Any application will be abstracted into a component tree.

Componentization of React

The application of componentization thinking:

With the idea of ​​componentization, we will make full use of it in subsequent development.

Split the page into small, reusable components as much as possible.

This makes our code easier to organize and manage, and more scalable.

React components are more flexible and diverse than Vue, and can be divided into many types of components in different ways :

According to the definition of components, they can be divided into: 函数组件(Functional Component) and 类组件(Class Component);

According to whether there is state inside the component that needs to be maintained, it can be divided into: stateless component (Stateless Component) and stateful component (Stateful Component);

According to the different responsibilities of components, they can be divided into: Presentational Component and Container Component;

These concepts overlap a lot, but they mostly focus on the separation of data logic and UI presentation :

Functional components, stateless components, and presentational components mainly focus on UI display;

Class components, stateful components, and container-type components mainly focus on data logic;

Of course, there are many other concepts of components: such as asynchronous components, higher-order components, etc., which will be explained in my subsequent articles.

Class Components in React

The definition of a class component has the following requirements:

The name of the component starts with an uppercase character (whether a class component or a function component)

Class components need to inherit fromReact.Component

The class component 必须implements the render function

Before ES6, class components could be defined through the create-react-class module, but currently the official website recommends that we use ES6 class definitions.

Use a class to define a component :

The constructor is optional, we usually initialize some data in the constructor;

What is maintained in this.state is the data inside our component;

The render() method is the only method that must be implemented in a class component;

import React, {
    
     Component } from 'react'

export class App extends Component {
    
    
  // 在constructor中初始化一些数据
  constructor() {
    
    
    super()

    // this.state中维护的就是我们组件内部的数据
    this.state = {
    
    
      message: "Hello World"
    }
  }

  // render函数是唯一必须实现的
  render() {
    
    
    const {
    
     message } = this.state

    return (
      <div>
        <h2>{
    
    message}</h2>
      </div>
    )
  }
}

export default App

When render is called, it checks for changes to this.props and this.state and returns one of the following types :

React elements :

• Usually created via JSX.
• For example, <div/>it will be rendered as a DOM node <MyComponent/>by React, and it will be rendered as a custom component by React;
• Both element tags <div/>and custom components <MyComponent/>are React elements.

export class App extends Component {
    
    
  constructor() {
    
    
    super()
    this.state = {
    
    
      message: "Hello World"
    }
  }

  // render函数是唯一必须实现的
  render() {
    
    
    const {
    
     message } = this.state
		
    // 1.react元素: 通过jsx编写的代码就会被编译成React.createElement, 所以返回的就是一个React元素
    return (
      <div>{
    
     message }</div>
    )
  }
}

Arrays or fragments ( fragments will be explained in subsequent articles) : Make the render method return multiple elements.

export class App extends Component {
    
    
  render() {
    
    
    // 2.返回数组
    return ["aaa", "bbb", "ccc"]
  }
}

export class App extends Component {
    
    
  render() {
    
    
    // 2.返回数组
    return [
      <h2>我是标题</h2>,
      <div>我是内容</div>,
      <i>我是斜体</i>
    ]
  }
}

Portals : can render child nodes to different DOM subtrees ( explained in subsequent articles ).

String or numeric types : they are rendered as text nodes in the DOM

export class App extends Component {
    
    
  render() {
    
    
    // 3.返回字符串或数值类型
    // return "aaa"
    return 123
  }
}

boolean or null : render nothing

export class App extends Component {
    
    
  render() {
    
    
    // 4.返回布尔类型
    // return true
    return false
  }
}

React function components

A function component is 使用function来进行定义a function, except that this function returns the same content as the render function in a class component .

Function components have their own characteristics (of course, we will talk about hooks later, which is different) :

There is no life cycle, it will also be updated and mounted, but there is no life cycle function;

The this keyword cannot point to a component instance (because there is no component instance);

no internal state (state);

Let's define a function component:

export default function App() {
    
    
  return (
    <div>
      <h2>我是标题</h2>
      <div>我是内容哈哈哈</div>
    </div>
  )
}

In the current stage of learning, I mainly explain class components. When I learn Hooks later, I will learn more about functional components .