【前端之路】react框架学习

简介: 【前端之路】react框架学习

什么是React?

React是用于构建用户界面的JavaScript库, [1] 起源于Facebook的内部项目,该公司对市场上所有 JavaScript MVC框架都不满意,决定自行开发一套,用于架设Instagram的网站。于2013年5月开源。

React特点

声明式:使用 React 编写UI界面和写HTML几乎一样
高效: React通过对DOM的模拟,最大限度地减少与DOM的交互
灵活:React可以与已知的库或框架很好地配合

<div id="example"></div>
<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
</script>

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的出现。

相关文章
|
12天前
|
机器学习/深度学习 数据采集 数据可视化
基于爬虫和机器学习的招聘数据分析与可视化系统,python django框架,前端bootstrap,机器学习有八种带有可视化大屏和后台
本文介绍了一个基于Python Django框架和Bootstrap前端技术,集成了机器学习算法和数据可视化的招聘数据分析与可视化系统,该系统通过爬虫技术获取职位信息,并使用多种机器学习模型进行薪资预测、职位匹配和趋势分析,提供了一个直观的可视化大屏和后台管理系统,以优化招聘策略并提升决策质量。
|
4天前
|
前端开发 Java 编译器
【前端学java】如何从前端视角快速学习Maven
【8月更文挑战第12天】如何从前端视角快速学习Maven
12 2
【前端学java】如何从前端视角快速学习Maven
|
6天前
|
前端开发 JavaScript API
前端框架Vue------>第二天学习(1)插槽
这篇文章介绍了Vue框架中插槽(slot)的概念和用法,以及如何在组件中使用自定义事件进行父子组件间的通信。
前端框架Vue------>第二天学习(1)插槽
|
6天前
|
JSON 前端开发 JavaScript
前端框架Vue------>第一天学习(3)
这篇文章是关于使用Vue框架进行前端开发的教程,重点介绍了如何使用Axios实现异步通信和表单输入的双向数据绑定。
前端框架Vue------>第一天学习(3)
|
6天前
|
前端开发 JavaScript API
前端框架Vue------>第一天学习(2) v-if
这篇文章介绍了Vue框架中条件渲染的用法,包括`v-if`、`v-else-if`指令的使用,以及列表渲染和事件监听的基本实现。
前端框架Vue------>第一天学习(2) v-if
|
6天前
|
设计模式 JavaScript 前端开发
前端框架Vue------>第一天学习、Vue学习的路径、Vue官网(1)
这篇文章是关于Vue框架的学习指南,涵盖了前端知识体系、MVVM模式、创建第一个Vue程序以及Vue实例的生命周期等基础知识。
前端框架Vue------>第一天学习、Vue学习的路径、Vue官网(1)
|
1天前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题
|
3天前
|
Web App开发 缓存 前端开发
介绍一下React框架的最佳实践。
【8月更文挑战第17天】介绍一下React框架的最佳实践。
9 2
|
5天前
|
前端开发 JavaScript
前端网站学习大全
这篇文章提供了前端网站开发学习的资源大全,涵盖了HTML常用标签和CSS常用样式,以及如何使用`<meta>`标签提供页面元信息和`lang`属性定义内容语言等基础知识。
前端网站学习大全
|
6天前
|
前端开发 JavaScript
前端框架Vue------>第三天学习(1)
这篇文章介绍了Vue框架的组件基础和计算属性的概念,通过示例代码展示了如何定义可复用的Vue组件和使用计算属性来声明性地描述依赖其他值的数据。