起源：React起源于Facebook的内部项目，因该公司对市场上所有的JavaScript MVC框架都不满意，就自己决定写一套，用来架设lnstagram的网站，做出来以后发现好用就在2013年5月开源。

特点：React设计思想独特，属于革命性创新，性能出众，代码逻辑非常简单，越来越多人开始关注使用，认为其可能是将来Web开发主流框架。

三、主要概念：

library(库)：提供特定的API，可以很方便的从一个库切换到另一个库，代码几乎不会改变。

Framework(框架)：提供一整套解决方案，想切换另外框架是比较困难的

四、组件化方面:

模块化：从代码角度来分析，将一些可复用的代码抽离为单个的模块，便于项目的维护和开发。

组件化：从UI界面角度来分析，将一些可复用的UI元素抽离为单独的组件，便于项目的维护和开发。

组件化的好处：随着项目规模的扩大，自己的组件越来越多，便能很方便的把现有的组件拼接成一个完整的页面。

Vue实现组件化的方式:

通过 .vue文件，来创建对应的组件

· template 结构

· script 行为

· style 样式

React实现组件化的方式:

React中有组件化的概念，但是没有想vue这样的组件模板文件，React中一切都以JS来表现，因此需要有JS、ES6、ES7基础

五、移动APP开发方面:

Vue结合Weex技术，提供迁移到移动端App的开发(Weex,目前只是一个小玩具，没有很大成功案例)

React结合ReactNative,提供无缝衔接到移动App的开发(RN用的最多，也是最火最流行的)

六、React中的几个核心概念:

虚拟DOM(Virtual Document Object Model):

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

虚拟DOM：是React框架中的概念，是程序员用JS对象来模拟页面上的DOM和DOM嵌套

虚拟DOM的目的：为了实现页面中，DOM元素的高效更新

如何实现实现页面上的按需更新?

1.获取内存中的新旧两颗DOM树进行对比，得到需要按需更新的DOM元素，因为浏览器中并没有直接提供获取DOM树的API，因此我们无法拿到浏览器内存中的DOM树，程序员需要手动模拟DOM树，程序员手动模拟的这俩颗DOM树就是React中的虚拟DOM的概念。

2.DOM树的概念：

一个网页的呈现过程：

1.浏览器请求服务器获取页面的HTML代码

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

3.浏览器把DOM树呈现在页面上

3.手动模拟DOM元素过程

<div id="mydiv" title="名字" data-index="0">
    张小凡
    <p>你好</p>
</div>
var div = {
    tagName:'div',
    attrs:{
        id:'mydiv',
        title:'名字',
        'data-index':'0'
    },
    childrens:[
        '张小凡',
        {
            tagNmae:'p',
            attrs:{},
            childrens:[
                '你好'
            ]
        }
    ]
}

Diff算法：(different):

tree diff:新旧两颗DOM树，逐层对比的过程，即为Tree Diff;当整颗DOM逐层对比完毕，则所有需要被按需更新的元素必然能够找到。

component diff: 在进行Tree Diff的时候，每一层中，组件级别的对比，叫做Component Diff;如果对比前后，组件的类型相同，则暂时认为此组件不需要更新；如果对比前后，组件的类型不同，则需要移除旧组件，创建新组件，并追加到页面上；

element dif:在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比

二、使用webpack进行项目搭建:

一、快速初始化项目:

vscode新建终端运行：

npm init -y

得到一个package.json的配置文件，加载所有的包都会在该配置文件中记录

二、创建目录结构:

在项目根目录下创建src源代码目录和dist产品目录，并在src目录下创建index.html

三、使用cnpm安装webpack

一、安装过程中

当前文件目录下，新建终端运行：

cnpm i webpack -D
cnpm i webpack-cli -D

二、安装过程中出现的一系列问题

当安装完webpack后在终端输入webpack进行打包时出现

解决方法：

1.关闭vscode，并以管理员身份重启

2.在终端中输入：get-ExecutionPolicy，显示Restricted，表示状态是禁止的

3.再次输入：set-ExecutionPolicy RemoteSigned 有可能出现以下问题，赋上解决办法

4.根据报错提示再次输入：Set-ExecutionPolicy -Scope CurrentUser

5.提供参数值：remotesigned 显示成功限制解除

6.接下来我们输入webpack，突然出现以下情况，提示我们 mode缺少developm或production

7.新建一个webpack.config.js文件存放webpack需要的模块，里面代码如下：

// 向外暴露一个打包的配置对象 因为webpack是基于Node构建的；
//所以webpack支持所有的Node API和语法
module.exports = {
    mode:'development' //development production
}

8.终端输入webpack出现如下

模块没有找到？为啥呢。在webpack4.x+中有一个很大特性就是约定大于配置，默认打包的入口路劲是 src -> index.js。所以src下的js文件要修改index.js，如果修改别名就会报错。

9.修改之后，终端继续深入webpack，文件引入成功。

10.引入dist路劲下的main.js文件。查看index.html网站就会执行我们的js代码了，大功告成！！！

11.提及一点：上边提到的development和production的区别

development:开发者模式下dist下的main.js没有被压缩，代码格式友好但占资源多

production:生产者模式下dist下的main.js被压缩，代码格式不友好但占资源少

四、注意点:

1.webpack4.x提供了约定大于配置的概念；目的是减少配置文件的体积；

2.默认的打包入口是 src -> index.js ；打包的输出文件是dist -> main.js

3.4.x+中新增了mode选项，可选的值为：development和production

三、配置webpack进行实时打包编译

根据上文，虽然我们实现了webpack的打包，但是修改index.js内容之后，刷新页面并没有反应，为什么？我们想到了修改内容后必须还得在打包一次，但一次次修改一次次打包未免也太繁琐了，所以我们要下载一个工具，帮助我们进行实时打包。能提高我们打包的性能。

cnpm i webpack-dev-server -D

提示安装成功，但有两个警告，提示我们依赖的包没有安装，这里手动安装解决一下。

命令如下：注意！这时的xxx为上述错误中的内容。

cnpm install --save-dev xxx
//例如
cnpm install --save-dev bufferutil@^4.0.1

下载完成后在package.json配置简单的命令

接下来在终端运行：npm run dev

执行成功

鼠标悬停在 http://localhost:8080/上，Ctrl+左键跳转网址

访问网址：http://www.localhost:8080/main.js

那为啥main.js这个网址能访问但没有在http://localhost:8080/上显现出来呢？

原来webpack-dev-server 打包好的mian.js是托管到内存中，并不会显示到物理磁盘中，所以在项目根目录中看不到；但是，我们可以认为，在项目根目录中，有一个看不见的main.js

点击http://localhost:8080/ 下src f12打开控制台，调整js内容就能实时更新了

一定要点击链接下的src进入网页才行，如果在vscode的index.html右键 Open wirh Live Server会报错的，切记！！！总而言之：webpack为你提供了一个简单的web服务器。

进阶部分：

可以根据自己的需求设置相关信息。

这里讲解一下可能出现的问题：

1.npm run dev 默认执行端口为8080，自己本地执行端口不是8080怎么办？先浅解一个方法：

修改vscode默认浏览器打开的端口：

打开自己的Live Server插件点击设置打开扩展设置。

往下滑，找到设置端口的Port，点击在settings.json中编辑

修改settings.json内容，设置自己的端口号，比如8080

2. 虽然执行成功但跳转到本地网址时会出现以下问题：

？？为啥，后来了解到应该是自己的本地文件路径出现了问题，如何解决？

webpack.config.js里面添加内容，重启vscode即可

module.exports = {
    mode: 'development', //development preduction
    devServer: {
        static: "./",
    }
}

3.虽然自己本地vscode设置端口是8080，webpack-dev-server默认端口也是8080，但有时会出现webpack-dev-server端口是8081，原因是当前的8080端口被占用。

4.虽然能网站打开，但为啥报错了，原因是我们还要修改js的文件路径

5.OK，差不多都解决完了，但上文那个控制台围绕“你好”的三条提醒能不能消除掉？试一下

点击node_modules,找到webpack下的log.js注释相关代码

剩下的俩个自己搞吧。哈哈哈

原创不易，呜呜~，看到这还不点赞加收藏？

想学习更多前端知识，关注博主不迷路！！！！

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/140141.html

React技术栈 –》搭建与实操 ## Day1

一、React介绍:

一、前端三大主流框架的区别：

二、React简介：

三、主要概念：

四、组件化方面:

Vue实现组件化的方式:

React实现组件化的方式:

五、移动APP开发方面:

六、React中的几个核心概念:

虚拟DOM(Virtual Document Object Model):

如何实现实现页面上的按需更新?

Diff算法：(different):

二、使用webpack进行项目搭建:

一、快速初始化项目:

二、创建目录结构:

三、使用cnpm安装webpack

一、安装过程中

二、安装过程中出现的一系列问题

四、注意点:

三、配置webpack进行实时打包编译

这里讲解一下可能出现的问题：

发表回复

React技术栈 –》搭建与实操 ## Day1

一、React介绍:

一、前端三大主流框架的区别：

二、React简介：

三、主要概念：

四、组件化方面:

Vue实现组件化的方式:

React实现组件化的方式:

五、移动APP开发方面:

六、React中的几个核心概念:

虚拟DOM(Virtual Document Object Model):

如何实现实现页面上的按需更新?

Diff算法：(different):

二、使用webpack进行项目搭建:

一、快速初始化项目:

二、创建目录结构:

三、使用cnpm安装webpack

一、安装过程中

二、安装过程中出现的一系列问题

四、注意点:

三、配置webpack进行实时打包编译

这里讲解一下可能出现的问题：

相关推荐

发表回复