技术分享
首页
  • JavaScript

    • 构造函数和原型
    • Cookie和Session
    • Object.create(null)和{}
    • TypeScript配置
    • typescript入门到进阶
  • 框架

    • Vue-Router
    • React基础入门
  • 其它

    • Http协议
    • 跨域问题总结
  • 分析Promise实现
  • Axios源码分析
  • Webpack原理
  • vueRouter源码分析
  • Vue

    • Vite快速搭建Vue3+TypeScript项目
    • Cordova打包Vue项目的问题
    • Vue将汉字转为拼音,取出首字母
    • h5项目问题总结
  • JavaScript

    • new Function
  • 后端

    • Node.js中使用Crypto生成Token
    • Body-Parser处理多层对象的问题
  • 其它

    • 项目Demo汇总
    • Vuepress+Vercel搭建个人站点
    • 项目中能用到的
    • husky规范代码提交
  • Mongoose基础
  • Multer文件上传中间件的使用
  • JavaScript

    • 浅谈两数全等
    • JavaScript进制转换
    • 手写bind,apply,call和new
  • 算法

    • 数组去重和排序
    • 数组扁平化
    • 斐波那契数列
  • JavaScript 数据结构
  • 其它

    • webpack面试题
    • vite面试题
    • svg和canvas的优缺点
    • TypeScript面试题
    • Vue常见面试题
  • 计算机网络

    • 数据链路层
    • 网络层
  • Git的使用
  • Nginx的使用
  • CentOS7安装Nginx
  • 正则表达式
  • SEO搜索引擎优化
  • Serverless介绍
友链
GitHub (opens new window)

刘誉

总有人要赢,为什么不能是我
首页
  • JavaScript

    • 构造函数和原型
    • Cookie和Session
    • Object.create(null)和{}
    • TypeScript配置
    • typescript入门到进阶
  • 框架

    • Vue-Router
    • React基础入门
  • 其它

    • Http协议
    • 跨域问题总结
  • 分析Promise实现
  • Axios源码分析
  • Webpack原理
  • vueRouter源码分析
  • Vue

    • Vite快速搭建Vue3+TypeScript项目
    • Cordova打包Vue项目的问题
    • Vue将汉字转为拼音,取出首字母
    • h5项目问题总结
  • JavaScript

    • new Function
  • 后端

    • Node.js中使用Crypto生成Token
    • Body-Parser处理多层对象的问题
  • 其它

    • 项目Demo汇总
    • Vuepress+Vercel搭建个人站点
    • 项目中能用到的
    • husky规范代码提交
  • Mongoose基础
  • Multer文件上传中间件的使用
  • JavaScript

    • 浅谈两数全等
    • JavaScript进制转换
    • 手写bind,apply,call和new
  • 算法

    • 数组去重和排序
    • 数组扁平化
    • 斐波那契数列
  • JavaScript 数据结构
  • 其它

    • webpack面试题
    • vite面试题
    • svg和canvas的优缺点
    • TypeScript面试题
    • Vue常见面试题
  • 计算机网络

    • 数据链路层
    • 网络层
  • Git的使用
  • Nginx的使用
  • CentOS7安装Nginx
  • 正则表达式
  • SEO搜索引擎优化
  • Serverless介绍
友链
GitHub (opens new window)
  • js基础
  • vue入门
  • react基础入门
    • React 与 vue 的对比
      • 组件化方面
      • 移动 APP 开发体验方面
    • React 中几个核心的概念
      • 虚拟 DOM(Virtual Document Object Model)
      • Diff 算法
    • 在项目中使用 react
    • JSX 语法
      • 如何启用 JSX 语法
  • http协议
  • cookie和session
  • 跨域问题总结
  • 构造函数和原型
  • Object.create(null)和{}
  • TypeScript配置
  • Vue-Router
  • typescript入门到进阶
  • 前端
coderly
2020-10-11

react基础入门

# React 基础配置

# React 与 vue 的对比

# 组件化方面

  1. 什么是模块化:是从代码的角度来进行分析的,把一些可复用的代码,抽离为单个的模块;便于项目的维护和开发;
  2. 什么是组件化:是从UI界面的角度来进行分析的;把一些可复用的 UI 元素,抽离为单独的组件;便于项目的维护和开发;
  3. 组件化的好处:随着项目规模的增大,手里的组件越来越多;很方便就能把现有的组件,拼接为一个完整的页面;
  4. Vue 是如何实现组件化的:通过.vue,文件,来创建对应的组件;
    • template:结构
    • script:行为
    • style:样式
  5. React 如何实现组件化:React 中有组件化的概念,但是,并没有像 vue 这样的组件模板文件;React 中,一切都是以 js 来表现的;因此要学习 React,js 要合格;ES6 和 ES7(async 和 await)要会用;

# 移动 APP 开发体验方面

  1. Vue,结合 Weex 这门技术,提供了迁移移动端开发的体验(Weex,目前只是一个小的玩具,并没有很成功的大案例)
  2. React,结合 ReactNative,也提供了无缝迁移到移动端 APP 的开发体验(RN 用的最多,也是最火最流行的)

# React 中几个核心的概念

# 虚拟 DOM(Virtual Document Object Model)

  1. DOM 的本质是什么:浏览器中的概念,用 JS 对象来表示页面上元素,并提供了操作 DOM 对象的 API;
  2. 什么是 React 中的虚拟 DOM:是框架中的概念,程序员用 JS 对象来模拟页面上的 DOM 和 DOM 嵌套;
  3. 为什么要实现虚拟 DOM(虚拟 DOM 的目的):为了实现页面中,DOM 元素的高效更新;

【注意】:浏览器中,并没有直接提供获取 DOM 树的 API;因此,我们无法拿到浏览器内存中的 DOM 树,所以提出了虚拟 DOM 树,用 js 对象模拟
【总结】:用 JS 对象,来模拟页面上 DOM 嵌套关系(虚拟 DOM 是以 JS 对象的形式存在的);

# 一个网页呈现的过程

  1. 浏览器请求服务器获取页面 HTML 代码;
  2. 浏览器要在内存中,解析 DOM 结构,并在浏览器内存中,渲染出一颗 DOM 树;
  3. 浏览器把 DOM 树,呈现到页面上;

# Diff 算法

  1. tree diff:新旧两颗 DOM 树,逐层对比的过程,就是 tree diff;当整颗 DOM 逐层对比完毕,则所有需要被按需更新的元素,必然能够找到;
  2. component diff:在进行 tree diff 的时候,每一层,组件级别的对比,叫做 component diff;
    1. 如果对比前后,组件的类型相同,则暂时认为此组件不需要被更新;
    2. 如果对比前后,组件类型不同,则需要移除旧组件,创建新组件,并追加到页面上;
  3. element diff:在进行组件对比的时候,如果两个组件类型相同,则需要进行元素级别的对比,这叫做 element diff;

# 在项目中使用 react

  1. 运行npm i react react-dom -S安装包
    1. react:专门用于创建组件和虚拟 DOM 的,同时组件的生命周期都在这个包中;
    2. react-dom:专门进行 DOM 操作的,最主要的应用场景,就是reactDOm。render()
  2. 在index.html页面中,创建容器
<!-- 容器,将来使用 React 创建的虚拟DOM元素,都会被渲染到这个指定的容器中-->
<div id="app"></div>
1
2
  1. 导入包
import React from 'reac'
import ReactDOM from 'react-dom'
1
2
  1. 创建虚拟 DOM 元素
// 创建虚拟DOM
// 参数1:创建的元素的类型,字符串,表示元素的名称
// 参数2:是一个对象或null,表示当前这个DOM元素的属性
// 参数3: 子节点(包括其他虚拟DOM获取 文本子节点)
// 参数n: 其他子节点
// <h1 id="myh1" title="this is a h1">这是一个h1</h1>
const myh1 = React.createElement(
  'h1',
  { id: 'myh1', title: 'this is a h1' },
  '这是一个h1'
)
1
2
3
4
5
6
7
8
9
10
11
  1. 渲染
// 使用ReactDOM把虚拟DOM渲染到页面上
// 参数1:要渲染的那个虚拟DOM元素
// 参数2: 指定页面上一个容器,(dom元素)
ReactDOM.render(myh1, document.getElementById('app'))
1
2
3
4

# JSX 语法

什么是 JSX 语法:就是符合 xml 规范的 JS 语法;(语法格式相对来说,要比 HTML 严谨很多)

# 如何启用 JSX 语法

  1. 安装 babel 插件
    • 运行npm i babel-core babel-loader babel-plugin-transform-runtime -D
    • 运行npm i babel-preset-env babel-preset-stage-0 -D
  2. 安装能够识别转换 JSX 语法的包babel-preset-react
    • 运行npm i babel-preset-react -D
  3. 添加.babelrc配置文件
{
    "presets": ["env", "stage-0", "react"],
    "plugins": ["transform-runtime"]
}
1
2
3
4
  1. 添加babel-loader配置
module: {
  // 所有第三方 模块的配置规则
  rules: [
    {
      test: /\.js|jsx$/,
      use: 'babel-loader',
      exclude: /node_modules/,
    },
  ]
}
1
2
3
4
5
6
7
8
9
10
#React#Webpack
上次更新: 2021/03/25, 12:42:28
vue入门
http协议

← vue入门 http协议→

最近更新
01
代码片段
04-22
02
koa全家桶
03-29
03
mocks项目复盘
03-29
更多文章>
Theme by Vdoing | Copyright © 2021-2022 coderly | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式