React学习一 —— 虚拟DOM和JSX语法规则

虚拟DOM

React 使用JSX编写react程序，这个是JS的一种扩展，在兼容JS的同时提供了一些扩展写法，就如下面的创建虚拟DOM。

React 核心思想之一在于减少开发者对文档流对象DOM的直接操作，因为原生JS对DOM的直接操对性能影响很大，会使用户体验下降，所以可以使用JSX和React的一些API创建虚拟DOM，开发者操作虚拟DOM进行页面操作，只有等最终渲染的时候，才会将React的虚拟DOM翻译成浏览器可以看懂的真实DOM。

一、Helloworld

创建虚拟DOM

const vdom = <h1>Hello World</h1>

渲染虚拟DOM到页面

ReactDOM.render(vdom,document.getElementById('test'));

二、虚拟DOM的两种创建方式

2.1 使用JSX

和上面那个Helloworld一样。

2.2 使用原始JS

// const vdom = React.creaeteElement(标签名，标签属性，标签内容)
const vdom = React.creaeteElement('h1', {id: "title"}, 'hello react');
ReactDOM.render(vdom);

2.3 JSX优势

使用原生JS，创建嵌套标签需要无限嵌套调用createElement，异常繁琐，所以根本不会使用原生JS去调API创建虚拟DOM。

而且JSX还有一个好用的写法：

const vdom = (
    <h1>
    	<span>hello</span>
    </h1>
)

2.4 虚拟DOM是什么

1. 本质是Object类型的一个对象（一般对象）
2. 虚拟DOM身上的属性比真是DOM少多了——因为虚拟DOM只是React内部使用，有很多属性和方法都不需要
3. 虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

JSX语法规则

一、JSX

全称 JavaScript XML。

XML / JSON

XML早起用于存储和传输数据，类型和HTML很像，但是这样写会导致很多时候，标签结构比需要传输的内容都更加复杂，所以现在被JSON替代了。

JSON具有两个方法parse和stringfy，可以快捷将JSON在字符串和对象之间转化。

是React定义的一种类似于XML的JS扩展语法：JS + XML

二、JSX语法规则：

2.1 创建虚拟DOM

创建虚拟DOM的时候不需要加引号：

const vdom = <h1>...</h1>

2.2 使用变量

JSX变量和表达式都可以通过大括号的形式书写

const name = "TOM",
const dom = (
	<h1>{ name.toLowerCase }</h1>
)

2.3 CSS-class

如果要在虚拟DOM中写class样式，那么不能使用class，而是要用className这个属性，因为class是一个关键字，使用className代替css类可以避免冲突。

const dom = <h1 className="title">title</h1>

2.4 CSS-style

如果想使用内联样式，那么不能直接和HTML一样书写style属性，而是要用双引号：

const dom = <h1 style={{width:100px}}>title</h1>

原生style中写的都是一个一个键值对，那么可以这么理解为什么要用双括号了：最外面的括号代表里面的是一个JSX表达式，而里面的括号加上键值对，表示这是一个CSS样式对象。如果需要使用font-size这种，需要使用小驼峰即fontSize。

2.5 根标签

一个虚拟DOM不能有多个根标签！！！

2.6 标签必须闭合

标签必须闭合，如果没有内容，需要自闭合。（和html差不多）

2.6 标签首字母

1. 开头字母小写，这视图转为html标签，如果没有找到，就报错
2. 开头字母大写，则去渲染对应组件，如果没有组件，就报错

2.7 表达式或者语句

在虚拟DOM中使用自定义变量或者JSX的时候需要用一个大括号包裹，但是这里面只能写表达式，而不能写语句，那么二者有什么区别呢？

表达式

一个表达式会产生一个值，可以放在任何一个需要值的地方：

• 变量：a
• a + b
• demo(1)
• arr.map()
• …

可以读取到值的，不管是null还是undefined，还是有意义的值，只要能读取到值就可以成为表达式

语句

• if
• for
• switch
• …

控制代码走向，而没有返回值。