React学习记录
1.React简介
React起源于Facebook的内部项目,2013年5月开源,没有断层
React和Vue对比
组件化方面
- 什么是模块化:从代码的角度来进行分析;把一些可复用的代码,抽离为单个模块,便于项目的维护和开发;
- 什么是组件化:是从UI界面的角度来进行分析;把一些可复用的UI元素,抽离为单独的组件;
- 组件化的好处:随着项目规模的增大,手里的组件越来越多,很方便就能一些可复用的UI元素,抽离为单独的组件
- Vue如何创建组件:通过 .vue 文件,来创建对的组件:
template 结构
script 行为
style 样式 - React如何实现组件化:React中有组件化的概念,但是并没有像vue这样的组件模板文件;React中,一切都是以JS来表现得
为什么学习React
1.一切都基于JS并且实现了组件化开发的思想
2.开发团队实力强悍,不必担心断更的情况
3.社区强大
4.提供无缝转到ReactNative上的开发体验,让我们的技术能力得到拓展
2.React中的几个核心概念
虚拟DOM
1.DOM的本质:浏览器中的概念,用JS对象来表示页面上的元素,并且提供了操作DOM对象的API
2.什么是React中的虚拟DOM:是框架中的概念,用JS对象来模拟页面上的DOM和DOM嵌套
3.虚拟DOM的目的:实现DOM元素的高效更新
DOM树的概念(一个网页呈现的过程)
1.浏览器请求服务器获取页面的HTML代码
2.浏览器要在内存中,解析DOM结构,并在浏览器内存中,渲染出一颗DOM树
3.浏览器把DOM树呈现在页面上
如何实现页面的按需更新:获取内存中的新旧两颗DOM树,进行对比,得到需要被按需更新的DOM元素
如何过去到新旧DOM树,从而实现DOM树的对比呢?
**分析**浏览器中,并没有直接提供获取DOM树的API;因此,我们无法拿到浏览器内存中的DOM树;
我们可以手动模拟新旧两颗DOM树
如何手动模拟DOM树?
**如何模拟一个DOM元素**例如模拟<div id = "mydiv" title = "说实话">你是猪<p>嘻嘻</p></div>
var div = {
tagName: 'div',
attrs:{
id:'mydiv',
title:'说实话',
},
childrens:[
'你是猪',
{
tagName:'p',
attrs:{},
childrens:[
'嘻嘻',
]
}
]
}
我们手动模拟的这两课新旧的DOM树,就是React中虚拟DOM的概念
总结 什么是虚拟DOM:就是用JS对象的形式来模拟页面上DOM的嵌套关系
Diff算法(实现DOM树的高效对比)
tree diff :**新旧两棵 DOM树,逐层对比的过程,就是Tree Diff;当整棵DOM逐层对比完毕,则所有需要按需更新的元素,必然能够找到**;
component diff:**在进行Tree Diff的时候,每一层中,组件级别的对比,叫做Component Diff**;
如果对比前后,组件的类型相同,则**暂时**认为此组件不需要被更新;
如果对比前后,组件类型不同,则需要移除旧组件,创建新组建,并追加到页面上;
element diff:**在进行组件对的时候,如果两个组件的类型相同,则需要进行元素级别的对比,这叫做Elemen Diff;**
创建基本的WebPack4.X项目
1.运行 npm init -y快速初始化项目
2.在项目根目录创建src源代码目录和dist产品目录
3.在src下创建一个index.html
4.使用cnpm安装webpack,运行 cnpm i webpack -D
JSX
如果想在jsx中使用表达式,那么我们就需要把表达式放入一对{}中