React
- 一个用于创建可复用，可聚合的web组件的js库
- 只提供MVC中的V层
WHY
- 组件化，不是写一堆HTML模板
- JS逻辑与HTML标签紧密相连且容易理解
- 单项数据流 数据一旦更新，则直接重新渲染整个APP 管理UI状态并不简单
- 修改DOM树
- 修改数据
- 接收用户输入
- 异步API数据请求
和传统的服务器端渲染相似
|
传统方式 |
React的渲染方式 |
|
浏览器请求页面 |
用户输入 |
|
服务器请求数据库 |
从API获取数据 |
|
将数据传给模板 |
将数据传给顶层组件 |
|
模板渲染页面 |
React将每个组件渲染出来 |
将不再有如下缺点：
- 双向数据绑定
- 数据模型的肮脏检查dirtychecking
- 确切的DOM操作
好处：
- 每个组件是干啥的，很直观
- 结果可以预测
- 组件间的关系更清晰
一个react组件可以理解为一个独立的函数
- 接受参数props
- 可复用
- 可以传递
- 返回结果（渲染组件）
4.虚拟DOM树
在每一次更新时，
- React重建DOM树
- 找到与上个版本的DOM的差异
- 计算出最新的DOM更新操作
- 从操作队列中批量的执行DOM更新操作
可以在Node.js中运行【服务器端】
- 服务器与客户端公用逻辑Isomorphic javascript
- SEO友好，便于生成缓存的单页应用
- 直接渲染特定的页面而不用渲染整个App
JSX
Javascript的XML的语法扩展
采用易于理解的语法来定义DOM树