学习前提：
html / css / ECMAScript 5 与 ECMAScript 6 必须要会
必须要掌握常用 js 知识的如 class、箭头函数、函数绑定、this指向、字面量对象语法、对象简写形式、解构赋值、展开数组、闭包、递归、ES6 模块、Promise、同步与异步、事件循环
- node 和 npm 和 webpack 入门知识，比如 npm 如何安装包和管理包，Node.js是什么，webpack是什么
注意：以上无需精通，做到 是什么 ，干什么用的， 会用，就可以，因为学习不是一蹴而就的事情，需要在学习各种技术过程中 反复推敲 才能理解深透。
编码环境准备：
- windows / macOS / Linux 操作系统
- 代码编辑器 vscode、atom、webstorm
- 浏览器 chrome 、fireFox
- Node.js 安装时会附带npm包管理工具
1.1 react 开发依赖于一堆技术如： webpack、bable、node、npm 等等，有些是必需的比如打包构建webpack，有些则是可选的比如css预编译scss等。
1.2 我们可以使用现成的 react-create-app 脚手架（就是帮你配置好了目录结构与构建配置的工具)进行开发。
安装脚手架工具通过npm：
npm install —global create-react-app
创建一个 react 项目：
create-react-app 项目名称
注意：默认在当前目录下创建项目
1.3 react 使用 JSX (JavaScript Extension) 语法，来代替 Html 标签，不过不用担心，基本都是相同的，不同点主要有以下几点：
- JSX 不仅仅可以写 html 标签 还可以写 react 任何一个组件 如：
- React 判断一个元素是 HTML 还是 React 组件，通过第一个字母是否大写，react组件命名为每个单词大写（大驼峰命令法）
- React 把 html 与 JavaScript 混合在一起是一种逻辑上的 “分而治之”, 实现了组件封装性,在这里指的是 JSX 。
- JSX 中的 onClick 与html中的 onclick 事件处理方式是不一样的
html中的 onclick 事件处理方式：
添加到全局环境中，给dom元素添加onclick绑定方式会影响网页渲染性能，绑定了事件的元素移除时需要考虑移除事件侦听,防止内存泄露。
react中onClick 事件处理方式：
控制在组件范围中不会污染全局空间，渲染时不是直接在元素上onclick来绑定事件，而是处理成事件委托的形式，也就是说无论多少个onClick去绑定最终只会渲染成一个事件处理函数，挂在顶层dom节点上，性能更高，另外React控制了组件生命周期，在 unmount 中会清除掉事件侦听。
注意： onclick 指的是html中的行内事件绑定方式，onClick指的是JSX语法的绑定形式.
1.4 react实际依赖于一系列技术，运行 npm run eject / yarn run eject 就会弹出 webpack 等配置文件。
在 package.json 中可以看到: 
默认 create-react-app 脚手架生成时package.json文件中scripts字段应该如上图一样, react-scripts 这个包，包含了全部这系列技术的配置，可以去 node_modules/react-scripts 中看到, start 用于开发时启动项目， build 构建出用于上线产品的优化代码， test用于单元测试， eject 命令则是将 react-scripts 一些列技术栈配置从包里弹出到根目录下，当需要定制 react 项目打包配置时即可运行这个命令，运行完之后是不可逆转的。
提示： ES6语法不是全部浏览器都支持，所以 create-react-app 脚手架配置了 babel 用于将代码从 ES6 语法转为 ES5 语法，实现兼容全部浏览器，所以你在 React 中可以尽情的使用 ECMAScript 6 的语法便利。
1.5 React 的工作方式 与 Jquery 的工作方式
Jquery 3.x新版本不支持旧浏览器，1.x 支持 IE
在Jquery 中，更新一个元素，必须先选取 dom 然后再修改 dom, 对于小型项目代码简单易懂，大型项目则代码结构复杂。
React 则是根据 数据 来渲染，UI = render(data)， 在 react 中想要更新用户界面只需要修改数据，就会自动做出响应，MVVM思想， 数据 和 视图 之间存在一个管理者，视图中的数据通过管理者获取，数据发生变化，管理者则会对视图进行修改。
React 并不是每次都完全重新渲染 dom 元素，实则通过一个叫 Virtual Dom 的数据结构，模拟真实的dom（html中的）， 我们知道html标签是可以互相嵌套的，所以就形成了逐级包含的关系，就产生了树形结构， 浏览器会将html文档解析成一种叫DOM的树形结构数据，然后根据这个结构数据去绘制出用户界面，而通过 js 去操作这种html的dom操作，简单的一句js代码，实则引起了 浏览器 对网页的重新布局和绘制，这就比执行一句js代码要慢很多了，而 React 的 JSX 会通过 babel 转成一条条js的语句，类似于 js 的 createElement 语句, 但React并不是通过这些语句直接创建DOM树，而是先创建 Virtual DOM， 也就是 JSX -> react创建元素语句 -> Virual DOM, html的抽象dom树， Virtual DOM 是对 dom 树的抽象，Virual Dom不会触及浏览器， 只存在 js 空间中的树形结构，每次 react 从上到下渲染组件时从产生新的一个 Virual DOM, 然后对比旧的 Virual DOM, 然后才修改真正的DOM树,修改时只修改Virtual DOM中变的部分, 实际 React 对比新旧 Virual DOM 寻找两者差异的操作是比较复杂的，具体在第五章。
1.6 React 方式优点
Jquery 方式： 
React 函数式编程思维方式：
小结：
react由数据驱动渲染的模式来工作， 基于组件来构建用户界面， 声明式语法，只需要专注描述数据，不需要思考渲染， 虽然 react 通过重复渲染实现动态更新元素效果，但通过将 真实dom 抽象成js中的 Virtual DOM 并对比新旧Virual DOM，从而在实际DOM操作中只进行局部更新dom元素，不涉及未触及更新的元素，从而没有太多的 DOM 操作只是js操作，浏览器渲染效率没有受到影响
在本章中要求掌握：
- react的工作方式
- create-react-app 的脚手架使用
- 将脚手架的技术栈配置等文件弹出(npm run eject)到根目录，在自定义打包配置的时候尤其有用。
若有收获，就点个赞吧
0 人点赞
