react

啊，学习taro之前还得搞定react。。。。。。。

这里写下对react的基本认识吧。。

react是一个用于构建用户界面的 JavaScript 库。。。。。。。。。。。。

(一)概念

1React的工作方式

声明式编程，你只需要告诉计算机你需要什么就行了，不需要关心怎么去做的。

现在用统一通俗的例子来比较jQuery的命令和React的声明式。React是一个聪明的建筑工人，而jQuery是一个比较傻的建筑工人，开发者你是一个建筑工程师，如果是jQuery这个建筑工人为你工作，你不得不事无巨细地告诉jQuery“如何去做”，要告诉他这面墙要拆掉重建，那面墙上要新开一个窗户，反之，如果是React这个建筑工人为你工作，你所要做的就是告诉这个工人“我想要什么样子”，只需要把图纸递给React这个工人，他就会替你搞定一切，当然他不会把整个建筑拆掉重建，而是很聪明地把这次的图纸和上次的图纸做一个对比，发现不同之处，然后只去做适当的修改就完成任务了。

react的解决方式
在第一构建出DOM树之后，还会构建出一个Virtual DOM，是对DOM树的抽象，是一个JavaScript对象，重新渲染的时候，会对比这一次产生的Virtual DOM和上一次渲染的Virtual DOM，对比发现差异之后，只需修改真正的DOM树时就只需要触及差别中的部分就行

2react的特点

react的特点有： 
1.声明式设计 −React采用声明范式，可以轻松描述应用（自动dom操作）。 
2.高效 −React通过对DOM的模拟(虚拟dom)，最大限度地减少与DOM的交互。 
3.灵活 −React可以与已知的库或框架很好地配合。 
4.JSX − JSX 是 JavaScript 语法的扩展。 
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。 
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。 
React的核心是组件，精髓是函数式编程，组件的设计目的是提高代码复用率、降低测试难度和代码复杂度。 

3react的使用者

国外使用React的公司：Facebook，Flipboard，Airbnb，BBC，GitHub，Instagram，Reddit，Uber，WhatsApp，Yahoo 
国内使用React的公司：支付宝，淘宝，大搜车，Teambition，豆瓣，豌豆荚 

4react的理解------react只负责ui的构建，通过virtual dom构建，自建组件，完成ui的构建

Just the ui

React 负责UI层面的展现，尽管很多人用React作[MVC]架构中的View层,但这并不是React的本意。

一般的情况下，我们在开发过程中，通常会使用模板或者直接使用HTML来构建UI，而HTML是静态的，使用模板在大多数情况下是可以满足需求的，但是在复杂的逻辑情境中就显得有些吃力了，过多的if else或者逻辑控制在模板里，都会让代码变得难以维护，当然这还是说整个项目中使用统一的模板的情况下。

React换了一种思路解决问题，它把UI拆分成组件，而不是通过模板引擎和展示逻辑，使得它可以易于拓展和维护。因此它引入了JSX这种语法规则，可以让我们使用类似HTML的语法去写js的函数调用。

 virtual dom

浏览器渲染页面的一般过程通常是这样的：

1 加载html->生成DOM树->解析css生成Render树->生成页面

 那么React的virtual dom是怎么做的呢？

1 生成virtual dom->diff->必要的DOM更新

 

（二）实战

0react能为我们做什么？

react把用户界面抽象成一个个组件，如按钮组件button，对话框组件Dialog，日期组件Calendar，开发者通过组合这些组件，最终得到功能丰富、可交互的页面，通过引用jsx语法，复用组件变得非常容易，同时也能保证组件结构清晰，有了组件这层抽象，react把代码和真实渲染目标隔离开来，除了可以在浏览器端渲染到DOM来开发网页外，还能用于开发原生移动应用。 

1react安装

此处使用一个构建react应用的脚手架工具create-react-app,利用这个工具可以快速构建react项目，安装react脚手架工具

npm install -g create-react-app

2用脚手架命令create-react-app来快速的创建项目

create-react-app 项目名

之后你会发现，他在执行脚手架命令的时候，帮你安装了3个react的包，这应该就是react的核心包吧。。。。。

3本地启动项目---到package.json中去找执行脚本scripts

npm start

项目打包，生成静态hcj，放到线上npm run build

放在服务器上部署，然后配置nginx的root为对应目录，做静态服务器，然后去反向代理你的应用集群，就前后端服务ok了

 

就是去不断的去使用nginx的反向代理/静态服务器/负载均衡的配置，配置下就好了，proxy_pass&root&weight.....