[DAY-01]React

Posted 2020-09-17 代码笔

React

• 一个用于创建可复用，可聚合的web组件的js库
• 只提供MVC中的V层

WHY

1. 组件化，不是写一堆html模板
2. JS逻辑与HTML标签紧密相连且容易理解
3. 单项数据流   数据一旦更新，则直接重新渲染整个APP
管理UI状态并不简单
• 修改DOM树
• 修改数据
• 接收用户输入
• 异步API数据请求

　　和传统的服务器端渲染相似

传统方式	React的渲染方式
浏览器请求页面	用户输入
服务器请求数据库	从API获取数据
将数据传给模板	将数据传给顶层组件
模板渲染页面	React将每个组件渲染出来

　　将不再有如下缺点：

1. 双向数据绑定
2. 数据模型的肮脏检查dirtychecking
3. 确切的DOM操作

　　好处：

1. 每个组件是干啥的，很直观
2. 结果可以预测
3. 组件间的关系更清晰

　　一个react组件可以理解为一个独立的函数

1. 接受参数props
2. 可复用
3. 可以传递
4. 返回结果（渲染组件）

4.虚拟DOM树

在每一次更新时，

• React重建DOM树
• 找到与上个版本的DOM的差异
• 计算出最新的DOM更新操作
• 从操作队列中批量的执行DOM更新操作

可以在Node.js中运行【服务器端】

• 服务器与客户端公用逻辑Isomorphic javascript
• SEO友好，便于生成缓存的单页应用
• 直接渲染特定的页面而不用渲染整个App

JSX

Javascript的XML的语法扩展

采用易于理解的语法来定义DOM树