react基础入门
# React 基础配置
# React 与 vue 的对比
# 组件化方面
- 什么是模块化:是从
代码
的角度来进行分析的,把一些可复用的代码,抽离为单个的模块;便于项目的维护和开发; - 什么是组件化:是从
UI界面
的角度来进行分析的;把一些可复用的 UI 元素,抽离为单独的组件;便于项目的维护和开发; - 组件化的好处:随着项目规模的增大,手里的组件越来越多;很方便就能把现有的组件,拼接为一个完整的页面;
- Vue 是如何实现组件化的:通过
.vue
,文件,来创建对应的组件;- template:结构
- script:行为
- style:样式
- React 如何实现组件化:React 中有组件化的概念,但是,并没有像 vue 这样的组件模板文件;React 中,一切都是以 js 来表现的;因此要学习 React,js 要合格;ES6 和 ES7(async 和 await)要会用;
# 移动 APP 开发体验方面
- Vue,结合 Weex 这门技术,提供了迁移移动端开发的体验(Weex,目前只是一个小的玩具,并没有很成功的大案例)
- React,结合 ReactNative,也提供了无缝迁移到移动端 APP 的开发体验(RN 用的最多,也是最火最流行的)
# React 中几个核心的概念
# 虚拟 DOM(Virtual Document Object Model)
- DOM 的本质是什么:浏览器中的概念,用 JS 对象来表示页面上元素,并提供了操作 DOM 对象的 API;
- 什么是 React 中的虚拟 DOM:是框架中的概念,程序员用 JS 对象来模拟页面上的 DOM 和 DOM 嵌套;
- 为什么要实现虚拟 DOM(虚拟 DOM 的目的):为了实现页面中,DOM 元素的高效更新;
【注意】:浏览器中,并没有直接提供获取 DOM 树的 API;因此,我们无法拿到浏览器内存中的 DOM 树,所以提出了虚拟 DOM 树,用 js 对象模拟
【总结】:用 JS 对象,来模拟页面上 DOM 嵌套关系(虚拟 DOM 是以 JS 对象的形式存在的);
# 一个网页呈现的过程
- 浏览器请求服务器获取页面 HTML 代码;
- 浏览器要在内存中,解析 DOM 结构,并在浏览器内存中,渲染出一颗 DOM 树;
- 浏览器把 DOM 树,呈现到页面上;
# Diff 算法
- tree diff:新旧两颗 DOM 树,逐层对比的过程,就是 tree diff;当整颗 DOM 逐层对比完毕,则所有需要被按需更新的元素,必然能够找到;
- component diff:在进行 tree diff 的时候,每一层,组件级别的对比,叫做 component diff;
- 如果对比前后,组件的类型相同,则暂时认为此组件不需要被更新;
- 如果对比前后,组件类型不同,则需要移除旧组件,创建新组件,并追加到页面上;
- element diff:在进行组件对比的时候,如果两个组件类型相同,则需要进行元素级别的对比,这叫做 element diff;
# 在项目中使用 react
- 运行
npm i react react-dom -S
安装包- react:专门用于创建组件和虚拟 DOM 的,同时组件的生命周期都在这个包中;
- react-dom:专门进行 DOM 操作的,最主要的应用场景,就是
reactDOm。render()
- 在
index.html
页面中,创建容器
<!-- 容器,将来使用 React 创建的虚拟DOM元素,都会被渲染到这个指定的容器中-->
<div id="app"></div>
1
2
2
- 导入包
import React from 'reac'
import ReactDOM from 'react-dom'
1
2
2
- 创建虚拟 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
2
3
4
5
6
7
8
9
10
11
- 渲染
// 使用ReactDOM把虚拟DOM渲染到页面上
// 参数1:要渲染的那个虚拟DOM元素
// 参数2: 指定页面上一个容器,(dom元素)
ReactDOM.render(myh1, document.getElementById('app'))
1
2
3
4
2
3
4
# JSX 语法
什么是 JSX 语法:就是符合 xml 规范的 JS 语法;(语法格式相对来说,要比 HTML 严谨很多)
# 如何启用 JSX 语法
- 安装 babel 插件
- 运行
npm i babel-core babel-loader babel-plugin-transform-runtime -D
- 运行
npm i babel-preset-env babel-preset-stage-0 -D
- 运行
- 安装能够识别转换 JSX 语法的包
babel-preset-react
- 运行
npm i babel-preset-react -D
- 运行
- 添加
.babelrc
配置文件
{
"presets": ["env", "stage-0", "react"],
"plugins": ["transform-runtime"]
}
1
2
3
4
2
3
4
- 添加
babel-loader
配置
module: {
// 所有第三方 模块的配置规则
rules: [
{
test: /\.js|jsx$/,
use: 'babel-loader',
exclude: /node_modules/,
},
]
}
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
上次更新: 2021/03/25, 12:42:28