走近react | 青训营

用户1791462849543
61 阅读7分钟

今天的课程内容主要讲的是react,其实我在之前并没有听过这个是什么，所以在学习课程内容之前，我对此进行了预习。以下是我的笔记内容：

React 是一个用于构建用户界面的 JavaScript 库。从不同角度对 React 的看法：

从学生的角度来看，学习 React 可能需要一定的编程基础，但它是一个非常有用的技能。React 的组件化开发方式使得代码更易于理解和维护。我们可以通过学习 React，掌握现代前端开发的基本原理和技术，为将来的职业发展打下坚实的基础。

从老师的角度来看，React 提供了一种直观且强大的方式来教授前端开发。它的组件化和虚拟 DOM 的概念使得学生能够更好地理解和应用前端开发的核心概念。同时，React 生态系统庞大，有很多相关的教学资源和社区支持，这对于教师来说是非常有帮助的。

从企业家的角度来看，React 是一个非常受欢迎的前端开发框架，被广泛应用于许多大型企业的项目中。React 的高效性能和可重用性使得开发团队能够更快速地构建复杂的用户界面，并提供良好的用户体验。此外，React 还有一个庞大的社区和生态系统，可以提供丰富的第三方库和工具，帮助企业家更好地开发和管理项目。

对于我个人而言，学习 React 的过程非常有趣和具有挑战性。React 的组件化开发方式使得代码更加模块化和可维护，同时也提供了强大的状态管理和虚拟 DOM 的特性。学习 React 还需要了解相关的生态系统，如 Redux、React Router 等，但这些都是非常有用的技能。总体而言，学习 React 让我更深入地理解了前端开发的原理和技术，并为我今后的职业发展提供了更多的可能性。

react是什么？

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

以上一段话来自百度百科，通过阅读资料知道，react是一种web开发框架，它是脸书自行开发的，那么react高于其他框架的地方又在哪里呢？

react和MVC

我们之前也学习和实践过MVC模型。

MVC模型

是一种将应用分解成三个独立部分的通用模型 这三个部分分别是：

  • 模型(Model)：描述系统的数据
  • 视图(view)：数据的显示，包括图形、文本和文件输出等；
  • 控制器(Controller)：获取系统的输入，控制系统的执行；

vue

说到这里不得不提一下国产的模型VUE，是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面.Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建，是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。

尤大佬现在还是一个不到四十的优秀程序工程师，相信很多未来的程序员们都敬佩他把他奉为榜样。vue运用也非常广泛。那么react和vue有什么区别呢？作为一个后浪推前浪的作品，vue有很多react具备的优点，甚至在很多方面彰显了优势。当然，react并没有被淘汰，我们要多方面学习，多方面运用甚至创新，以后也做出自己的好项目。

react和vue的差别

1、学习

React：React开发者需要花费更多时间掌握。更注重JavaScript的本质，强调函数式编程

Vue：Vue集成了许多React和Angular的优点，API设计直观，学习成本更低。Vue的文档友好，对初学者更有帮助。

2、社区支持

React：React由Facebook维护，拥有庞大的社区支持。同时，由于其长时间的历史，React有更多的库可供选择，且生态系统更为成熟。

Vue：Vue虽然社区相对较小，但发展非常快速，国内的支持也非常热烈。

3、基础结构

React：React是由Facebook开发的一个JavaScript库，它只关注视图层。这种设计理念使得React可以与其他库无缝协作。另一方面，React使用虚拟DOM，并引入了一种叫做JSX的语法糖，可以在JavaScript中写HTML。

Vue：Vue也是一个专注于视图层的JavaScript框架，同时也易于学习。Vue使用了一种类似于HTML的模板语法，让开发者可以将HTML元素绑定到Vue实例的数据上。另外，Vue也使用了虚拟DOM。

4、数据绑定

React：React实现单向数据流，

Vue：Vue实现了双向数据绑定

5、性能

React：React通过引入虚拟DOM，降低了直接操作DOM带来的性能损耗。

Vue：Vue也使用了虚拟DOM，但它进一步优化了虚拟DOM的性能。

react的具体内容

说了一些前提背景，那么react到底是什么？我觉得需要从使用的优势和原理讲起。

为什么使用react

  • 1 组件化开发，符合现代Web开发的趋势
  • 2 技术成熟，社区完善，配件齐全，适用于大型Web项目
  • 3 由Facebook团队维护，技术支持可靠
  • 4 使用方式简单，性能非常高，支持服务端渲染
  • 5 React使用范围广泛，属于一个程序员必备技术

两个概念：

  • 1 虚拟DOM
  • 2 Diff算法（虚拟DOM的加速器，提升React性能的法宝）

虚拟DOM

React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提高渲染的效率

为什么用虚拟dom，当dom反生更改时需要遍历 而原生dom可遍历属性多大231个 且大部分与渲染无关 更新页面代价太大

处理方式

  • 1 用 JavaScript 对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到文档当中
  • 2 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
  • 3 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了

Diff算法

当你使用React的时候，在某个时间点 render() 函数创建了一棵React元素树，
在下一个state或者props更新的时候，render() 函数将创建一棵新的React元素树，
React将对比这两棵树的不同之处，计算出如何高效的更新UI（只更新变化的地方）

  • React中有两种假定：

    • 1 两个不同类型的元素会产生不同的树(根元素不同结构树一定不同)
    • 2 开发者可以通过key属性指定不同树中没有发生改变的子元素

具体的内容和实例可以去看react和diff算法的官方文档。

课堂学习

以上内容都是我的预习内容，其中有一些地方我不大理解，特别是涉及到专业原理的一些知识。今日的视频学习内容也是从react框架的历史应用、设计思路到写法实现以及状态管理库的一些科普，我觉得与我的学习路径基本一致，在看完视频之后，我会进行react的相关实践操作，用来确认自己是否掌握知识。

安装react

当然，学习编程安装技能少不了。同样是需要node，这个之前安装过了，不再赘述。react的安装要到官方网站去，在cmd

npm install -g create-react-app

create-react-app

安装还是比较容易的，接下来让我们走近实践吧！

avatar
文章
阅读
粉丝