react简介与框架搭建以及初始化新项目

react

简介

基于webpack的快速开发框架，用于构建高效、快速的用户界面。它是一个轻量级库，因此很受欢迎。它遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效。它使用虚拟DOM来有效地操作DOM。它遵循从高阶组件到低阶组件的单向数据流。
React 中一切都是组件。 我们通常将应用程序的整个逻辑分解为小的单个部分。 我们将每个单独的部分称为组件。 通常，组件是一个javascript函数，它接受输入，处理它并返回在UI中呈现的React元素。
react只负责维护它自己的核心库，插件由社区来提供。

主要原理

传统的web应用，操作DOM一般是直接更新操作的，但是我们知道DOM更新通常是比较昂贵的。而React为了尽可能减少对DOM的操作，提供了一种不同的而又强大的方式来更新DOM，代替直接的DOM操作。就是
Virtual DOM,一个轻量级的虚拟的DOM，就是React抽象出来的一个对象，描述dom应该什么样子的，应该如何呈现。通过这个Virtual DOM去更新真实的DOM，由这个Virtual DOM管理真实DOM的更新。

为什么通过这多一层的Virtual DOM操作就能更快呢？ 这是因为React有个diff算法，更新Virtual DOM并不会马上影响真实的DOM，React会等到事件循环结束，然后利用这个diff算法，通过当前新的dom表述与之前的作比较，计算出最小的步骤更新真实的DOM。

State 和 Render

React是如何呈现真实的DOM，如何渲染组件，什么时候渲染，怎么同步更新的，这就需要简单了解下State和Render了。state属性包含定义组件所需要的一些数据，当数据发生变化时，将会调用Render重现渲染，这里只能通过提供的setState方法更新数据

框架搭建

npm 安装 create-react-app工具，其可以自动地在本地目录中创建react项目。
1.在命令行输入

npm i -g create-react-app

2.安装完成后，通过create-react-app [项目名]来实现项目初始化。
（项目初始化非常慢，一般来说，我们搭建完成后，保存一个空项目，以后的项目可以直接使用）

项目初始化好后，我们可以看见文件目录里面会出现许多文件

使用yarn或者npm对项目进行操作
npm run start / yarn start 启动项目
npm run bulid/ yarn bulid 打包项目
npm run test / yarn test测试，需要我们自己编写测试代码
npm run eject / yarn eject react是看不到配置文件，该命令释放webpack配置文件，一般我们不会释放配置项。

输入yarn start，如果浏览器跳到react官网页面，则说明项目初始化成功。就可以开始我们进一步编写代码了。

JSX原理

JavaScript xml ：就是使用js来描述一个DOM结构的对象。
项目中许多文件对于我们开发并没有太多用处，所以我们可以进行删除。
这样就可以得到一个十分清爽并且能看懂的项目。
组件定义： 定义一个函数方法，返回一个DOM片段。这回就是一个组件，注意函数名必须要使用大写，使用<函数名/>的方式引用组件。
函数组件：

类组件：