React defines the use of components and state s

1. Features of React

  • Component mode and declarative encoding are used to improve development efficiency and component reuse rate.
  • Mobile development using React syntax in React Native
  • Use virtual DOM+excellent Diffing algorithm to minimize operation with real DOM

2. Why does React use JSX instead of JS?

  • JSX creates a virtual DOM by
    const VDOM = <h1>Hello,React</h1>
    // The browser page will show Hello,React
  • JS creates a virtual DOM by
   // This method is to create a virtual DOM page using React's JS method and also display Hello,React
    const VDOM = React.createElement('h1',{id:'test'},'Hello,React')
  • So what are the advantages of using JSX to create a virtual DOM compared to JS?
  • There seems to be no difference between the two and there is an additional babel compilation process in using JSX
    Following:
  • Creating a virtual DOM using JSX
    // If the virtual DOM you need to create is such that it has one more layer of span nested
    const VDOM = (
        <h1>
            <span>Hello,React</span>
        </h1>
    )
  • Create virtual DOM using JS
   // Since the third parameter can only be the content body, you need to recreate the VDOM using React
    const VDOM = React.createElement('h1',{id:'test'},
                    React.createElement('span',{},'Hello,React'))
  • Conclusion Analysis: If there are many levels of DOM, it would be a hassle to call React.createElement many times to write like this. So JSX is better. And JSX compiles through babel and becomes the JS writing style below. In other words, the JSX way is the syntax sugar of the JS way.

3. What is the difference between a virtual DOM and a real DOM?

  • What is the virtual DOM first?
  • By printing out the virtual DOM, you can see that the virtual DOM is an object of type Object.
  • Real DOM is also an object with many attributes mounted on it Fewer attributes mounted on virtual DOM because virtual DOM is used internally by React without many attributes
  • A virtual DOM is eventually rendered on the page by React converting it to a real DOM

4. Syntax rules for JSX

1. Do not quote when defining a virtual DOM
2 Use {} when mixing JS expressions in Tags
3-style class name specifies not to use class to use className
4 Inline styles are written as style={{key:value}}
5Virtual DOM must have only one root tag
6 Labels must be closed
7 initials of labels
7.1 If a lowercase letter begins, convert the label to an element of the same name in html. Error occurs if HTML does not have an element of the same name
7.2 Uppercase react renders the corresponding component. Error if component is undefined

5.React defines components in two ways

5.1 Functional Components

    // 1. Create Function Components
    function MyComponent() {
        console.log(this)  // Undefined this should normally be window Why undefined here
                            <!--because babel Compilation is done in strict mode this yes undefined-->
        return <h1>Creating functional components</h1>
    } 
    <!--The developer did not call the function, so who called it to execute it? React To call executed.-->
    <!--Render Component to Page-->
     ReactDOM.render(<MyComponent />,document.getElementById('test'));
    

5.2 Class Components

    // 1. Create Class Components
    class MyComponent extends React.Component {
        render() {
            <!--render The function is React.Component Functions on Prototype -->
            
            console.log(this)
            return <h2>Components of Class Definition(Definitions applicable to Complex Components)</h2>
        }
    }
    // 2.Render Component to Page
    ReactDOM.render(<MyComponent />,document.getElementById("test"))

5.2.1 SOME PROBLEMS ABOUT CLASSIFICATION FUNCTIONS

1.Where is the render function located?
  • The React function is placed on the prototype of MyComponent for instance use
2. What is this in render?
  • this in render is an instance object of MyComponent
3. What happened after Render.render was executed?
  • React found the Component label found the Component component Component
  • Found that the component is class defined, and then new out an instance of the class calls the render method on the prototype using the instance
  • Turn the virtual DOM returned by render into a real DOM and render it on the page**

6. Three properties in React

6.1 state property in React

  • state is a property on a component instance, so it can only be in a class component.
Class Weather extends React.Component {
    constructor(props) {
        super(props)
        this.state = {"isHot":true}
    }
    render() {
         const {isHot} = this.state
         return <h1 onClick={demo}>The weather is very good today{isHot?'Scorching hot':'Pleasantly cool'}</h1>
    }
    function demo() {
        alert('AAA')
    }
}

Notes on the state function in 6.1.1 React

Why write a constructor?Why didn't we need some constructors before? Why do we need to write constructors when we talk about state now?

  • Because the constructor can initialize component instances, there were no previous scenarios where component initialization was required.

So what do we need to do when the component is initialized?

  • Because we need a state to record the state information. But the state starts with null. We can assign the values we want when initializing in the constructor

Writing differences when Binding click events

  • The native binding click event is that onclick is the onClick binding other events in React as well

Difference between parenthesized and unbound when Binding click events

  • If onClick={demo} assigns the body of the demo function to the click event

  • If onClick={demo()} assigns the return value after the demo() function is executed to the click event

7.this for methods in classes

    class Weather extends React.Component {
        constructor(props) {
            super(props);
            this.state = {isHot: true}
        }
         render() {
            const {isHot} = this.state
            return <h1 onClick={this.demo}>The weather is very good today{isHot?'Scorching hot':'Pleasantly cool'}</h1>
        }
    }
    demo() {
        const {isHot} = this.state
    }
  • None of the demos in this way are on this in the component's internal demo. There is no inconsistency between this in the state demo and this in the component

So what about moving demo into the component?

    class Weather extends React.Component {
        constructor(props) {
            super(props);
            this.state = {isHot: true}
        }
         render() {
            const {isHot} = this.state
            return <h1 onClick={this.demo}>The weather is very good today{isHot?'Scorching hot':'Pleasantly cool'}</h1>
        }
        demo() {
            const {isHot} = this.state
        }
    }

Then I made a mistake. Why?

  • onClick receives the function body of the demo function, demo is a function in the class. Function execution is not called by an instance, but is called directly by window. Functions in the class open strict mode by default. Functions that open strict mode do not point to window. That is undefined. So an error will be reported.

8. Use of setState

  • this.state = false;The data can be updated in time, but the view will not be updated
  • Note that the update status must use setState for the view to update as the data is updated
this.setState({
    isHot: !isHot
})

8.1 Is the status of setState updated or merged?

Update. Not a replacement

8.2 How many times will the constructor invoke the process of continuously updating views due to data updates?

  • Once. Component is called once because it is only new once

How many times does 8.3 render call?

  • 1+n times
  • 1 is the initialization time, n is the number of status updates

Tags: React

Posted on Tue, 14 Sep 2021 14:07:11 -0400 by rrn