初识React

什么是React

用来构建UI的 JavaScript库，React 不是一个 MVC 框架，仅仅是视图（V）层的库。

1 使用JSX语法创建组件，实现组件化开发；

2 通过虚拟DOM、diff算法实现视图的高效更新；

今天从以下4点对React进行了一个初步了解：

第一：如何初始化一个React项目；

第二：如何新建一个React组件并学会如何使用它；

第三：JSX的初步了解；

第四：了解eject；

第五：React的工作方式；

学习React，我倾向于实践+理论结合，从简单的react的初始项目开始动手，边学习边练习，这样效果更好。

一：如何初始化一个React项目？

前提条件：保证开发环境已经安装好了nodejs以及支持npm的使用；这个一般前端开发者都已具备，如过没有的话，请参考node.js官网：https://nodejs.org/zh-cn/

React官网为我们提供了一个快速开发React的工具create-react-app，使用create-react-app工具可以快速初始化一个react项目.

# 安装create-react-app

npm install -g create-react-app

# 创建create-react-app项目

create-react-app first_react_app

# 进入create-react-app项目

cd create-react-app

# 项目启动

npm start

# 项目成功启动之后会让浏览器自动打开访问地址,默认情况下会占用端口号3000（推荐使用谷歌浏览器）

http://localhost:3000/

以上：简单的react的项目就新建成功了。一开始项目默认的目录结构如下：

二：如何新建一个React组件并学会如何使用它

目前不管是组件化开发是广泛使用的一种软件开发模式。用简单的例子来说，假设某些功能元素过多并使用多个功能场景的时候，我们可以把这个页面元素独立提取出来成独立的小组件，让这个小组件可以灵活的在多个场景下使用。

React的首要思想也是通过组件（ Component） 来开发应用。

所谓组件， 简单说 指的是能完成某个特定功能的独立的、 可重用的代码。遵循"高内聚，低耦合”的原则，把逻辑紧密相关的内容放到同一个组件，react组件可以把当中展示内容的jsx、行为控制的js、以及样式定义的css，都可以放到同一个js文件中。因此，react天生具备高内聚的特点。低耦合是指不同组件之间的关系尽可能弱化，组件之间不要有过多的牵扯。根据不同的功能模块划分组件，让不同的组件实现单一职能，保持整个系统的耦合度在一个可控的范围。遵循"高内聚，低耦合”的原则也是实现组件可复用，便于维护的重要前提。

src/index.js 是app的入口文件，从文件src/index.js里可以看到，这个项目主要是渲染了一个名叫App的组件,整个App只引入了一个组件，就是同级目录下的 App.js，将它挂载到id名为root的元素下,其中获取id名为root的元素是从public/index.html的静态文件中，这是浏览器打开后进入的文件，所有的组件都将挂载到个文件名叫#root的DOM当中，从而进行页面渲染。

开始新建一个自己的组件：在src文件目录下新建components文件夹，新增一个组件名为ClickCounter的点击计数组件，如图：

可以修改 index.js，引入ClickCounter组件，并将它直接挂载到DOM中，也可以在App.js中引入并且使用。

另外我注意到，在组件中引入了React，代码中却没有明确用到。但事实上，引入React是非常必要的，如果将之删除，则在浏览器可以看到报错信息:

错误信息提示的是: “ 在使用 JSX 的范围内必须要有React”，也就是说， 在使用JSX的代码文件中，即使代码中并没有直接使用React，也一定要导入React，这是因为JSX最终会被转译成依赖于React的表达式。

三：JSX的初步了解

JSX是一种 JavaScript 的语法扩展，Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析.

使用JSX应该注意的几点:

第一，在JSX中使用的“ 元素” 不局限于HTML中的 元素，它可以是任何一个 React 组件，比如我们之前创建的 ClickCounter组件。React判断 一个元素是HTML元素还 React组件的原则就是看第一个字母是否大写，如果在JSX中我们不用ClickCounter而是用clickCounter，那就得不到我们想要的结果。

第二，在JSX中可以通过onClick这样的方式给一个元素添加一个事件处理函数，当然，在 HTML 中也可以用onclick（ 注意和 onClick拼写有区别）， 但在HTML中直接书写onclick一直就是为人诟病的写法，网页应用开发界一直倡导的是用jQuery的方法添加事件处理函数， 直接写onclick会带来代码混乱的问题。

并不推荐在组件中直接使用onclick，而是使用onClick，主要是onclick有以下几个缺点:

1. onclick添加的事件处理函数是在全局环境下执行的，这污染了全局环境，很容易产生意料不到的后果；

2. 给很多DOM元素添加onclick事件，可能会影响网页的性能，毕竟，网页需要的事件处理函数越多，性能就会越低；

3. 对于使用onclick的DOM元素， 如果要动态地从DOM树中删掉的话，需要把对应的时间处理器注销，假如忘了注销，就可能造成内存泄露，这样的bug很难被发现；

然而，在 JSX 中并不存在上述缺点。

在 JSX 中，使用 onClick 并不是将事件直接挂在到对应的 DOM 中，而是使用事件委托，挂在到DOM树的最顶层中，这样，无论添加多少个 onClick ，在DOM树中都只有一个事件处理函数，再根据具体组件分派到不同的实现方法中。而且React 控制了组件的生命周期，在 unmount 的时候，自然能够清除相关的所有事件处理函数，内存泄漏也不再是一个问题。

四：了解eject

打开 package.json 可以看到以下代码:

关于eject书上是这么说的：

eject（ 弹射） 命令做的事情， 就是把潜藏在 react- scripts 中的一系列技术栈配置都“ 弹射” 到应用的顶层， 然后我们就可以研究这些 配置细节了， 而且可以更灵活地定制应用的配置，不过特别注意，整个过程是不可逆的；

但是执行弹射命令npm run eject时，我发现了一个错误，新手比较懵逼哈，仔细一看原因是在初始化项目之后，该项目并没有本地 git 仓库，而此项目目录下又有 .gitignore 文件，所以此时会向上级寻找未提交的项目。并且也给了解决方案的提示：

解决方案：

1. 既然明确了是git版本管理的问题，可以删除.git目录以及.gitignore文件，删除之后，这个create-react-app项目，就脱离git版本管理了，可以继续执行 npm run eject

2. 继续使用git版本管理，然后先提交相关被修改文件到版本库，然后再执行原来的操作。

   # 初始化仓库    git init

   # 添加并提交  git add .         git commit -m ‘xxxxxx'

   # 重新执行 npm run eject

目前我这边直接使用了删掉了本地的git版本管理，重新npm run eject之后目录结构如下：可以看到，webpack配置文件已经被释放了，而且package.json的配置也对应有了变化:

五：React的工作方式

从jquery  /  Virtual DOM两个方面进行比较描述：

（1）jQuery的工作方式

在此之前做过也接手过很多Jquery的项目，jQuery的解决方案中，一般我们要修改页面上某个位置上的值，需要先根据css规则找到id找到对应的元素位置，在这个位置挂上一个匿名事件处理函数，在事件处理函数中，选中那个需要被修改的DOM元素，做出对应的修改操作，然后去修改这个DOM元素。对于开发者来说，传统化的jquery的方式直观易懂，但是随着项目变得庞大时，用jquery写出的代码往往相互纠缠，难以维护，越看越头大。

jquery式纠缠代码结构

（2）Virtual DOM

react利用函数式编程的思想来解决用户界面渲染问题，通过引发react组件的重新渲染来实现用户交互，react会根据diff算法计算出这一次渲染的Virtual DOM和上一次渲染的Virtual DOM中的差别部分，然后把这部分差异应用到真正的DOM树上去。

react流程