【前端之路】react 框架学习


什么是 React?
React 是用于构建用户界面的 JavaScript 库, [1] 起源于 Facebook 的内部项目,该公司对市场上所有 JavaScript MVC 框架都不满意,决定自行开发一套,用于架设 Instagram 的网站。于 2013 年 5 月开源。
React 特点
声明式:使用 React 编写 UI 界面和写 HTML 几乎一样高效: React 通过对 DOM 的模拟,最大限度地减少与 DOM 的交互灵活:React 可以与已知的库或框架很好地配合
React JSX
React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX,但它有以下优点:
JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的,在编译过程中就能发现错误。使用 JSX 编写模板更加简单快速。
Scheduler
Scheduler:有了 Fiber,我们就需要用浏览器的时间片异步执行这些 Fiber 的工作单元,我们知道浏览器有一个 api 叫做 requestIdleCallback,它可以在浏览器空闲的时候执行一些任务,我们用这个 api 执行 react 的更新,让高优先级的任务优先响应不就可以了吗,但事实是 requestIdleCallback 存在着浏览器的兼容性和触发不稳定的问题,所以我们需要用 js 实现一套时间片运行的机制,在 react 中这部分叫做 scheduler。

可以看到 ProductResource.read 完全是同步的写法,把获取数据的部分完全分离出了 Proeuct 组件之外,在源码中,ProductResource.read 会在获取数据之前会 throw 一个特殊的 Promise,由于 scheduler 的存在,scheduler 可以捕获这个 promise,暂停更新,等数据获取之后交还执行权。ProductResource 可以是 localStorage 甚至是 redis、mysql 等数据库,也就是组件即服务,可能以后会有 server Component 的出现。
版权声明: 本文为 InfoQ 作者【黎燃】的原创文章。
原文链接:【http://xie.infoq.cn/article/ea0601cbc6be6a7e0d97b1982】。文章转载请联系作者。
评论