学习日记

React学习记录

1.React简介

React起源于Facebook的内部项目,2013年5月开源，没有断层

React和Vue对比

组件化方面

1. 什么是模块化：从代码的角度来进行分析；把一些可复用的代码，抽离为单个模块，便于项目的维护和开发；
2. 什么是组件化：是从UI界面的角度来进行分析；把一些可复用的UI元素，抽离为单独的组件；
3. 组件化的好处：随着项目规模的增大，手里的组件越来越多，很方便就能一些可复用的UI元素，抽离为单独的组件
4. Vue如何创建组件：通过 .vue 文件，来创建对的组件：
   template 结构
   script 行为
   style 样式
5. 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中使用表达式，那么我们就需要把表达式放入一对{}中