Summary of knowledge points of react framework

catalogue

react

Basic concepts of recat

recat features

Development history

compatibility

Scaffold creation cra

JSX

Bound variable

html attribute insert variable

Multiline label

jsx annotation

Traversal data

Set style

Class style

assembly

Characteristics and advantages of components

Classification of components

Function component -- stateless component

Class component -- stateful component

props

props function component

props class component

props verification

State machine state

State creation

Read status

Modify state

Why use setState() to modify state

setState is asynchronous when modifying data

ref

react

Basic concepts of recat

react was developed by facebook

recat is a javascript library dedicated to building user interfaces

In order to solve the problem of slow dom loading in page update, react, a js library, is introduced to efficiently solve the problem of slow dom loading and page rendering in large projects

recat features

Declarative design: we just need to tell the program what to do, and the program will complete it for us

Efficient

flexible

Componentization

Single data flow

Development history

Launched in 2013, it was sought after by the market in September 2013, and a reactNative Technology (using react to write apps) was launched in March 2015

compatibility

ie8 is invalid

Scaffold creation cra

cra---create-react-app

1. Install cra globally

npm install -g create-react-app

2. View version

create-react-app --version

3.cd to project

4. Start creating project create react app project name

5.cd to project

6 start npm start

JSX

We write content in react using JSX syntax JSX=javascript and XML

When you meet < you will encounter {} when htm parses {} when js parses the outer layer of jsx, you'd better wrap it with a pair of ()

Note: jsx is a very strict syntax. Tags must follow w3c specification. Tags must be closed

JSX benefits:

1. Safe and reliable   Because errors will be found when compiling

Bound variable

Use {} to bind

<h1>You are bad - {text}</h1>

html attribute insert variable

Do not use double quotation marks directly {}

{/* Attribute interpolation variable */}
                <a href={ahref}>{btntext}</a>

Multiline label

Multiline labels must have a parent container to wrap

jsx annotation

{/ * I'm a comment for jsx * /}

Traversal data

Traverse the data in react using map ()

	 {
                        arr.map((v,i)=>{
                            return (
                                <li key={i}>{v}</li>
                            )
                        })
                    }
	<table>
                    {/* If you don't, there will be a warning */}
                    <tbody>
                    {
                        obj.map((v,i)=>{
                            return (
                                <tr key={i}>
                                    <td>{v.name}</td>
                                    <td>{v.age}</td>
                                </tr>
                            )
                        })
                    }    
                    </tbody>
                </table>   

Set style

Class style

Think that class is the keyword of es6 class, so use className

The reference style is referenced using import

import React, { Component } from 'react'

export default class homed extends Component {
    render() {
        return (
            <div>
                {/* In react, if you want to set the class style, class must become className */}
                <h1 className="demoh">Class style</h1>
            </div>
        )
    }
}

Reference style file

import React, { Component } from 'react'
// Reference css file
import "./homed.css"

export default class homed extends Component {
    render() {
        return (
            <div>
                {/* In react, if you want to set the class style, class must become className */}
                <h1 className="demoh">Class style</h1>
            </div>
        )
    }
}

Inline style

In line styles are set in the way of objects, so {}} outside {} is the syntax of jsx, and inside {} is the syntax of objects

And if there are more than one word, remove the initial capital of the following word

import React, { Component } from 'react'
// Reference css file
import "./homed.css"

export default class homed extends Component {
    render() {
        return (
            <div>
                {/* In react, if you want to set the class style, class must become className */}
                <h1 className="demoh">Class style</h1>

                {/* Inline styles are set using objects */}
                {/* And if there are more than one word, remove the initial capital of the following word */}
                <h1 style={{color:"red",backgroundColor:"pink"}}>Inline style</h1>
            </div>
        )
    }
}

assembly

Intrinsic custom label

Characteristics and advantages of components

Strong cohesion and weak coupling

It improves the reusability of the code

The test difficulty is reduced

The complexity of the code is also greatly reduced

Classification of components

In react, he has two ways to write components

Function component -- stateless component

Syntax:

Function function name (component name, but the first letter of the name must be capitalized){

return (

jsx

)

}

Class component -- stateful component

Syntax:

Class class name (initial capital of current component name) extends React.Component{

Render () {the render method is also called the render method. Its function is to render the current jsx

return(

jsx

)

}

}

props

Forward value transfer

Can props be modified?

props is read-only and cannot be modified

Syntax:

props function component

Syntax:

You only need to add a formal parameter that is afraid of props in the function component to use props

Sub component reception

// Subcomponents need to pass props as formal parameters
let Zi=(props)=>{
    let {text,num}=props

    return(
        <div>
            zizizziziziziz---{text}--{num}
        </div>
    )
}
export default Zi

Parent component delivery

import Fz from "./funpropszi.jsx"
let Fu=()=>{
    let obj={text:"text data",num:"num data"}
    return(
        <div>
            fufufufuffufufu
            {/* An extension operator can be used to pass parameters */}
            <Fz {...obj}/>
        </div>
    )
}
export default Fu

props class component

this.props.xxx

1. Set props for sub components

import React, { Component } from 'react'

export default class propszi extends Component {
    render() {
        return (
            <div>
                zizizzizizizizzz---{this.props.text}
                <br />
                {this.props.num}
            </div>
        )
    }
}

2. Parent component transfer

import React, { Component } from 'react'

import Pz from "./propszi.jsx"
export default class propsfu extends Component {
    render() {
        return (
            <div>
                fuffufufufufuffu
                {/* Parent component value transfer */}
                <Pz text="I am the parent component text" num="I am the parent component num"/>
            </div>
        )
    }
}

The writing above is too low. Change it

When receiving data, the subcomponent takes out the data of this props by means of deconstruction and assignment

import React, { Component } from 'react'

export default class propszi extends Component {
    render() {
        // Because this.props is an object, in order to make the code look more concise, we
        // The data in props can be quickly extracted by deconstruction and assignment
        let {text,num}=this.props
        return (
            <div>
             zizizizizizizziiz---{text}---{num}
            </div>
        )
    }
}

Parent component delivery

import React, { Component } from 'react'

import Pz from "./propszi.jsx"
export default class propsfu extends Component {
    render() {
        let obj={text:"I am the parent component text",num:"I am the parent component num"}
        return (
            <div>
                fuffufufufufuffu
                {/* The use of extension operators for parent component value passing can simplify the process of sending values to parent components
                    The complexity of sub components when transferring data
                */}
                <Pz {...obj} />
            </div>
        )
    }
}

props verification

rccp

be careful:

Since React v15.5, React.PropTypes has been moved to another package. Please use the [prop types library]( prop-types - npm )Replace.

// import React, { Component } from 'react'

// export default class propszi extends Component {
//     render() {
//         //Because this.props is an object, in order to make the code look more concise, we
//         //The data in props can be quickly extracted by deconstruction and assignment
//         let {text,num}=this.props
//         return (
//             <div>
//              zizizizizizizziiz---{text}---{num}
//             </div>
//         )
//     }
// }



import React, { Component } from 'react'
// Bao Yaoyin
import PropTypes from 'prop-types'

export default class propszi extends Component {
    // Use PropTypes to verify props
    static propTypes = {
        text: PropTypes.string,
        num:PropTypes.number
    }

    render() {
        let {text,num}=this.props
        return (
            <div>
                 zizizizizizizziiz---{text}---{num}
            </div>
        )
    }
}

State machine state

Status = = Data

State machine = = = data mechanism

The data is equivalent to the status, and the status change page will also change

Can function components use status codes?

Function components cannot be used by default. You will learn the high-level syntax HOOK later

grammar

State creation

import React, { Component } from 'react'

export default class statedemo extends Component {
    // The creation status needs to be written in the constructor
    // In es6, whether the subclass writes the constructor or not will be supplemented during the instance process
    // But if we do, we must write super ()
    // super is to call the construction method of the parent class. Only when the child class is written can it have its own this  
    // If you only write constructor but not super (), then the point will be wrong when you use this in the future
    constructor(){
        super()

        // Create status
        this.state={
            text:"character string",
            num:18,
            arr:[111,2222,33333],
            obj:{name:"xxixi"}
        }
    }

    render() {
        return (
            <div>
                <h1>Use of status</h1>
            </div>
        )
    }
}

Read status

Use this.state.xxx where you want to use it

import React, { Component } from 'react'

export default class statedemo extends Component {
    // The creation status needs to be written in the constructor
    // In es6, whether the subclass writes the constructor or not will be supplemented during the instance process
    // But if we do, we must write super ()
    // super is to call the construction method of the parent class. Only when the child class is written can it have its own this  
    // If you only write constructor but not super (), then the point will be wrong when you use this in the future
    constructor(){
        super()

        // Create status
        this.state={
            text:"character string",
            num:18,
            arr:[111,2222,33333],
            obj:{name:"xxixi"}
        }
    }

    render() {
        return (
            <div>
                <h1>Use of status</h1>
                {/* Use status */}
                <em>{this.state.num}-----{this.state.text}---{this.state.arr[1]}</em>
            </div>
        )
    }
}

Modify state

To modify state, you can't directly use = to modify it. Instead, you need to call setState() to modify it

import React, { Component } from 'react'

export default class statedemo extends Component {
    // The creation status needs to be written in the constructor
    // In es6, whether the subclass writes the constructor or not will be supplemented during the instance process
    // But if we do, we must write super ()
    // super is to call the construction method of the parent class. Only when the child class is written can it have its own this  
    // If you only write constructor but not super (), then the point will be wrong when you use this in the future
    constructor(){
        super()

        // Create status
        this.state={
            text:"character string",
            num:18,
            arr:[111,2222,33333],
            obj:{name:"xxixi"}
        }
    }

    // Create function
    fun=()=>{
        // You must use setState() to modify state data
        this.setState({
            num:888,
            text:"I've changed"
        })
    }

    render() {
        return (
            <div>
                <h1>Use of status</h1>
                {/* Use status */}
                <em>{this.state.num}-----{this.state.text}---{this.state.arr[1]}</em>
                <button onClick={this.fun}>Click me to modify</button>
            </div>
        )
    }
}

Why use setState() to modify state

Because after calling setState, it will automatically trigger the render method to re render the page, so that the page will also change after the data changes

setState is asynchronous when modifying data

Because setState is asynchronous, its first parameter is an object used to modify data, and the second parameter is a callback function that automatically triggers the callback function after modifying data

 this.setState({
            num:888,
            text:"I've changed"
        },()=>{
                 // I just want to print it in the console after the data is modified
                 console.log(this.state.num);
        })

ref

It is used to identify the elements inside the component, but note that the function component cannot use ref because it has no instance

use

1. String mode (obsolete)

2. Callback function mode

import React, { Component } from 'react'

export default class refdemo extends Component {
    fun=()=>{
        console.log(this.refinput.value);
    }
    render() {
        return (
            <div>
                <h1>ref Method of callback function</h1>
        {/* To bind ref by callback function, you need to mount a function on the dom node  
        The formal parameter of the function is the current dom node (formal parameter) = > {create any variable = formal parameter}*/}

                <input type="text" ref={(demoinput)=>{this.refinput=demoinput}}/>
                <button onClick={this.fun}>Point I get value</button>
            </div>
        )
    }
}

3. React. Createref() added

import React, { Component } from 'react'

export default class refdemob extends Component {
    constructor(){
        super()
        // 1. Create createRef
        this.refdemo=React.createRef()
    }

    fun=()=>{
        // 3. Use
        console.log(this.refdemo.current.value);
    }

    render() {
        return (
            <div>
                <h1>createRef()</h1>
                {/* 2.binding */}
                <input type="text" ref={this.refdemo}/>
                <button onClick={this.fun}>Point I get value</button>
            </div>
        )
    }
}

Tags: Javascript ECMAScript

Posted on Tue, 30 Nov 2021 09:10:19 -0500 by teynon