Introduction to react components====






Two ways to create React components


Functional component - use functions to create components

Class component - create a component with class

Stateful and stateless components

Application scenarios of stateless components

Status of class components


Encapsulation of specific functions is mainly used to split the UI.


Structure HTML

Style CSS

Logical JS


  • independent

  • Reusable

  • Composable


  • Basic components: basic tags such as input and button, as well as general UI components encapsulated by antd

  • Business component: business abstraction UI composed of basic components. For example, a drop-down box containing all department information of company A

  • Block component: a UI block composed of basic components and business components

  • Page component: the final page displayed to the user, which generally corresponds to a routing rule

Two ways to create React components

  1. Create components using functions in JS

  2. Create components using class in JS


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

const title = <h1>react Two components of</h1>

// Define a functional component
const Com1 = () => {
  return <div>First functional component</div>

// Define a class component
class Com2 extends React.Component {
  render () {
    return <div>First class component</div>

const content = (
    {<Com1 />}
    <hr />
    {<Com2 />}

ReactDOM.render(content, document.getElementById('root'))


  1. Class components are cumbersome

  2. Functional components are simple

At present, it is used in projects on the market

Functional component - use functions to create components

Define components

Components created using JS functions (or arrow functions) are called function components

  • Convention 1: capitalize the first character of function name

    It must start with a capital letter * *, according to which React distinguishes components from ordinary HTML

  • Convention 2: there must be a return value

    Represents the UI structure of the component; Returns null if nothing needs to be rendered


// 1. Create components using normal functions:
function Hello() {
  return <div>This is my first function component!</div>

function Button() {
  return <button>Button</button>

// 2. Create a component using the arrow function:
const Hello = () => <div>This is my first function component!</div>

Use components

Using components is like using HTML tags. Use the function name as the component label name

//Render components using double labels:

ReactDOM.render(<Hello></Hello>, root)

//Render components using a single label:
<Hello />
ReactDOM.render(<Hello />, root)

Class component - create a component with class

Define format

A component created using the class of ES6 is called a class component


// import { Component } from 'react'
// Class class name extends Component{
import React form 'react'
class Class name extends React.Component {
  // ... 
  render () {
    return Of this component UI structure

be careful:

  1. Class names must begin with an uppercase letter

  2. Extensions is a keyword used to implement inheritance between classes. Class components should inherit the React.Component parent class to use the methods or properties provided in the parent class.

  3. A class component must provide a render method. The render method must have a return value indicating the UI structure of the component. Render will be executed once when the component is created

Stateful and stateless components

What is state

Definition: data used to describe the shape of things at a certain time. It is generally called state.

For example: the number of books in stock on September 23; the height of people at the age of 18;


The state can be changed, and the view will change accordingly

  Function: 1. Save data     two   Lay the foundation for subsequent view updates


Stateful component: a component that can define a state. A class component is a stateful component.

Stateless component: a component that cannot define a state. A function component is also called a stateless component

  Note: on February 6, 2019, rect 16.8 introduced React Hooks, so that functional components can also define their own state

Application scenarios of stateless components

  • The component itself does not need to be stateful. For example, render a fixed piece of content

  • The component itself has no state and can be imported from the outside

Status of class components

Define status

Fixed format. Use the state = object for initialization

import React from "react";
export default class Hello extends React.Component {
  // The state here is the state
  state = {
    list: [{ id: 1, name: "Tomorrow will be better" },{ id: 2, name: "Unforgettable tonight" }],
    isLoading: true

Use in view

  render() {
    return (
        <h1>song sheet-{this.state.count}</h1>
          { => (
            <li key={}>{}</li>
        <div>{this.state.isLoading ? "Loading" : "Load complete"}</div>

Tags: Javascript Front-end React

Posted on Sat, 06 Nov 2021 23:15:19 -0400 by PureDrive