React 学习第一天-2018-07-21

React  学习第一天

 

1.Dom 和虚拟Dom

Dom 是浏览器中实际存在的，虚拟Dom是框架中的，是利用JS代码来模拟DOM。

虚拟Dom 是实现页面的实时更新。

Dom树，一个网页的呈现过程，

1.浏览器请求，拿到代码，

2.浏览器在内存中解析DOM结构，并且在内存中渲染出一颗内存树

3.浏览器把DOM 树，呈现到页面上。

 

如何获取到新旧DOM 树，从而实现DOM树的对比。

1.浏览器中没有自带的相关API，

2.程序员可以手动模拟新旧两颗DOM树，这样就可以实现相关的对比，

用JS 对象模拟这个对象

<div id=”mydiv” title=”说实话”> 杰哥好帅</div>

//DOM叔

var div = {

tagName : 'div',

attrs : {

id : 'mydiv',

title : '说实话',

'data-index' :  '0'

},

childrens : ['杰哥很帅'],

{

tagName :'p',

attrs : {},

childrens :['这个是P标签']

}

}

什么是虚拟DOM树：  利用JS的对象形式，来模拟页面上DOM的嵌套关系，虚拟DOM是JS中的对象

程序员模拟的两颗新旧DOM 树，就是React 中DOM 树的概念，

React 中的虚拟DOM概念: 1. 本质，使用JS对象，来模拟DOM元素和相关嵌套关系，2.目的，实现页面元素的高效更新。

 

 

2.Diff 算法。different .对比前后相关的变化。before  和 after

2.1tree diff  新旧两颗DOM 树，逐层大体对比，

2.2 component diff  每一层中的组件对比，

2.3 element diff  每一层的元素对比

 

 

 

 

3.创建webpack 4.X项目

3.1 基本的相关流程

第一步：快速初始化一个项目，初始化命令：npm init  -y  初始化一个项目，

第二步：建立相关文件夹和目录。src 源代码目录  和dist  产品目录（发布好的产品放这个里面）

第三步： 创建index.html

第四步：使用cnpm i webpack -D 安装webpack   4.2.0 注意版本。

第五步： 还要安装 cnpm i webpack-cli  -D   2.0.13

3.2 VS初始化一个html 页面。先输入 ！,然后按下tab键。

 

3.3 cnpm i wbpack -S    -S  和 -D d   

安装 cnpm .  npm i cnpm -g   全局安装一个cnpm

3.4 直接运行webpack 打包命令，失败。原因是相关配置没有配置好。需要建立一个webpack.config.js 文件，进行相关的配置。

3.5 还是失败，因为是默认配置为index.js  我写的是main.js

3.6 webpack 4.X 提供了约定大于配置的概念。目的是为了减少这个配置文件的体积。约定了打包的入口文件是 ‘src/index.js ‘ ，打包的输出文件的  ‘dist/main.js’.但是是可以修改的。

3.7 webpack 4.X  中，新增了node 选项，主要是压缩还是不压缩，起到这工作。3.X中是没有这个功能的。

【注】

ES 6  代码可能暂时不能支持，但是需要配置babel 就能支持，建立一个bebelrc 文件就行。

 

4.运行一次就要重新打包一次，很麻烦，因此需要自动化打包，那么就安装webpack-dev-server 包，进行相关配置，自动化打包。

4.1    cnpm  i webpack-dev-server -D

4.2  进行配置。package.json  中，在脚本中配置。

“dev”  :  “webpack-dev-server ”

这里还可以配置其他的：

"dev" : "webpack-dev-server --open --port 3000 --hot"

--open  

--port

-- hot

-- host

--progress

--compress

--

 

4.3  main.js 已经托管到了内存当中，但是index.html  首页还没有托管到内存中，需要进一步完善。需要安装新的包。

4.3.1   cnpm i html-webpack-plugin -D

4.3.2  在webpack.config.js  中进行配置。

第一步，导入  const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

第二步，进行导入包的配置，

 第一步，生成对象实例

 const htmlPlugin = new HtmlWebpackPlugin ({

template : ’path.join()’ , //源文件地址.其中。path.join()用于进行路径拼接的，__dirname  表示当前路径的一个常数参数。

filename : ‘’   //目的路径地址，

})

 

第二步，然后到 module 中进行配置，plugins : [ htmlPlugin  ]

 

 

5.React 学习。

5.1 安装包 cnpm i react react-dom -S    -S 代表从开发到上线都需要用到的东西，

react  创建组件和虚拟DOM 的

react-dom 专门进行DOM 操作的，就是进行渲染，ReactDOM.render();

5.2 进行相关的配置。

//1.导入包名。

import React from 'react' //创建组件，创建虚拟DOM，生命周期的相关，

import ReactDOM from 'react-dom' //渲染到页面展示相关，

 

//2. 创建虚拟的DOM 元素，

//第一个参数，创建元素的标签类型，

//第二个参数是节点的属性，

//第三个参数是标签的子元素，或者内容

const h1= React.createElement('h1',{id : 'h1',title :'h'},'这个想试图创建一个H1');

//3.把虚拟DOM 渲染到页面上。

//第一个参数，渲染谁，

//第二个参数，渲染的容器，

ReactDOM.render(h1 ,document.getElementById('app'))

//第四步，页面中放一个DOM 元素

 

在React  中一切皆是用js  对象来表现的，

 

 

6.DOM 元素之间的嵌套，

把相关的标签元素当作子节点挂载在相关的标签上。

 

7.js 中写html 代码，不能解析，那么则需要安装babel 解析器。在js 中混合写入类似于html 的语法，叫做JSX  语法。符合XML 规范的JS 。

JSX  的本质，还是在运行的时候转换成了 createElement的形式，

第一步，配置beble 等包。

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

 

cnpm i babel-preset-env babel-preset-stage-0 -D

 

cnpm i babel-preset-react -D

第二步，在webpackconfig 中配置loader 配置项

module : { //webpack 默认只能处理 .js 后缀文件，其他的需要安装包loader进行处理，

rules :[ //第三方匹配规则，

{test : /\.js|jsx$/,use : 'babel-loader',exclude : /node_modules/}

 //千万别忘记添加排除项

]

 

}

 

第三步、配置相关的.babelrc配置文件

{

"presets" : ["env","stage-0","react"],

"plugins" : ["transform-runtime"]

}

 

 

8.JSX  语法学习

//上面这个方式比较复杂，不人性化

//const h11= <div>这个是一个div</div>，但是不能解析，需要相关的包，需要使用bable 进行转换。

let a = 10 ///等价于 const a = 10

let str = '您好，刘送杰同学';

const h1 = <h1>这个是一h1</h1>

ReactDOM.render(<div>

{a}--<hr/>{str}

<hr/>{h1}

</div>,document.getElementById('app'))

 

 

JSX 就是可以在JS 中运行HTML，相关变量用{}括号包裹起来，然后进行相关的运行。

并且React  中的相关元素标签必须是闭合的。

 

9.

 

 

 

10.

 

 

11.