React component Foundation

catalogue

What is a component?

There are two ways to create components

2. Class components

Extract component

Status of components

Instance property method

There are several methods to solve the problem of event binding this point

  Controlled and uncontrolled of forms

What is a component?

Component is a part of the page. Using React is using components, and the so-called component-based development uses the idea of divide and rule to manage complex page logic.

Features: independent, reusable and composable

There are two ways to create components

1. Functional components

Components created by functions are also called simple components or stateless components

It is essentially a js function

There are two steps to use:

1. Define first  

a. Function names must begin with an uppercase letter.

b. There must be a return value. The return value represents the structure of the component. If you don't want to render anything, you can

  2. Reuse

a. < function name / >, single label closed.

b. < function name > < / function name >, double label.

***Note: this in functional components refers to undefined, because the code compiled by Babel turns on strict mode

import ReactDOM from 'react-dom'

function Hello() {
    return <div>This is the first function component</div>
}
// Const Hello = () = > < H1 > this is a function component</ h1>;

// Render the name of the function as the tag name, which can be in the form of single closed or double tags
ReactDOM.render(<Hello />, document.getElementById('root'))

react parses the < hello / > tag. If it starts with uppercase, it will be parsed as a group. When parsing, it is found that it is a functional component. Then, it will call this function to convert the returned virtual DOM into a real Dom and render it to the page.


2. Class components

It also has two steps

1. Define first

a. Components created using the class of ES6 syntax are also called complex components or stateful components.

b. Class names must also begin with an uppercase letter.

c. Class components should inherit   React.Component   Parent class, so that you can use the methods or properties provided in the parent class.

d. Class component must provide   render()   Method. This in this method points to the instance object of this component. There must be a return value in this method.

2. Reuse

class Hello extends React.Component {
    render() {
        return <div>This is the first class component</div>
    }
}
ReactDOM.render(<Hello />, document.getElementById('root'))
ReactDOM.render() process of parsing class components:

react parses the < hello / > tag. If it starts with uppercase, it will be parsed as a group. When parsing, it is found that it is a class component. It will automatically new out the instance, call the render () method on the prototype, convert the virtual DOM returned by the render method into a real DOM, and render it to the page

Extract component

1. Default export ------------- export this component by default in App.js through export default.

2. Default import ------------- import App components in index.js by default.

Status of components

State is the data used to describe things at a certain time

characteristic:

Can be modified, and the status will be updated after modification

effect

  • Save data.

  • Data change response to view (operation inside React package)

The steps used are:

1. Define first

The first way: in the constructor   this.state = {}.

The second way: define the state through state. The value corresponding to state must be an object.

2. Reuse

It is generally used inside the render function    --- this.state.xxx

It can also be modified

Syntax:

this.setState({ Attribute: what is it modified to })

Note:

Do not modify the original data directly

Instance property method

class App {
  constructor() {
    // Instance properties
    this.age = 18
    // this.sex = 'male' / / #1
  }
  // Instance attribute, equivalent to #1
  sex = 'male'

  // Example method
  handleClick = () => {}
}

  Prototype attribute method

class App {
  // Prototype method
  handleClick(){}
}

  Static attribute method

class App {
  // Static properties
  static age = 18
}

// Static properties
App.sex = 'male'

console.log(App.age) // 18

There are several methods to solve the problem of event binding this point

1. Use higher-order function / function coritization

class App extends React.Component {
    state = {
        count: 0,
    }
    handleClick() {
        // What does this point to here? It depends on who called it!
        return () => {
            console.log(this.state.count)
        }
    }
    render() {
        return (
            <div>
                <h2>Counter:{this.state.count}</h2>
                <button onClick={this.handleClick()}>+1</button>
            </div>
        )
    }
}

2. Wrap a layer of arrow function

class App extends Component {
    state = {
        count: 0,
    }
    handleClick() {
        console.log(this.state.count)
    }
    render() {
        return (
            <div>
                <h2>Counter:{this.state.count}</h2>
                <button onClick={() => this.handleClick()}>+1</button>
            </div>
        )
    }
}

3. Use bind --- to change the direction of this

class App extends Component {
    state = {
        count: 0,
    }
    handleClick() {
        console.log(this.state.count)
    }
    render() {
        return (
            <div>
                <h2>Counter:{this.state.count}</h2>
                <button onClick={this.handleClick.bind(this)}>+1</button>
            </div>
        )
    }
}

  4. Add the arrow function to the instance through the assignment statement - this is usually used more

class App extends Component {
    state = {
        count: 0,
    }
    handleClick = () => {
        console.log(this.state.count)
    }
    render() {
        return (
            <div>
                <h2>Counter:{this.state.count}</h2>
                <button onClick={this.handleClick}>+1</button>
            </div>
        )
    }
}

  5. Create another instance method in the constructor and share a function body with the prototype method

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            count: 0,
        }
        // 1. A handleClick function is attached to the instance itself
        // 2. The function body of this function is a new function generated by the handleClick function on the prototype
        // 3. Bind this in the handleClick function on the prototype to this through bind, and this in the constructor here is the instance object
        // 4. In fact, the constructor handleClick (proximity principle) is called when clicking, and the handleClick in this constructor executes the function body of handleClick on the prototype
        this.handleClick = this.handleClick.bind(this)
    }
    handleClick() {
        console.log(this.state.count)
    }
    render() {
        return (
            <div>
                <h2>Counter:{this.state.count}</h2>
                <button onClick={this.handleClick}>+1</button>
            </div>
        )
    }
}

  Controlled and uncontrolled of forms

1, Controlled form component

1. Category I:

Including input, textarea and select

1. Define variables in state

2. Bind this variable to the value of the form element

3. Bind onChange event to form element

4. Event callback   this.setState({variable: e.target.value})

  2. Category II

radio  , checkbox

Unlike the first type, the checked attribute is bound

  Another is optimization --- optimize code by mastering custom attributes

2, Uncontrolled form component

import React, { Component } from 'react'

export default class App extends Component {
    // Step1
    input = React.createRef()
    handleChange = () => {
        // Step3
        console.log(this.input.current.value)
    }
    render() {
        return (
            <div>
                {/* Step2 */}
                <input ref={this.input} type='text' placeholder='Input content' onChange={this.handleChange} />
            </div>
        )
    }
}

Tags: Javascript Front-end React

Posted on Mon, 06 Dec 2021 17:14:39 -0500 by ryy705