Front profile

Previous section: juejin.cn/post/686696…

This chapter aims to implement a small function through React. In order to demonstrate the effect, REACT is introduced by CDN first.

Create a project

Please use the CDN method described in the previous section to create a file structure directory as shown in the red box below.

index.css

.red {
    color: red;
}
Copy the code

index.html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="index.css"> </head> <body> <div id="root"> </div> <script SRC = "https://cdn.bootcdn.net/ajax/libs/react/16.9.0/umd/react.development.js" > < / script > < script SRC = "https://cdn.bootcdn.net/ajax/libs/react-dom/16.9.0/umd/react-dom.development.js" > < / script > < script src="index.js"></script> </body> </html>Copy the code

index.js

React // Get the React object const ReactDOM = window.reactdom // Get the element whose ID is root const root = Document. querySelector("#root") // Define an n variable let n = 0 // Use React to create a div object with the class attribute red, the content variable n and a button element, Const App = react. createElement('div', {className: 'red'}, [n, react. createElement('button', {onClick: () => {n += 1}}, '+1')]) reactdom.render (App, root)Copy the code

React elements are created and used in javascript. Take a look at the above js and the comments for each line.

After completing the above steps, we refresh the screen and it should look like this:

According to the writing method in JS, when we click the button in the webpage, the number on the left will increase by 1, right?

But the fact that we click actually has no effect, why is that?

First let’s look at the reactdom.render (App, root) line, this line is to render elements,

It’s only called once, it doesn’t rerender when we click on the button event, so that’s one of the problems,

Now we can re-render the element at click time:

. // Use React to create a div object with the class attribute red, the content variable n, and a button element. Const App = react. createElement('div', {className: {className:}) const App = react. createElement('div', {className:}) 'red'} , [n , React.createElement('button', { onClick: () = > {n + = 1 / / to render ReactDOM. Render (App, root)}}, '+ 1')])...Copy the code

But is that really enough? When we tried it, there was still no reaction. Why is that?

If we look at the assignment of the App element, n is already stored in the App element at the time of execution,

So it doesn’t matter how we change n afterwards, it doesn’t matter what the App element is,

So re-rendering on onclick is fine, it’s already working, but our App element is always 0, so it doesn’t look like it’s working,

So let’s change the App element to a function that will fetch the latest n every time we call it,

React // Get the React object const ReactDOM = window.reactdom // Get the element whose ID is root const root = Document. querySelector("#root") // Define an n variable let n = 0 // Use React to create a div object with the class attribute red, the content variable n and a button element, Const App = () => react.createElement ('div', {className: {className: {className:}); 'red'} , [n , React.createElement('button', { onClick: () => {n += 1 // reactdom.render (App(), root)}}, '+1')])Copy the code

Finally we changed the App to an arrow function, and every time we re-rendered it, the +1 effect came out.

Summary: React requires basic JS knowledge. Unlike VUE, which does automatic rendering and so on, we need to use the basic knowledge of native JS to think about React.

Review the basics of JS

let i 
for (i=0; i<6; i++) {
	setTimeout(()=>{console.log(i)},1000)
}
Copy the code

The result of the above code: six sixes are printed after one second because the function encounters an external variable and reads its latest value.

So setTimeout, setTimeout puts the code that you want to execute into something like a queue, and it tells the browser how many milliseconds later to execute the code logic as soon as possible,

Even if you set setTimeout to 0 milliseconds, it will not execute until the for loop is complete, and the latest value will be 6.

If you print 0,1,2,3.. What about this value?

for (let i=0; i<6; i++) {
	setTimeout(()=>{console.log(i)},1000)
}
Copy the code

Put let inside the for loop. This is a scoped problem. The variable I of the let tag is scoped only inside the {} parentheses.

After that, whenever setTimeout looks for scope I, it finds the I of that time, 0,1,2,3,

Readers can experiment for themselves.

Another way is to use an immediate function:

for(var i=0; i<6; i++) { ! function(j) { setTimeout(console.log(j),1000) }(i) }Copy the code

The function executes immediately, passing I to the parameter j in the method, and j holds the value of I at that time, so when it finally outputs, it will also be the value at that time.

So, the basic thing to map is, since functions can get the latest values of external variables, So in index.js above, when we render elements,

Let’s make App a function, and every time WE call this function, we get the latest value of n, so that’s exactly what we want,

To summarize, a function is analogous to code that executes lazily, executing its internal logic only when you call it.

Final summary

To summarize what we learned about React here

  1. The React elements

    Element can represent a div

    1.2 Element is not really a DIV (DOM object)

    1.3 We generally call Element a virtual DOM object

  2. () = > elements React

    Function that returns element, which can also represent a div

    2.2 This function can be executed multiple times to get the latest virtual div each time

    2.3 React compares two virtual divs and updates the view locally to find the difference. This is a technique called DOM Diff algorithm, which means that every time we click the button to call render again, only the value of the n element will be updated. The button will not be re-rendered because it is unchanged.

Next section: juejin.cn/post/686702…