The usage and understanding of JSX in React

Features of React

React is an efficient and flexible JavaScript library for building user interfaces, using componentized mode and declarative coding; using DOM+diff algorithm to minimize interaction with DOM.

Related js library

1. react.js: React core library.
2. react-dom.js: Provides a react extension library for manipulating the DOM.
3. babel.min.js: A library that parses JSX syntax code into JS code.

Virtual DOM

1. The essence is an object of type Object (ordinary object)
. 2. The virtual DOM is relatively "light", while the real DOM is relatively "heavy", because the virtual DOM is used internally by React, and there is no need for so many properties on the real DOM.
3. The virtual DOM will eventually be transformed into a real DOM by React and presented on the page.

JSX(JavaScript XML)

JSX is a JS extension syntax similar to XML defined by React: JS + XML is essentially React.createElement(component, props, ...children)a syntactic sugar for methods.

Function: Used to simplify the creation of virtual DOM
writing: var ele = <h1>Hello JSX!</h1>
Note: it is not a string, nor is it an HTML/XML tag, and what it ultimately produces is a JS object

The role of babel.js:
browsers cannot directly parse JSX code, and need to be translated into pure JS code by babel to run; as long as JSX is used, type="text/babel" must be added, and the declaration needs babel to process

1. When defining virtual DOM, do not write quotation marks.
2. Use {} when mixing JS expressions in tags.
3. The class name of the style specifies not to use class, but to use className. Because class is a reserved/keyword for class definition in ES6.
4. Inline styles should be written in the form of style={ {key:value}}, style={ {display:"none"}}remember to add quotation marks.
5. There is only one root tag
6. The tag must be closed
7. The first letter of the tag
(1). If it starts with a lowercase letter, the tag will be converted to an element with the same name in html. If there is no element with the same name corresponding to the tag in html, an error will be reported.
(2). If it starts with a capital letter, react will render the corresponding component. If the component is not defined, an error will be reported.

Create virtual DOM using jsx

<div id="test"></div>

<script type="text/babel" > /* 此处一定要写babel而非javascript */
	//1.创建虚拟DOM
	const VDOM1 = (  /* 此处一定不要写引号，因为不是字符串 */
		<h1 id="title">
			<span>Hello,React</span>
		</h1>
	)
	const VDOM2 = <h2> Hello, Zaggie </h2>
	//2.渲染虚拟DOM到页面，不是追加，而是替换，所以只会显示VDOM2
	ReactDOM.render(VDOM1,document.getElementById('test'))
	ReactDOM.render(VDOM2,document.getElementById('test'))
</script>

<div id="test"></div>

<script type="text/babel" >
	const data = ['Angular','React','Vue']
	//1.创建虚拟DOM
	const VDOM = (
		<div>
			<h1>前端js框架列表</h1>
			<ul>
				{
    
    
					data.map((item,index)=>{
    
    
						return <li key={
    
    index}>{
    
    item}</li>
					})
				}
			</ul>
		</div>
	)
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

Create virtual DOM using js

<div id="test"></div>

<script type="text/javascript" > 
	//1.创建虚拟DOM
	const VDOM = React.createElement('h1',{
    
    id:'title'},React.createElement('span',{
    
    },'Hello, Zaggie'))
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

Distinguish between js statement (code) and js expression

1. Expression: An expression will produce a value, which can be placed anywhere a value is required.
The following are expressions:
(1). a
(2). a+b
(3). demo(1)
( 4). arr. map()
(5). function test () {}

2. Statement (code):
The following are statements (code):
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}

kind

1. It is not necessary to write the constructor in the class. It is necessary to perform some initialization operations on the instance, such as adding specified attributes.
2. If class A inherits class B, and a constructor is written in class A, then super in the constructor of class A must be called.
3. The methods defined in the class are placed on the prototype object of the class for use by the instance.

//创建一个Person类
class Person {
    
    
	//构造器方法
	constructor(name,age){
    
    
		//构造器中的this是谁？—— 类的实例对象
		this.name = name
		this.age = age
	}
	//一般方法
	speak(){
    
    
		//speak方法放在了哪里？——类的原型对象上，供实例使用
		//通过Person实例调用speak时，speak中的this就是Person实例
		console.log(`我叫${
      
      this.name}，我年龄是${
      
      this.age}`);
	}
}

//创建一个Student类，继承于Person类
class Student extends Person {
    
    
	constructor(name,age,grade){
    
    
		super(name,age)
		this.grade = grade
		this.school = '尚硅谷'
	}
	//重写从父类继承过来的方法
	speak(){
    
    
		console.log(`我叫${
      
      this.name}，我年龄是${
      
      this.age},我读的是${
      
      this.grade}年级`);
		this.study()
	}
	study(){
    
    
		//study方法放在了哪里？——类的原型对象上，供实例使用
		//通过Student实例调用study时，study中的this就是Student实例
		console.log('我很努力的学习');
	}
}
class Car {
    
    
	constructor(name,price){
    
    
		this.name = name
		this.price = price
		// this.wheel = 4
	}
	//类中可以直接写赋值语句,如下代码的含义是：给Car的实例对象添加一个属性，名为a，值为1
	a = 1
	wheel = 4
	static demo = 100// 给类自身加属性方式1：写在类内部
}
// Car.demo = 100给类自身加属性方式2：写在类外部
const c1 = new Car('奔驰c63',199)
console.log(c1);
console.log(Car.demo);

event handling

1. Specify the event processing function through the onXxx attribute (note the capitalization), and the return value should be a function.

handleMouse = (flag)=>{
    
    
   return ()=>{
    
    
     console.log(flag);
   }
 }
 render() {
    
    
   return (
     <li onMouseEnter={
    
    this.handleMouse(true)} onMouseLeave={
    
    this.handleMouse(false)}></li>
   )
 }

React uses custom (synthetic) events instead of native DOM events—for better compatibility; events in React are handled through event delegation (delegating to the outermost element of the component)—— For the efficiency.
2. Get the DOM element object where the event occurred through event.target - don't overuse ref.

Higher-order functions and currying of functions

Higher-order function: If a function meets any of the following two specifications, then the function is a higher-order function.
1. If the parameter received by function A is a function, then A can be called a high-order function.
2. If the return value of function A is still a function, then A can be called a high-order function.
Common high-order functions are: Promise, setTimeout, arr.map(), etc.

Currying of functions: The method of function calling continues to return functions to realize the function encoding form that receives parameters multiple times and finally processes them uniformly.

function sum(a){
    
    
	return(b)=>{
    
    
		return (c)=>{
    
    
			return a+b+c
		}
	}
}