1. React

  1. Declarative programming

    • Declarative programming is the current model for the entire big front-end development: Vue, React, Flutter, SwiftUI
    • It allows us to maintain only our own state. When the state changes, React renders our UI based on the latest state

  2. Componentized development

    • Component-based development pages The current trend in the front end is to break down complex interfaces into smaller components

  1. Multi-platform adaptation

2. JSX

  1. [JSX] can be seen as an extension of [JS] syntax, it is neither [string, nor an HTML], it contains all the functionality of a JS, when the browser parse, encountered [<>], will be as HTML code to compile, when [JSX] DOM creation, must have the root element wrapped
function App() {
	return (
  	<div>I am content</div>)}export default App
Copy the code

2.1 Write JavaSscipt code in JSX

  1. By wrapping JavaScript code inside the [JSX] syntax in the way of [{}], the browser will encounter [{}], as JavaScript code, and compile
【 1.Dynamically displaying data and adding commentsfunction App() {
  const name = 'JSX grammar'
  return (
  	<div>{name} {/* Annotation content */}</div>)}export defaultThe App"2.JSX allows you to use template stringsconst name = 'Template string'
function App() {
  return (
  	<div> {`${name}`} </div>)}export defaultThe App"3.You can call function methods or built-in methods.const hello = () = > {
  	console.log('hello')}function App() {
  return (
  	<div>{hello()} // Call method {math.random ()} // Call system method {console.log('JSX')}</div>)}export defaultApp [PS: when calling a method, not only the custom method can be called, but also the built-in method of the system can be used] [4.In JSX, only ternary expressions can be usedifStatement 】const isShow = true
function App() {
	return (
  	<div>{ isShow ? 'JSX' : 'react'  }</div>)}export defaultThe App"5.JSX syntax is itself a statement that can be assigned to variables, used as arguments to functions, etc.]const dvs = <p>Can be assigned to variables</p>
function App() {
  return (
  	<div>
      { dvs }
    </div>)} 【6.Add attributes to elementsfunction App() {
	return (
  	<div class={ age} ></div>)}export defaultApp [PS: When adding attributes to elements, there are generally two situations, one is to add ordinary class name, the other is to assign attributes to [{variable}]].Copy the code

2.2 JSX event

  1. event
【 1.Event binding, event camel nomenclature ={event handler name} 】const handle =() = > {
	console.log('Events in JSX')}function App() {
	return (
  	<div>
    	<button onClick={handle}>Normal event binding</button>// Normal writing does not need to add [(), if the parentheses are immediately executed]<button onClick={()= >{handle()}}> Arrow function binding</button>// Bind events via arrow functions</div>)}export defaultThe App"2.Bind Binds events, commonly used by class components, to change the eventsthisThe point to 】import React,{Component} from 'react'
class Heaber extends Component{
	constructor () {
    super(a);this.state = { // Initialization state
        const: 0
    }
    this.handoler = this.handoler.bind(this) // Change this operation (method 1)
	}
  render() {
    return (
    	<div>
      	<button onClick={this.innerText.bind(this)}>bind</button>
      </div>
    )
  }
  innerText () {
  	this.setState({
    	const+ +})}}Copy the code
  1. Event pass arguments
【 1.Arrow function method parameter passing 】const handle =(a,b) = > {
	console.log(a,b)
}
function App() {
	return (
  	<div>
 			<button onClick={()= >{handle(1,2)}} > arrow function parameters</button>   	
    </div>)}export defaultThe App"2.Bind to pass parametersconst handole = (a,b) = > {
	console.log(a,b)
}
function App() {
	return (
  	<div>
    	<button onClick={handole. Bind (null, 1, 2)}>Bind the miserable</button>// Parameter passing starts with the second parameter</div>)}Copy the code
  1. How to get event objects
【 1.How do normal event calls get event objects?const handole =(ev) = >{a normal function, which does not need to be passed in event binding, accepts an event object by default.console.log(ev)				
}
function App() {
	return (
  	<div>
    	<button onClick={handole}>Ordinary events</button>
    </div>)} 【2.Pass event objects by arrow functionconst handole =(ev) = >{case 1 】console.log(ev)
}
const handole =(a,b,ev) = >{case 2: If not only the event object is passed, the default event object is received last.}console.log(a,b,ev)
}
function App () {
	return (
  	<div>
    	<button onClock={(ev)= >{handole(ev)}}> Arrow function</button>
    </div>)} 【3.How is the bind method passed?const handole = (a,b,ev) = >{if bind does not pass an event object when passing an argument, it receives an event object by default, after other arguments.}console.log(a,b,ev)
}
function App() {
	return (
  	<button onClock=} {handole. Bind (null, 100200)>bind</button>)}Copy the code

2.3 This problem with methods in class components

【 example: 】import React,{Component} from 'react'

class App extends Component{
	constructor () {
    super(a);this.state = { // Initialization state
        content: 0}}render() {
    return (
    	<div>
      	<button onClick={this.innerText}>bind</button>
      </div>
    )
  }
  innerText () {
  	console.log(this.state.content) / / undefined state.}} * When the event is raised, the method is called, but the print isundefinedState, meaningundefinedThere's no state property here, so the problem is with the binding event.1.Solution 1: When an element is bound to an event, use bindthisChange 】render() {
  return (
  	<div>
    	<button onClick={this.innerText.bind(this)}>bind</button>
    </div>)} 【2.Solution 2: Pair in the constructor of the class componentthisMake changes to the binding ofconstructor () {
   super(a);this.state = { // Initialization state
       content: 0
   }
   this.handoler = this.handoler.bind(this) // Change the this pointer to the event
}
【 3.Solution three: in writing the event program using the arrow function way, because the arrow function is notthisThe default is to look outsidethis】 the innerText =() = > {
	console.log(this. State. The content)} 【4.Solution 4: Use arrow function when binding.render() {
  return (
  	<div>
    	<button onClick={()= > {this.innerText()}}>bind</button>
    </div>)}Copy the code

3. Traverse the data

  1. In React, the advanced method Map is used for data loop traversal. During data loop traversal, a key value is added to each item to improve rendering performance
const arr = [
  {
  	id: 1.name: 'jsx'
  },
  {
  	id: 2.name: 'map'}]function App() {
	return (
  	<div>
    	<ul>
        {
        	arr.map(item => {
          	return (
            	<li key={item.id}>{item.name}</li>)})}</ul>
    </div>)}export default App
Copy the code

3.1 The back end returns data, and the front end intercepts data

  1. In some development, the front end sends requests to the back end, request data, the back end returns more data, but the front end page needs only a few, at this time, we want to intercept the data returned by the back end, only intercept the number of needed from front to back to intercept
Arr. Slice ()0.9).map(item= > { // Intercepts the data before looping through the array, and then returns the new array to iterate over
	return (
  	<li key={item.id}>{item.name}</li>)})Copy the code

3.2 Data Filtering

Arr. Filter (item= > {
	returnThe code block}). The map (item= > { // Filter the data before looping through the array, then return the new array and iterate over it
	return (
  	<li key={item.id}>{item.name}</li>)})Copy the code

4. Style handling

  1. React uses [className] instead of class to dynamically bind classes.

4.1 Inline styles

【 1.In-line styleconst style = { // The second method is separated by a comma
	width: 100.height: 100
}
function App () {
	return (
  	<div>
    	<button style={{ width:'100px' }}>Methods a</button>【 e.g. Background-color == must be humped 】<button style={ style} >Way 2</button>
      <button style={[ style.style]} >Methods three</button>You can use a ternary expression to determine which class is valid.</div>)} 【2.NPM install --save-dev radium install -- dev radiumimport Radium from 'rudium'
const styles = {
  backgroundColor: 'green'.":hover": {
    backgroundColor: ` ` RGB (0, 1)}}function App() {
	return () {
    <button style={ styles } ></button>}}export defaultRadium (App) 【3.Media query index.js entry fileimport { StyleRoot } from 'radium'
ReactDOM.render(
  <React.StrictMode>// The component needs to be wrapped with the change label so that the set media query can be used<StyleRoot> <App /></StyleRoot>
        
  </React.StrictMode>.document.getElementById('root'));Copy the code

4.2 Outreach Style

* Global outbound style [import, entry file, app.js]import './app.css'[Internal use of components]function App() {
  return (
      <div className={ 'box' }></div>)}export defaultWhen using a single component external style and naming a stylesheet, there are usually two forms. The first is the same as the name of the component.'a component.module.css'
import style from 'Style path'

function App() {
	return (
    <div className={ style.A class name} ></div>)}export default App
Copy the code

5. Operations on attributes of elements

【 1.Img > SRC attribute] * in some cases, the front-end to back-end request data, request some image data, in this time, the back-end to the front-end to return to a picture of a very large According to front page, the size of the area to adjust the picture, this adjustment, the performance is not very good, when the browser loads, load is a great figure, Instead of using CSS to set the image * create a method to handle the size of the image. In general, during development, it is common to deal with the image file exclusivelyfunction getImgUrl( imgUrl,size ) {
    	return imgUrl + `? param=${size} + ${size}` // Process the larger image
    }

		function App() {
    	return (
      	<div>
        	<img src={getImgUrl(image address, image size to set)}/>
        </div>)} 【2.Element >classAttributes [3].a > href【 4. Element >styleAttributes 【 5.label > forProperties 】Copy the code

6. The nature of JSX (source code needs to be added)

  1. Just the nature of JSX 】 【 【 React. The createElement method (component, props,… children) 】 the syntactic sugar
  2. All JSX will eventually be converted via Babel to react. createElement function calls

7. Virtual DOM creation process (need to supplement source code)

  1. JSX converts to the react.createElement () function, which creates a ReactElement object

  2. React uses the ReactElement object to form a JavaScript object tree.

  3. The resulting JavaScript tree is the virtual DOM.

  4. 【ReactElement

  1. React converts the virtual DOM to the real DOM. Reactdom.render () maps the virtual DOM to the real DOM.