Introduction to react components====

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

  Example:

// 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:
<Hello></Hello>

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

format

// 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

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;

characteristic:

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

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

difference:

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-</h1> <ul> ></li> ))} </ul> <div></div> </> ); }

Add new comment

0 comments