react虚拟dom创建和jsx语法基础

react虚拟dom创建和jsx语法基础

前言

react不会让你对真实dom操作，首先要创建虚拟dom
然后每次更新从最外层标签进行对比只更新修改了的dom，大大提高渲染效率。

虚拟dom创建

• jsx语法创建

const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
			<h1 id="title">
				<span>Hello,React</span>
			</h1>
		)
		//2.渲染虚拟DOM到页面

ReactDOM.render(VDOM,document.getElementById('test'))

• js语法创建

//1.创建虚拟DOM
const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))

jsx语法基础

jsx解释

JSX是JavaScript XML的简写表示了在JavaScrit代码中写XML（HTML）格式的代码.
优势：声明式语法更加直观，与HTML结构相同，降低学习成本，开发效率。

JSX是react的核心内容

jsx不是标准的js语法，是js的语法扩展，脚手架内置的@babel/plugin-transform-react
jsx包，用来解释该语法。

jsx语法规则

jsx语法规则：
	1.定义虚拟DOM时，不要写引号。
	2.标签中混入JS表达式时要用{}。
	3.样式的类名指定不要用class，要用className。
	4.内联样式，要用style={{key:value}}的形式去写。
	5.只有一个根标签
	6.标签必须闭合
	7.标签首字母
		(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
		(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

js表达式和js语句的区别

一定注意区分：【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:xxxx}