Handwritten react

Time:2020-12-24

Small white with, welcome the big man to put forward the opinion
Actually write react in Vue community, ha ha ha

preface

White whoring class in Geek time, record the content and sublimate the knowledge hereCode warehouse address React code address

As a beginner, I have a lot of things I don’t understand. I want to try to write some small demos to learn the underlying principles of the framework and virtual dom

What is JSX

The tags in JS are converted to the specified calling mode, and the DOM management is unified

Return < p > hello</p>

#Translation

ToyReact.createElement('p','',[]);

Webpack plug in – >babel/plugin-transform-react-jsx

Document.createRange()

Real Dom and virtual DOM

General in frameworkThe combination of virtual and real

  • Real DOM
    • Destroying and creating a new DOM hardly consumes much performance in the case of a small number of DOM nodes
    • In practice, only traditional development may not be used in large quantities, of course, when using V-IF
  • Virtual DOM
    • Do not destroy the DOM, determine which DOM nodes are the updated results through diff
    • The diff we use here is to recreate the DOM, not to update the original properties of the DOM (update faster or recreate faster? What is the impact of the two)

Diff algorithm > virtual DOM

Final prototypeToy-React

Advanced Improve and optimize the code

  • Remove the space occupation of the label
  • add to

This leads toFront end optimization skillsAndcommon problem

start

Building environment

  • npm/yarn
  • Webpack configuration item
    module.exports = {
      mode: 'development',
      entry: {
          main: './index.js',
      },
      module: {
          rules: [
              {
                  test: /\.js$/,
                  use: {
                      loader: 'babel-loader'
                      , options: {
                          presets: ['@babel/preset-env'],
                          plugins: [
                              [
                                  '@babel/plugin-transform-react-jsx',
                                  //Functions used in Translation
                                  {pragma: "ToyReact.createElement"}
                              ]
                          ]
                      },
                  },
              },
          ],
      },
    };
  • Dependent installation
    "@babel/core": "^7.10.5",
    "@babel/plugin-transform-react-jsx": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "babel-loader": "^8.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  • Import file main.js
todo
  • Core class ToyReact.createElement
todo

summary

Now that you know what a virtual DOM is and why you need a virtual DOM, its core isReduce the deletion and creation of DOM nodes, but use local update to changeTo increase performance

Recommended reading

Illustration front end

React and the history of front end development

What are the advantages of react? Here is a guide to getting started

The most complete in history! How graphical browsers work

In depth browser understanding of CSS animations and transitions performance issues

Thinking caused by useeffect

This work adoptsCC agreementReprint must indicate the author and the link of this article

Learning, rushing~

Recommended Today

Matlab uses quantile random forest (QRF) regression tree to detect outliers

Original link:http://tecdat.cn/?p=22160  This example shows how to use quantile random forest to detect outliers. Quantile random forests can detect outliers related to the conditional distribution of Y for a given X. Outliers are some observations whose position is far enough from most other observations in the data set to be considered abnormal. The causes of […]