react简介
把数据渲染成页面
特点：
- 组件化模式、声明式编码
- 在React Native中可以用React愈发进行移动端开发
- 使用虚拟DOM和优秀的Diffing算法，尽量减少与真实DOM的交互
1 虚拟DOM
DOM是浏览器中的概念。
是框架中的概念，用js对象的形式，来模拟页面上的DOM和DOM嵌套
虚拟DOM是以js对象的形式存在的
对比新旧DOM树，实现按需渲染
DOM树：js的对象形式
2 Diff算法
- Tree Diff：新旧两棵DOM树，逐层对比的过程，数对比
- component diff：在进行tree diff的过程中，每一层中，组件级别的对比，叫做component diff
- 对比相同，暂时认为该组件不需要更新
- 对比不相同，需要移除旧组件，创建新组件
- element diff：两个组件相同，则需要对组件中的元素做对比
3 创建本地项目
- 1 快速初始化项目
$ npm init -y
会自动生成一个package.json文件
- 2 在根目录下创建
src文件夹和dist文件夹src：放源代码的文件dist：产品目录
- 3 在
src目录下创建index.html文件 - 4 安装webpack
$ cnpm i webpack -D
$ cnpm i webpack-cli -D
-
5 在
src目录下创建index.js -
6 在根目录下创建
webpack.config.js- webpack的配置文件
- 配置
module.exports = { mode: "development", // 开发环境;production生产环境 }Webpack4.x之后：约定大于配置，打包入口是
src下的index.js，打包的输出文件是dist下的main.js、 -
7 安装web pack-dev-server
把src中的index文件放到根目录的下的内存中
$ cnpm i webpack-dev-server -D
运行：
$ webpack serve --open
- 8 把
index.html加载到根目录\的内存中
下载html-webpack-plugin
安装
$ cnpm i html-webpack-plugin
配置应用：在webpack.config.js中
const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
// 创建实例
const htmlPlugin = new HtmlWebPackPlugin(
{
template: path.join(__dirname, '/src/index.html'),
filename: 'index.html' // 内存中首页的名称
}
);
module.exports = {
mode: 'development',
plugins: [
htmlPlugin
]
};
4 react基本使用
- 在
index.js中
import React from 'react' // 必须是这种用法（命名）
import ReactDOM from 'react-dom'
// 创建一个虚拟dom
const myh1 = React.createElement('h1', null, '这是一个h1');
// 把虚拟dom渲染到页面
ReactDOM.render(myh1, document.getElementById('app'));
注意：
React.createElement()：可以有n个参数。
第一个参数是标签名，字符串
第二个参数是对象或者null，dom元素的属性
第三个参数及之后是子节点，包括虚拟dom获取，文本子节点
ReactDOM.render()：两个参数，第一个是虚拟dom对象，第二个是dom对象
例子：
import React from 'react' // 创建组件、虚拟DOM元素，生命周期
import ReactDOM from 'react-dom' // 把创建好的组件和虚拟DOM放到页面上展示的
// createElement参数：
const myh1 = React.createElement('h1', null, '这是一个h1');
const myDiv = React.createElement('div', {"tittle": "这是一个dom"}, myh1)
ReactDOM.render(myDiv, document.getElementById('app'));
index.html中
创建一个容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
