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，随后渲染在页面中。