手写React(下周补坑)

小白随,欢迎大佬提意见
居然在vue社区写react的东西,哈哈哈

前言

极客时间的白嫖课,在这里记录一下内容和升华一下知识 代码仓库地址 react代码地址

初学前端,有许多不懂的地方,想尝试写一些小的demo来学习一下框架底层原理和虚拟Dom

什么是JSX

将js中的标签转化为指定的调用方式,统一化的dom管理

return <p>你好</p>

# 翻译

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

webpack插件->babel/plugin-transform-react-jsx

Document.createRange()

‘实’DOM和’虚’DOM

框架中一般虚实并用

  • 实dom
    • 销毁并创建新的dom,在少量dom节点情况下几乎没有太大的性能消耗
    • 在实际中,可能只有传统开发也不会大量使用,当然在使用v-if的时候会使用
  • 虚dom
    • 不销毁dom,通过diff来判断哪些dom节点是更新后的结果
    • 我们这里采用的diff是重新创建dom,并不是更新dom原有的属性(更新操作更快还是重新创建更快?二者会产生什么影响)

diff算法 -> 虚拟DOM

最后原型 Toy-React

进阶完善和优化代码

  • 去除标注的占位
  • 添加

由此引出的前端优化技巧常见问题

开始

搭建环境

  • npm/yarn
  • webpack 配置项
    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',
                                  // 翻译所用到的函数
                                  {pragma: "ToyReact.createElement"}
                              ]
                          ]
                      },
                  },
              },
          ],
      },
    };
  • 依赖安装
    "@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"
  • 入口文件 main.js
todo
  • 核心类 ToyReact.createElement
todo

总结

现在你已经了解了什么是虚拟Dom,以及为什么需要虚拟Dom,其核心主要是减少dom节点的删除和创建,而是用局部更新进行改变,以此增加性能

推荐阅读

[译] 图说前端 - 图解 React Native

React 与前端开发发展史

React 有什么优势?这里有一份入门指南

史上最全!图解浏览器的工作原理

深入浏览器理解CSS animations 和 transitions的性能问题

useEffect引发的思考

本作品采用《CC 协议》,转载必须注明作者和本文链接
学习,冲冲冲~
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!