React
React学习内容
webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle
其它相似打包工具还有rollup.js 、 parcel、FIS等
webpack可以自动解决模块之间的依赖问题
切记： 各模块不要循环引用
按照webpack的指南**(注意是指南不是概念不是api)**进行针对性的讲解即可，需要被充一下工程化的知识
总结：
-
webpack是当下最流行的资源打包工具，但是在它之前，还有很多的打包工具：
-
grunt gulp browserify webpack rollup FIS…
-
webpack市场有两个版本使用： webpack3.0 webpack4.0
-
webpack是前端工程化、自动化工具
-
webpack安装、
- 全局
2. 局部（ 项目目录 ）
cnpm i webpack webpack-cli -g // 全局 cnpm i webpack webpack-cli -D // 局部 - 全局
-
webpackREPL环境（ 命令行 ） 基础使用
- 命令行输入webpack就会自动寻找目录下的src目录下的index.js文件，将这个文件作为入口文件
-
-
环境的选择：
- 开发环境（ development ） 源代码编写时所处的环境，这个环境中我们可以看到整个项目的错误日志还有错误警告
2. 生产 环境（ production ）： 代码会被压缩，错误提示会没有，项目上线时时候
- 开发环境（ development ） 源代码编写时所处的环境，这个环境中我们可以看到整个项目的错误日志还有错误警告
-
研究webpack的功能
- 自动解决依赖性问题（ 某一个模块在其他模块中使用 ）
- loader( 转换器)
- 功能： 将其他类型文件通过loader编译成js文件
工程化
这个部分的内容可以做为一些思想给学员讲解，不需要学员掌握。可以理解为扩展的内容
什么是JS项目工程化
- 版本控制 git svn
- 自动化持续继承、持续交付(CI/CD)
- 代码质量控制(QA)
- 工程化工具 grunt gulp webpack rollup parcel FIS
- 模块化 ：AMD(require.js) CMD(sea.js) Common.js es6
- 文档
- demo
编译过程
自动化处理每次push, tag, release的任务队列
- 安装
- 安装 : npm命令行工具
- 安全审计：npm audit
- Lint
- 格式检查: eslint/stylelint
- 格式化: prettier
- 测试
- 测试套装: jest / mocha / ava / kamar
- 代码覆盖量: nyc / codecov / coveralls
- 构建
- 转换器: babel / TS / flow
- 预处理器: sass / less / postcss/stylus
- 代码混淆: uglify-js / terser
- 打包及tree shaking: webpack / rollup / parcel
- 压缩(gzip等)
- 复制 / 删除 / 移动文件
- 检查打包文件的大小
- 移除无用的代码
- push
- 交付: git
- 发布: npm publish
- 部署
- 服务器
- Pages: git pages
- 云服务器: aliyun / qcloud / aws
- 服务器
- Story Book
create-react-app
全局安装create-react-app
$ npm install -g create-react-app
如果不想全局安装，可以直接使用npx
$ npx create-react-app your-app 也可以实现相同的效果
创建一个项目
$ create-react-app your-app 注意命名方式
Creating a new React app in /dir/your-app.
Installing packages. This might take a couple of minutes. 安装过程较慢，可以推荐学员使用yarn
Installing react, react-dom, and react-scripts...
这需要等待一段时间，这个过程实际上会安装三个东西
- react: react的顶级库
- react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用react-dom
- react-scripts: 包含运行和打包react应用程序的所有脚本及配置
出现下面的界面，表示创建项目成功:
Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd your-app
npm start
Happy hacking!
根据上面的提示，通过cd your-app命令进入目录并运行npm start即可运行项目。
生成项目的目录结构如下：
├── README.md 使用方法的文档
├── node_modules 所有的依赖安装的目录
├── package-lock.json 锁定安装时的包的版本号,保证团队的依赖能保证一致。
├── package.json
├── public 静态公共目录
└── src 开发用的源代码目录
常见问题：
- npm安装失败
- 切换为npm镜像为淘宝镜像
- 使用yarn，如果本来使用yarn还要失败，还得把yarn的源切换到国内
- 如果还没有办法解决，请删除node_modules及package-lock.json然后重新执行
npm install命令 - 再不能解决就删除node_modules及package-lock.json的同时清除npm缓存
npm cache clean --force之后再执行npm install命令 - 环境变量问题
- react-scripts 版本过高问题 （ 降低版本 react-script@2.1.8）
关于React
React部分的内容包含了所有授课的思路
React的起源和发展
React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
React与传统MVC的关系
轻量级的视图层库！A JavaScript library for building user interfaces
React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；React 构建页面 UI 的库。可以简单地理解为，React 将将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。
React高性能的体现：虚拟DOM
React高性能的原理：
在Web开发中我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。
React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A-B,B-A，React会认为A变成B，然后又从B变成A UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。
尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，部而对实际DOM进行操作的仅仅是Diff分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。
React Fiber:
在react 16之后发布的一种react 核心算法，React Fiber是对核心算法的一次重新实现(官网说法)。之前用的是diff算法。
在之前React中，更新过程是同步的，这可能会导致性能问题。
当React决定要加载或者更新组件树时，会做很多事，比如调用各个组件的生命周期函数，计算和比对Virtual DOM，最后更新DOM树，这整个过程是同步进行的，也就是说只要一个加载或者更新过程开始，中途不会中断。因为JavaScript单线程的特点，如果组件树很大的时候，每个同步任务耗时太长，就会出现卡顿。
React Fiber的方法其实很简单——分片。把一个耗时长的任务分成很多小片，每一个小片的运行时间很短，虽然总时间依然很长，但是在每个小片执行完之后，都给其他任务一个执行的机会，这样唯一的线程就不会被独占，其他任务依然有运行的机会。
React的特点和优势
- 虚拟DOM
我们以前操作dom的方式是通过document.getElementById()的方式，这样的过程实际上是先去读取html的dom结构，将结构转换成变量，再进行操作
而reactjs定义了一套变量形式的dom模型，一切操作和换算直接在变量中，这样减少了操作真实dom，性能真实相当的高，和主流MVC框架有本质的区别，并不和dom打交道
- 组件系统
react最核心的思想是将页面中任何一个区域或者元素都可以看做一个组件 component
那么什么是组件呢？
组件指的就是同时包含了html、css、js、image元素的聚合体
使用react开发的核心就是将页面拆分成若干个组件，并且react一个组件中同时耦合了css、js、image，这种模式整个颠覆了过去的传统的方式
- 单向数据流
其实reactjs的核心内容就是数据绑定，所谓数据绑定指的是只要将一些服务端的数据和前端页面绑定好，开发者只关注实现业务就行了
- JSX 语法
在vue中，我们使用render函数来构建组件的dom结构性能较高，因为省去了查找和编译模板的过程，但是在render中利用createElement创建结构的时候代码可读性较低，较为复杂，此时可以利用jsx语法来在render中创建dom，解决这个问题，但是前提是需要使用工具来编译jsx
扫一扫
3105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
