Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

ReactJS profile

  • React grew out of an internal project at Facebook, where the company was unhappy with all the JavaScript MVC frameworks on the market and decided to write one for Instagram. After it was built, it was found to be very useful and opened source in May 2013.
  • React focuses only on the view layer. React is officially described as a JavaScript library for building the user interface
  • One of the most popular door frames. A lightweight front-end framework (actually Vue is a kind of front-end framework) that supports JSX (JavaScript XML) syntax, which is a set of XML syntax defined in JS and eventually parsed into JS. In JSX you can mix HTML with JS; Also using virtual DOM, efficient.

React vs. Vue.js

Virtual Dom

  • The virtual DOM of Vue is modified based on the SNabbDOM library. In order to ensure the minimum optimization of the page, SNabbDOM introduces the DIff algorithm to find out the differences between the two virtual DOM through the DIFF algorithm, and only update the changed DOM node, instead of re-rendering it as the changed DOM node.
  • React defines an XML-like JS extension syntax: JSX. The React virtual DOM is created.

Componentization aspect

  1. Modularization: from the point of view of the code, to analyze the problem, the business logic when we program, divided into different modules for development, so as to facilitate the reuse of the code;
  2. Modular: From the perspective of the UI, to analyze problems, put a page, broken down into several unrelated groups, with the development of our project, we hand components will be more and more, in the end, if we want to implement a page, may directly get existing components for stitching, can quickly get a complete page, so convenient the reuse of the UI elements; A component is a collection of elements;
  3. How Vue is componentized:.vue component template files. Browsers do not recognize such.vue files, so.vue is pre-compiled into real components before running.
  • Template: UI structure
  • Script: Business logic and data
  • Style: UI style

When implementing componentization in React, there is no.vue template at all. Instead, you use JAVASCRIPT code to create any component you want.

  • React components are defined directly in js files;
  • The React component does not split a component into three parts (structure, style, and business logic). Instead, it uses JS to implement a component. (In other words: structure, style and business logic are written together in JS)

Mobile APP Development

  • Vue, combined with Weex technology, provides the experience of migrating to mobile App development
  • React, combined with ReactNative, provides the development experience of migrating to mobile apps (RN is the most popular and popular one).

lightweight

Both keep their focus on the core library, leaving other functions such as routing and global state management to the relevant libraries. (Vue-Router, vuex, React-Router, Redux, etc.)

React has several core concepts

Virtual DOM (Virtual Document Object Model)

  • What is the nature of DOM: Document Object Model page element JS representation of UI interface elements

  • Differences between DOM and virtual DOM:

    • DOM is provided by javascript in the browser, so we have to artificially manipulate DOM objects using fixed apis provided by the browser;
    • Virtual DOM: not provided by the browser, but implemented manually by our programmers, similar to the DOM in the browser, but with essential differences;

  • Why implement the virtual DOM:

    • JavaScript requires the DOM interface provided by the browser to manipulate the real DOM, and modifying the DOM often results in page redrawing, so in general, the more DOM manipulation, the worse the performance of the page
    • In the real DOM, too much content modification will lead to multiple page redraws, which will greatly degrade page performance.
    • With the virtual DOM, however, no matter how much content is changed at a time, the page is redrawn only once, greatly improving the performance of the page.
    • The core of virtual DOM design is to use efficient JS operations to reduce low performance DOM operations, so as to improve web page performance.

  • Purpose of the virtual DOM:

    • The virtual DOM doesn’t eliminate native DOM manipulation; you still need to manipulate the real DOM tree through the browser-provided DOM interface to make changes to the page. The design of the virtual DOM seems redundant.
    • But the virtual DOM provides an important advantage: you can learn the structure of the DOM without having to access the real DOM at all
    • If we were to do three real DOM operations manually, with the virtual DOM structure, we could simplify those three DOM operations into one, which would not result in a performance improvement

  • React virtual DOM

    • Used in the ReactjsxWhen the syntax defines a template, React uses it to generate a virtual DOM tree described by JavaScript and stores it in JavaScript memory. The virtual DOM tree also preserves the data and view bindings we defined in the template, which makes it possible for React to automatically update views based on data changes. Then, when the data changes, React regenerates a virtual DOM tree. By comparing the two virtual DOM trees, React can see how to update the view efficiently. It then calls the native DOM interface to update the real DOM.

The Diff algorithm

The DIff algorithm is actually an algorithm that compares DOM differently

  • Tree Diff: The new and old DOM trees are compared layer by layer, which is called tree Diff. Whenever we compare nodes of all layers from front to back, we will inevitably find those elements that need to be updated.
  • Component diff: The comparison between components when comparing each layer is called component diff; When comparing components, if the two components have the same type, it is temporarily considered that the component does not need to be updated. If the components have different types, remove the old component immediately, create a new component, and replace it with the removed position.
  • Element diff: In a component, comparisons are made between each element, so element-level comparisons are called Element diff.
  • Key: The key attribute can make a layer of association between the DOM node on the page and the object in the virtual DOM.

Create the React project

react.docschina.org/

React.docschina.org/docs/create…

Create React App

npx create-react-app my-app
cd my-app
npm start
Copy the code
SKIP_PREFLIGHT_CHECK=true
Copy the code

Project start effect drawing

React.docschina.org/docs/render…

1. Import two related packages into the project:

// Install the React component and the life cycle of the React component. Install the React component and the life cycle of the React component. Import react from 'react' import ReactDOM from 'react' import ReactDOM from 'react'Copy the code

2. Create a virtual DOM node using JS:

// createElement(); // createElement(); // createElement(); // createElement(); This is used to create a virtual DOM object, which takes three or more parameters. Parameter 1: a string parameter, indicating the type of element to be created. Parameter 2: an attribute object, indicating what attributes exist on the element being created. Starting with the third argument, you can put a bunch of virtual DOM objects after it, and write the argument, // <div title="this is a div" id="mydiv"> this is a div</div> var myH1 = react. createElement('h1', null, 'This is a big H1') var myDiv = react. createElement('div', {title: 'this is a div', id: 'mydiv',className:"duv"}, 'this is a div', myH1)Copy the code
  1. Use ReactDOM to render elements into the container specified by the page:
// reactdom.render (' virtual DOM element to render ', 'where on the page to render ') // Note: The second argument to the reactdom.render () method, unlike vue, does not accept strings like "#app", Instead, you need to pass a native DOM object called reactdom.render (myDiv, document.getelementById ('app')).Copy the code

index.js

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; CreateElement ('li',null,' I am li') let myul = React.createElement('ul',{className:'list'},myli) ReactDOM.render( // <React.StrictMode> // <App /> // </React.StrictMode>, // render dom myul, document.getelementById ('root')); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();Copy the code