React 学习笔记 01 基本使用

React 和 Vue 的对比

1.什么是模块化，是从代码的角度来进行分析的。把一些可复用的代码，抽离为单个的模块，便于项目的维护和开发。

2.什么是组件化，是从UI界面的角度来进行分析的。把一些可复用的UI元素，抽离为单独的组件，便于项目的维护和开发。

3.组件化的好处就是随着项目的扩大，能很方便的将现用的组件，拼接成一个完整的页面，便于开发。

4.Vue如何实现组件化：通过.vue文件创建来创建对应的组件

template 结构
script 行为
style 样式

5.React如何实现组件化的：一切都是以JS来表现的。

虚拟DOM

1.DOM的本质是什么：浏览器中的概念，用JS对象来表示页面上的元素，并提供了操作DOM对象的API。

2.虚拟DOM：是框架中的概念，用JS对象来模拟页面上的DOM和DOM嵌套。

3.为什么要实现虚拟DOM：为了实现页面中DOM元素的高效更新。比较新旧虚拟DOM，进行比较更新（按需更新），而不是全部重新渲染。例：数据渲染试图，拿到数据拼接字符串，添加到文档中，实现更新DOM，而如果只是ul其中的两个li需要互换位置，那么只去更改这两个元素的位置肯定更高效一点（比较虚拟DOM按需更新），而不是通过重新排序数据然后再拼接整个ul中li的字符串去渲染。

4.如何模拟虚拟DOM树

<div id="myDiv" title="title">
    Hello Wrold!
    <p>你好世界</p>
</div>

// 虚拟DOM：用JS对象来模拟页面上的DOM和DOM嵌套关系 为了实现高效更新
var div = {
    tagName:'div',
    attr:{
        id:'myDiv',
        title:'title', // 自定义属性
    },
    childrens:[
        'Hello Wrold!',
        {
            tagName:'p',
            attr:{},
            childrens:[
                '你好世界',
            ]
        }
    ]
}
// 需要更新的时候 对比虚拟DOM更新虚拟DOM即可

Diff算法

用来实现虚拟DOM的高效对比，是实现高效更新的基础，虚拟DOM提供DOM树，而diff算法则提供比较更新的最优算法。

1.tree diff ：新旧两棵DOM树，逐层对比的过程。当对比完成，则所有需要按需更新的元素，必然能够找到。

2.component diff ：在逐层比较tree diff的时候，组件级别的对比。如果不同则移除旧组件，创建新组件然后添加页面中。

3.element diff ：元素级别的对比。

创建项目

1.使用脚手架

npm install -g create-react-app  // 安装脚手架
create-react-app my-app // 生成项目目录
cd my-app // 切换到项目目录
npm start // 运行项目

2.手动搭建

webpack4.x 使用

在webpack.config.js中

export.modules = {
    mode:'development' //  production 
    // 在运行webpack命令 进行打包的时候 会有压缩和压缩的分别
}

使用webpack-dev-server来实现修改后自动打包更新

// 1. 安装
npm i webpack-dev-server -D 

// 2. 配置
// package.json

script:{
    "test":"xxx  xxx",
    "dev": "webapck-dev-server"

    // "dev": "webapck-dev-server --open"
    // 自动打开默认浏览器

    // "dev": "webapck-dev-server --open firefox"
    // 自动打开火狐 IE则是 iexplore

    // "dev": "webapck-dev-server --open --port 3000"
    // 端口号定义为3000

    // "dev": "webapck-dev-server --open --port 3000 --hot"
    // 热更新

    // "dev": "webapck-dev-server --progress --compress"
    // 打包进度 & 压缩

    // "dev": "webapck-dev-server --host 127.0.0.1"
    // 指定项目运行的域名
}

// 使用
npm run dev 
// 之后会跟踪文件 文件更新后 会实时打包更新

// webpack-dev-server打包好的main.js是托管到了内存中，所有在项目根目录看不到 （不是dist中的那个main.js）

//所以在src目录中的index.html中应该这么引入js文件
<script src="/main.js"> </script> 
// 而不是../dist/main.js 
// 之后使用插件生成html的时候会自动插入 不用自己去引入

之后每次修改文件并保存之后就会自动更新打包生成一个看不见的在项目根目录下的main.js ，为什么不保存在物理磁盘上而是保存在内存上呢，因为保存的频率很高，物理磁盘会开销很大，就会很慢，出于性能考虑，所以是存在内存上。

通过webpack-dev-server将main.js放在了内存上，那么同样有工具将index.html也放在内存上，就是html-webapck-plugin插件，使用这个插件将页面生成在内存上去，并且会将dist中的main.js追加到页面中去。

// 1. 安装
npm i html-webpack-plugin -D 

// 2. 更新webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 创建插件实例

const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname,'./src/index.html'),// 源文件 __dirname 当前这个js文件的目录 即项目根目录
    filename:'index.html'// 生成的在内存中的首页名称
})

module.exports= {
    mode:'development',
    // 在webpack 4.x中 无需指定入口 约定大于配置原则 入口就是./src/index.js 

    plugin:[
        htmlPlugin,//挂载
    ]
}

在项目中使用 React

1.安装主要依赖包

npm i react react-dom -S

react：专门用于创建组件和虚拟DOM的，同时组件的生命周期都在这个包中

react-dom：专行DOM操作的，最主要的应用场景就是ReactDom.render()

2.在index.html中创建容器

<div id="app"></div>

3.在./src/index.js中导入包

import React from 'react'
import ReactDOM from 'react-dom'

4.创建虚拟DOM元素

const myh1 = React.createElement('h1',{
    title:"hello world",
    id:"test"
},'你好 世界')
// 参数：元素类型 元素属性对象 子节点...

const myDiv = React.createElement('div',null,myh1)

5.渲染

ReactDOM.render(myDiv,document.getELementById('app'))

React 学习笔记 01 基本使用