React学习笔记（一）

最新推荐文章于 2022-09-28 19:46:39 发布

叶落_花败

最新推荐文章于 2022-09-28 19:46:39 发布

阅读量472

点赞数 1

分类专栏： React 文章标签： React web js

本文链接：https://blog.csdn.net/qq_36615821/article/details/102534340

版权

本文是React学习笔记的第一部分，介绍了React的基本概念、与其他前端框架的对比，重点探讨了虚拟DOM和Diff算法的重要性，以及创建基本的webpack4.x项目和使用JSX语法的细节。

摘要由CSDN通过智能技术生成

React.js-Part1

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram（照片交友）的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
Angular1 2009 年谷歌 MVC 不支持组件化开发
由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。
搞清楚两个概念：
- library（库）：小而巧的库，Jquery，优点：船小好调头，可以很方便的从一个库切换到另外的库，但是代码几乎不会改变。
- Framework（框架）：大而全的是框架，提供了一整套的解决方案，所以项目中间想切换到另外的框架，比较困难。

三大框架一大抄

Angular.js：出来最早的前端框架，学习曲线比较陡，NG1学习起来比较麻烦，NG2-NG5开始进行了了改革，也提供了组件化开发的概念，也支持TS（TypeScript）进行编辑。
Vue.js：最火（关注的人比较多），中国人开发的。
React.js：最流行（用的人比较多），设计很优秀。

什么是模块化：是从代码角度进行分析的；把一些可以复用的代码，抽离为单个的模块；便于项目的维护和开发。
什么是组件化：是从 Ul界面的角度进行分析的；把一些可复用的Ul元素，抽离为单独的组件（放到单独的文件中）；便于项目的维护和开发。
**组件化的好处：**随着项目规模的增大，手里的组件越来越多；很方便就能把现有的组件拼接为一个完整的页面。
Vue是如何实现组件化：通过.vue文件，来创建对应的组件；
- template 结构
- script 行为
- style 样式
React如何使用组件化：React中有组件化的概念，但没有像Vue这样的模板文件；React中一切都是以js来实现的；所以JS要合格；ES6，ES7（async和await）要会用。

DOM的本质是什么：浏览器中的概念，浏览器提供的API，用JS对象来表示页面上的元素，并提供了操作DOM对象的API(拿到div，加上颜色);
**什么是React中的虚拟DOM：**是框架中的概念，是程序员（封装框架的程序员）用JS对象来模拟页面上的DOM和DOM嵌套；
为什么要实现虚拟DOM：为了实现页面中，DOM元素的高效更新。
DOM和虚拟DOM的区别：
- **DOM：**浏览器中提供的概念，用JS对象，表示页面上的元素，并提供了操作元素的API。
- **虚拟DOM：**是框架中的概念；开发框架的程序员，手动用JS对象来模拟DOM元素和嵌套关系。
  - 本质：用JS对象，来模拟DOM元素和嵌套关系。（面试）
  - 目的：就是为了实现页面元素的高效更新。（面试）

需求列表描述

表格中数据从哪儿来：从数据库查询来的。
查询到的数据，存放到哪儿了：数据在浏览器的内存中存放，而且是以对象数组的形式表示。
这些数据如何渲染到页面上？
- 方案1：手动for循环整个数组，then 手动拼接str += ‘<tr></tr>’
- 方案2：使用模板引擎，art.template(???)
思考上述方法的性能上的问题？【↓】
如果用户点击了【时间】，想按照时间从大到小排序：
- 触发点击事件，在事件中，把内存中对象数组，重新排序；
- 当排完序后，页面是旧的，但内存中的对象数组是新的；
- 想办法把最新的数组，重新渲染到页面上；（这一步有没有性能上的问题？）
分析和总结：上述方案，只是实现了把数据渲染的页面上的能力，但没把性能做到最优；
如何才能把性能做到最优：按需渲染页面（只重新渲染更新的数据对应的页面元素）。
如何实现按需渲染更新？

获取内存中，新旧两个DOM树，进行对比，得到需要被按需更新的DOM元素。

一个网页的呈现过程：

<div id="mydiv" title="dd">
    content
    <p>ddd</p>
</div>

var div = {
   
	tagName:'div',
	attrs:{
   
		id

关注

专栏目录