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.....