React入门（一）

React入门（一）----简介、脚手架项目搭建以及多种形式组件

React入门基础（一），比对Vue了解React

React简介

React是第一个使用虚拟DOM前端框架，相较于Vue面对中小项目，React更适合做大型企业级项目。

React不是一个完整的MVC框架，最多可以认为是MVC中的V（View），甚至React并不非常认可MVC开发模式；React 构建页面 UI 的库。可以简单地理解为，React 将将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。

React核心：组件，思想：一切皆组件。

React高性能体现，VDOM，这一点和Vue一样，通过对数据的操作生成DOM树，减少非必要DOM渲染提升性能。但是两者不同的是，React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，而Vue则会原本地按照数据变化刷新虚拟DOM，且React在16版本更新后，将虚拟DOM的更新比对核心算法由原本的diff更变为现在的React Fiber。

Filber算法相较于原本的diff算法，优点和特点就是分片。把一个耗时长的任务分成很多小片，每一个小片的运行时间很短，虽然总时间依然很长，但是在每个小片执行完之后，都给其他任务一个执行的机会，这样唯一的线程就不会被独占，其他任务依然有运行的机会。虽然，总的运行时长还是很长，但是给了其他任务执行的机会，相较于diff更加灵活。

在vue中，我们使用render函数来构建组件的dom结构性能较高，因为省去了查找和编译模板的过程，但是在render中利用createElement创建结构的时候代码可读性较低，较为复杂，此时可以利用jsx语法来在render中创建dom，解决这个问题，但是前提是需要使用工具来编译jsx（即CRA、dva、umi）。

React脚手架项目搭建

官方推荐使用CRA，create-react-app，可以使用cnpm或者yarn全局安装，或者使用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  // 配置文件抽离
  	// webpack配置放在了node_modules/react-scripts里面 
    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

常见问题：

- npm安装失败

  - 切换为npm镜像为淘宝镜像

  - 使用yarn，如果本来使用yarn还要失败，还得把yarn的源切换到国内
  
    yarn config set registry https://registry.npm.taobao.org // 配置yarn镜像源
    
    yarn config list // 查看yarn 镜