2021-07-23

关于虚拟DOM本质是Objec的对象（一般对象 ）

//创建虚拟DOM
const VDOM = <h1>abch1>
//渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById("example"))
console.log("虚拟DOM",VDOM)
//输出为虚拟DOM，Object
console.log(typeof VDOM)
// Object
consloe.log(VDOM instanceof Object)
// true

虚拟 DOM比较"轻"，真实DOM比较"重" ,因为虚拟DOM是React内部在用，无需真是DOM上那么多属性。
虚拟DOM最终会被React转换成真实的DOM，呈现在页面上。

JSX语法规则：
1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时用{}。

const myId = 'codeyang'
const myData = 'Hello,React'

const VDOM = (
	<h1 id={myId.toLowerCase()}>
	//toLowerCase，转换成小写；toUpperCase,转换成大写
	<span>{myData.toLowerCase()}span>
	h1>
)
ReactDOM.render(VDOM,document.getElementById('example'))

3.样式的类名指定，不要用class，要用className

<style>
.title{
  backgroundcolor:orange;
  width:200px;
}
style>
const VDOM = (
	<h1 className='title'>
	<span>abcspan>
	h1>
)
ReactDOM.render(VDOM,document.getElementById('example'))

4.内联样式的使用，style={{key:value}}的形式去写

<span style={{color:white,fontsize:50px}}>abcspan>

5.虚拟DOM只能有一个根标签
6.标签必须闭合
7.标签首字母
（1）若小写字母开头，则将改标签为html中的同名元素，若无该标签对应的同名原色，则报错。
（2）若大写字母开头，React将会渲染对应的组件，若组件没有定义，则报错。
注意：一定区分JS语句（代码）与JS表达式的区别
1.表达式：一个表达式会产生一个值，可以放在任何需要值的地方。
下面这些都是表达式
（1）a
（2）a+b
（3）demo（1）
（4）arr.map（）
（5）function test(){}
2.语句（代码）：
下面这些都是语句（代码）
（1）if
（2）for
（3）switch(){case:…}

模块与组件、模块化与组件化的理解
1.模块
(1)理解：向外提供一些特殊功能的js程序，一般就是一个js文件
(2)为什么要拆分成模块：随着业务逻辑增加，代码越来越多且复杂。
(3)作用：复用js，简化js的编写，提高js运行效率。

2.组件
(1)理解：用来实现局部功能效果的代码和资源的集合（html/css/js/img等等）
(2)为什么：一个界面的功能更复杂
(3)作用：复用编码，简化项目编码，提高运行效率。

3.模块化
当应用的js都以模块来编写，这个应用就是一个模块化应用。

4.组件化
当应用是以多组件的方式实现，这个应用就是一个组件化的应用。

函数式组件：
1.创建函数时组件

function Demo(){
 return <h1>我是用函数定义的组件h1>
}

2.渲染组件到页面

ReactDOM.render
(<Demo/>,document.getElementById('example'))

执行了ReacDOM.render之后发生了什么？
1.React解析组件标签，找到了Demo组件。
2.发现组件是使用函数定义的，然后调用该函数，讲返回的虚拟DOM转为真实的DOM，随后渲染在页面中。