Vue vs. React
- Vue is MVVM, React is MVC
- The view layer in Vue is realized based on template, and the template compiler is realized based on vue-template-compiler. “The template syntax is virtual DOM- > VNode, and after dom-diff processing, the real DOM programming”
- In React, the view layer is built based on JSX, and the virtual DOM is generated based on the Babel-React-app module, and finally becomes the real DOM after DOM-diff comparison
What is JSX
JSX: javascript and XML “HTML”
- JS expression
- variable
- Unary expression
- Ternary operator
- A map in a loop is also a JS expression
2.1. If you want to embed a JS expression “after processing the result, it is called an expression”, directly based on {}
2.1, null and undefined represent empty elements in JSX. If null and undefined are written in {}, the page will not display the content
import React from 'react';
import ReactDOM from 'react-dom';
// JS expression
let title = 'Look at that preschooler hanging himself.',
flag = true;
ReactDOM.render(
<div>
<h2>{title}</h2>
{flag ? <span>study hard</span> : null}
<ul>
<li>{undefined}</li>
<li>{null}</li>
</ul>
</div>.document.getElementById('root'));Copy the codeThe diagram below:
2.3. If an array is nested, it places each item in the array as an element in the view
2.4, loop bound elements, need to set a unique KEY value, otherwise the console will display an error “only need to be unique in the current loop”
import React from 'react';
import ReactDOM from 'react-dom';
// JS expression
let title = 'Look at that preschooler hanging himself.',
flag = true,
data = [{
id: "001".title: 'apple'.price: '4599'
}, {
id: "002".title: 'millet 20'.price: '3999'
}, {
id: "003".title: 'huawei 50'.price: '6999'},]; ReactDOM.render(<div>
<h2>{title}</h2>
{flag ? <span>study hard</span> : null}
<ul>
{data.map((item) => {
return <li key={item.id}>
{item.title + ':' + item.price}
</li>
})}
</ul>
</div>.document.getElementById('root'));Copy the code
2.5. Event binding is implemented based on onClick={‘ function ‘}
React event binding is implemented based on onClick={‘ function ‘}, using details similar to native JS
Click event Bind one
- Events in Reac are composite events
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<div>
<button onClick={ev= >{ console.log(ev); console.log(this); //undefined}}> < span style = "box-sizing: border-box! Important</button>
</div>.document.getElementById('root'));Copy the code
Click event Bind two
Note: bind a method to the current event behavior of an element. When the event behavior is triggered and the method executes, the default first argument is the event object
The prototype Function has three methods, call, apply, and bind, all of which change the direction of this
- Call and apply execute the function as soon as this is referred to
- Bind changes the this pointer beforehand and passes some values beforehand, but the function is not executed immediately
import React from 'react';
import ReactDOM from 'react-dom';
const fn = function fn(x, y, ev) {
console.log(x, y, ev);
}
ReactDOM.render(
<div>
<button onClick={fn.bind(null, 10.20)} >I'll try it on you, kid</button>
</div>.document.getElementById('root'));Copy the code
JSX Fragment tag
<> : This tag is the Fragment tag in JSX
- Ensure that there is only one root node, but it does not deepen the HTML hierarchy
import React from 'react';
import ReactDOM from 'react-dom';
let title = 'My favorite fruits are',
data = [{
id: 1.title: 'apple 🍎'
}, {
id: 2.title: 'watermelon 🍉'
}, {
id: 3.title: 'Kiwi 🥝'
},]
ReactDOM.render(
<div>
<h2>{title}</h2>
<ul>
{data.map(item => {
return <li key={item.id}>{item.title}</li>
})}
</ul>
</div>.document.getElementById('root'));Copy the code
To avoid deep nesting of the HTML hierarchy, we need to use the Fragment tag in JSX to handle it
4. Set CSS styles
4.1. External chain style
- Write it in line form “Not recommended, not easy to maintain”
- Create a new index.less file in SRC and write the style, then import the style in index. JSX
Create an external style file
Import an external style file
Add style classes: Note that use className, not class
4.2 Inline style
To set inline styles based on style, the style value must be an object or a syntax error will be reported
import React from 'react';
import ReactDOM from 'react-dom';
import './index.less'
let title = 'My favorite fruits are',
data = [{
id: 1.title: 'apple 🍎'
}, {
id: 2.title: 'watermelon 🍉'
}]
const styleObj = {
backgroundColor: 'darkcyan'
}
ReactDOM.render(
<>
<h2 style={{ backgroundColor: 'pink' }}>{title}</h2>
<ul style={styleObj}>
{data.map(item => {
return <li key={item.id}>{item.title}</li>
})}
</ul>
</>.document.getElementById('root'));Copy the code
Do not insert normal objects directly in curly braces.
{} cannot be inserted directly into a normal object, which would be a syntax error, but you can insert an array inside curly braces, which will place each item in the array as an element in the view
import React from 'react';
import ReactDOM from 'react-dom';
import './index.less'
let person = {
name: 'kele'.age: 1
}
ReactDOM.render(
<>
{person}
</>.document.getElementById('root'));Copy the code
You can embed JSX element objects in parentheses
import React from 'react';
import ReactDOM from 'react-dom';
import './index.less'
// let person = {
// name: 'kele',
// age: 1
// }
ReactDOM.render(
<>{/* {person}} {react. createElement('h1', null, 'night ')}</>.document.getElementById('root'));Copy the codeRequirement: There is a variable n=? To figure out what n is, we’ll render the next h tags in the page
- Vue spelled
<template>
<h1 v-if="n===1">content</h1>
<h2 v-else-if="n===2">content</h2>
<h3 v-else-if="n===3">content</h>
</template>
Copy the code- The React of writing
import React from 'react';
import ReactDOM from 'react-dom';
import './index.less'
const content = 'Cousin HERE I come 😯'
let n = 3;
ReactDOM.render(
<>
{React.createElement('h' + n, { className: 'title' }, content)}
</>.document.getElementById('root'));Copy the code