React学习内容⼤纲
webpack
webpack 是⼀个现代 JavaScript 应⽤程序的静态模块打包器(module bundler)。当 webpack 处理应⽤程序时，它会递归地构建⼀个依赖关系图(dependency graph)，其中包含应⽤程序需要的每个模块，然后将所有这些模块打包成⼀个或多个 bundle
其它相似打包⼯具还有 、 、等
按照**(注意是指南不是概念不是api)**进⾏针对性的讲解即可，需要被充⼀下⼯程化的知识
什么是JS项⽬⼯程化
版本控制
⾃动化持续继承、持续交付(CI/CD)
代码质量控制(QA)
⼯具
模块化
⽂档
demo
编译过程
⾃动化处理每次push, tag, release的任务队列
1. 安装
1. 安装 : npm命令⾏⼯具
2. 安全审计：npm audit
2. Lint
1. 格式检查: eslint/stylelint
2. 格式化: prettier
3. 测试
1. 测试套装: jest / mocha / ava / kamar
2. 代码覆盖量: nyc / codecov / coveralls
4. 构建
1. 转换器: babel / TS / flow
2. 预处理器: sass / less / postcss
3. 代码混淆: uglify-js / terser
4. 打包及tree shaking: webpack / rollup / parcel
5. 压缩(gzip等)
6. 复制 / 删除 / 移动⽂件
7. 检查打包⽂件的⼤⼩
8. 移除⽆⽤的代码
5. push
1. 交付: git
2. 发布: npm
6. 部署
1. 服务器
1. Pages: git pages
2. 云服务器: aliyun / qcloud / aws
7. Story Book
create-react-app
全局安装create-react-app
$ npm install -g create-react-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,
如果不想全局安装，可以直接使⽤npx
$ npx create-react-app your-app 也可以实现相同的效果
这需要等待⼀段时间，这个过程实际上会安装三个东西
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
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的特点和优势
1. 虚拟DOM
我们以前操作dom的⽅式是通过ElementById()的⽅式，这样的过程实际上是先去读取html的dom结构，将结构转换成变量，再进⾏操作
⽽reactjs定义了⼀套变量形式的dom模型，⼀切操作和换算直接在变量中，这样减少了操作真实dom，性能真实相当的⾼，和主流MVC框架有本质的区别，并不和dom打交道
2. 组件系统
react最核⼼的思想是将页⾯中任何⼀个区域或者元素都可以看做⼀个组件 component
那么什么是组件呢？
组件指的就是同时包含了html、css、js、image元素的聚合体
使⽤react开发的核⼼就是将页⾯拆分成若⼲个组件，并且react⼀个组件中同时耦合了css、js、image，这种模式整个颠覆了过去的传统的⽅式
3. 单向数据流
其实reactjs的核⼼内容就是数据绑定，所谓数据绑定指的是只要将⼀些服务端的数据和前端页⾯绑定好，开发者只关注实现业务就⾏了
4. JSX 语法
在vue中，我们使⽤render函数来构建组件的dom结构性能较⾼，因为省去了查和编译模板的过程，但是在render中利⽤createElement创建结构的时候代码可读性较低，较为复杂，此时可以利⽤jsx语法来在render中创建dom，解决这个问题，但是前提是需要使⽤⼯具来编译jsx
编写第⼀个react应⽤程序
react开发需要引⼊多个依赖⽂件：react.js、react-dom.js，分别⼜有开发版本和⽣产版本，create-react-app⾥已经帮我们把这些东西都安装好了。把通过CRA创建的⼯程⽬录下的src⽬录清空，然后在⾥⾯重新创建⼀个index.js. 写⼊以下代码:
// 从 react 的包当中引⼊了 React。只要你要写 React.js 组件就必须引⼊React, 因为react⾥有⼀种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引⼊React import React from 'react'
// ReactDOM 可以帮助我们把 React 组件渲染到页⾯上去，没有其它的作⽤了。它是从 react-dom 中引⼊的，⽽不是从 react 引⼊。
import ReactDOM from 'react-dom'
// ReactDOM⾥有⼀个render⽅法，功能就是把组件渲染并且构造 DOM 树，然后插⼊到页⾯上某个特定的元素上
// 这⾥就⽐较奇怪了，它并不是⼀个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码⾥⾯。语法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScri pt 写的标签的”语法叫 JSX- JavaScript XML。
<h1>欢迎进⼊React的世界</h1>,
// 渲染到哪⾥
)
元素与组件
如果代码多了之后，不可能⼀直在render⽅法⾥写，所以就需要把⾥⾯的代码提出来，定义⼀个变量，像这样：
import React from 'react'
import ReactDOM from 'react-dom'
// 这⾥感觉⼜不习惯了？这是在⽤JSX定义⼀下react元素
const app = <h1>欢迎进⼊React的世界</h1>
app,
)
react开发框架函数式组件
由于元素没有办法传递参数，所以我们就需要把之前定义的变量改为⼀个⽅法，让这个⽅法去return⼀个元素:
import React from 'react'
import ReactDOM from 'react-dom'
// 特别注意这⾥的写法，如果要在JSX⾥写js表达式(只能是表达式，不能流程控制)，就需要加 {}，包括注释也是⼀样，并且可以多层嵌套
const app = (props) => <h1>欢迎进⼊{props.name}的世界</h1>
app({
name: 'react'
}),
)
这⾥我们定义的⽅法实际上也是react定义组件的第⼀种⽅式-定义函数式组件，这也是⽆状态组件。但是这种写法不符合react的jsx的风格，更好的⽅式是使⽤以下⽅式进⾏改造

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。