Shulou(Shulou.com)06/03 Report--

This article mainly explains "what is the principle of React". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "what is the principle of React"?

Catalogue

1.setState () description

1.1 Update data

1.2 recommended syntax

1.3 second parameter

The Transformation process of 2.JSX Grammar

3. Component update mechanism

4. Component performance optimization

4.1 reduce state

4.2 avoid unnecessary re-rendering

1.setState () description 1.1 Update data

SetState () updates data asynchronously

You can call setState () multiple times, triggering re-rendering only once.

Import React from 'react'import ReactDOM from' react-dom'class Opp extends React.Component {state = {count: 1,} handleClick = () = > {/ / asynchronously update data this.setState ({count: this.state.count + 1) }) this.setState ({count: this.state.count + 1) }) console.log (this.state.count) / / 1} render () {return (counter: {this.state.count} + 1) )}} ReactDOM.render ( Document.getElementById ('root')) 1.2 recommended syntax

Use the setState ((state,props) = > {}) syntax

State: the latest state, and props: the latest props

Import React from 'react'import ReactDOM from' react-dom'class Opp extends React.Component {state = {count: 1,} handleClick = () = > {/ * / / asynchronously update data this.setState ({count: this.state.count + 1) }) console.log (this.state.count) / / 1 this.setState ({count: this.state.count + 1,}) console.log (this.state.count) / / 1 * / recommended syntax this.setState ((state) Props) = > {return {count: state.count + 1,}}) this.setState ((state, props) = > {console.log ('second call:' State) / / 2 return {count: state.count + 1 }}) console.log (this.state.count) / / 3} render () {return (counter: {this.state.count} + 1)}} ReactDOM.render ( Document.getElementById ('root')) 1.3 second parameter

Perform an action immediately after the status update (the page has finished re-rendering)

Syntax: setState (updater [, callback])

Callback means that callback functions can be added or not added.

Import React from 'react'import ReactDOM from' react-dom'class Opp extends React.Component {state = {count: 1,} handleClick = () = > {this.setState ((state, props) = > {return {count: state.count + 1 }}, / / after status update and re-rendering Execute immediately () = > {console.log ('status update complete:' This.state.count) / / 2 console.log (document.getElementById ('title') .innerText) / / counter: 2 document.title =' updated count is:'+ this.state.count}) console.log (this.state .count) / / 1} render () {return (counter: {this.state.count} + 1)} ReactDOM.render ( The transformation process of document.getElementById ('root') 2.JSX grammar

JSX is simply the syntax sugar of the createElement () method (simplified syntax)

The JSX syntax is compiled into the createElement () method by the @ babel/preset-react plug-in

React element: an object that describes what you want to see on the screen

The conversion process of import React from 'react'import ReactDOM from' react-dom'// JSX syntax / / const element = Hello JSXconst element = React.createElement ('H2, {className: 'greeting',},' Hello JSX') console.log (element) ReactDOM.render (element, document.getElementById ('root')) 3. Component update mechanism

There are two functions of setState (): 1. Modify state 2. Update component (UI)

Pass: the parent component re-renders yes, the child components are also re-rendered, but only the current component subtree (the current component and all its child components) is rendered

4. Component performance optimization 4.1 reduces state

Reduce state: only store data related to component rendering (e.g. count / list data / loading, etc.)

Note: books that do not need to be rendered should not be put in state (such as timer id, etc.)

Data that needs to be used in multiple methods should be placed in this

4.2 avoid unnecessary re-rendering

Component update mechanism: parent component updates cause child components to be updated as well

Problem: when the subcomponents do not change, they will also be re-rendered, resulting in unnecessary re-rendering

Solution: use the hook function shouldComponentUpdate (nextProps,nextState)

Function: determine whether the component is re-rendered by the return value. Return true means re-render, and false means not re-render.

Trigger time: hook function in update phase, executed before component re-rendering (shouldComponentUpdate-> render)

Import React from 'react'import ReactDOM from' react-dom'class Opp extends React.Component {state = {count: 0,} handleClick = () = > {this.setState ((state) = > {return {count: this.state.count + 1 }})} / / Hook function shouldComponentUpdate (nextProps, nextState) {/ / returns false to prevent the component from re-rendering / / return false / / the latest status console.log ('latest state' NextState) / / status before update console.log (this.state) / / returns true Component re-render return true} render () {console.log ('component updated') return (counter: {this.state.count} + 1 )}} ReactDOM.render ( Document.getElementById ('root'))

Case: random number

Through nextState

Import React from 'react'import ReactDOM from' react-dom'// generates random numbers class Opp extends React.Component {state = {number: 0,} handleClick = () = > {this.setState ((state) = > {return {number: Math.floor (Math.random () * 3)) })} / / the random numbers generated twice may be the same There is no need to re-render shouldComponentUpdate (nextState) {console.log ('latest status:', nextState, 'current status:', this.state) return nextState.number! = this.state.number / * if (nextState.number! = = this.state.number) {return true} return false*/} render () {console.log ('render') return (random number: {this.state .number} regenerate)}} ReactDOM.render ( Document.getElementById ('root'))

Through nextState

Import React from 'react'import ReactDOM from' react-dom'// generates random numbers class Opp extends React.Component {state = {number: 0,} handleClick = () = > {this.setState ((state) = > {return {number: Math.floor (Math.random () * 3)) }})} render () {return (rebuild) }} class NumberBox extends React.Component {shouldComponentUpdate (nextProps) {console.log ('latest props:' NextProps, 'current props:', this.props) return nextProps.number! = = this.props.number} render () {console.log (' subcomponent render') return random number: {this.props.number}} ReactDOM.render (, document.getElementById ('root')) so far I believe that everyone has a deeper understanding of "what is the React principle", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.