react-3 JSX 语法
JSX简介
简介：
- Reac的核心机制之一就是可以在内存中创建虚拟的DOM元素， React利用虚拟DOM来减少对实际
DOM的操作从而提升性能。 - JSX是React的核心组成部分，它使用XML 标记的方式去直接声明界面，界面组件之间可以互相嵌
套。可以理解为在JS中编写与XML类似的语言，一种定义带属性树结构 (DOM结构)的语法，它的目
的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。 - react将XML语法直接加入JS中通过代码而非模板来高效的定义界面。之后JSX通过翻译器转换为纯
JS再由浏览器执行。在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript, JSX的语法不
会带来任何性能影响。另外，由于JSX只是种语法， 因此JavaScript的关键字class, for等也不能出
现在XML中，而要如例子中所示，使用className, htmilFor代替，这和原生DOM在JavaScript中的创
建也是一致的。JSX只是创建虚拟DOM的一种语法格式而已，除了用JSX，我们也可以用JS代码来创建
虚拟DOM.
jsx的本质 ：
创建JSX语法的本质目的是为了使用基于xml的方式表达组件的嵌套，保持和HTML一致的结构，
语法上除了在描述组件上比较特别以外，其它和普通的Javascript没有区别。
并且最终所有的 JSX 都会编译为原生Javascript.
JSX语法规则
创建虚拟dom的两种方法
- jsx方式
- React原生方式
JSX方式
编程步骤：
（1）创建虚拟节点
const VDOM=<h1 id="test">hello</h1>
（2）将虚拟DOM渲染到页面
ReactDOM.render(
VDOM
,
document.getElementById('root')
);
注意事项
-
全称: javascript XML
-
React定义的一种类似与XML的打展语法js+xml
-
本质是React createElement(component pops, ... children)方法的语法糖
-
作用:用来简化创建虚拟dom
a. 写法: var ele= <h1>hello</h1>
b. 注意 (1):它不是字符串，也不是html/xml标签
C. 注意 (2):它最终产生的就是一个js对象 -
标签名任意: htm标签或其他标签
JSX特别接近于JavaScript，而不是HTML，因此在编写它的时有一些关键的区别需要注意：
- 使用className替代class添加css类，因为class是JavaScript的保留关键词
- 在JSX中的属性和方法使用小驼峰命名 —— onclick 将会变成 onClick
- 单标签(闭标签)必须使用斜杠(/)结束 ——
JavaScript表达式可以在大括号中嵌入JSX，包括变量、方法和属性。
const name = 'Tania'
const heading = <h1>Hello, {name}</h1>
JSX比使用原生JavaScript创建和添加大量元素更容易编写和理解，这也是人们如此喜欢React的原因之一。
JSX的数组操作
JSX允许在模板中插入数组，数组会自动展开所有成员
基本语法：
var arr=["html",'"JavaScript","css"];
const VDOM=<h1>{arr}</h1>
ReactDOM.render(VDOM,document.getElementById('root'));
示例：利用模板里的数组会展开的特性，可以在里面套入元素。
var arr=[<li>1</li>,<li>2</li>,<li>3</li>,<li>4</li>,<li>5</li>]
ReactDOM.render(
<div>
<NavList></NavList>
<ul>{arr}</ul>
</div>,document.getElementById('root')
);
输出：
React原生方式
var Vdom=React.createElement("h1",{id:'test'},'hello'); //原生方式创建
ReactDOM.render(VDOM,document.getElementById('root'));
参数讲解：
- 第一个参数：标记
- 第二参数：属性（id或者class）
- 第三个参数：标记里的内容
不过不建议在使用这种方法
react 组件的创建
react推出后，出现了两种定义组件的方法
- 函数式组件
- 类式组件
函数式组件
做纯展示型组件
函数式组件无状态
返回的是虚拟dom
简介
语法
无状态函数式组件形式上表现为一个只带有return的函数，通过函数形式或者ES6 箭头函数的形式创建，并且该组件是无
state状态的。
function NavList() {
return (
<div>
<Nav></Nav>
<Login> </Login>
</div>
)
}
注：函数首字母必须大写，函数必须带返回值。
函数式组件的特点：
（函数式组件与类式组件的区别）
- 组件不能访问this对象
- 组件不能访问生命周期方法
- 无法访问state，只能访问输入的props，同样的props会得到相同的渲染结果，不会有副作用。
为什么不能访问this。
函数有react调用，调用过程中，babel会将jsx装换为js，这是会开启严格模式。
严格模式规定全局模式自定义的 函数中的this不能指向window，所以this的结果是undefined
类式组件
基本语法：
使用可创建组件，必须继承react内置的一个组件 React Component
class MyDom extends React.Component{
constructor{
super()
}
render(){
return(<h1>hello</h1>)
}
}
ReactDOM.render(MyDOM,mountNode)
注意：
- 使用类创建组件，必须继承react内置的一个组件
- constructor()方法可以省略
- 必须要有render()方法，用于生成虚拟dom，该方法被定义在类的原型对象上，供实例使用
- 实例在哪？实例在编程中并没有显示的呈现，但在将虚拟DOM渲染到页面上时，会实例化，在内存中。
使用了ReactDOM.render()之后发生了什么？
（1）React解析组件标签，找到组件
（2）发现组件是一个类定义的组件，随后new出来一个实例，并调用实例的原型上的render方法
（3）调用render后，将该方法返回的虚拟dom转换为真实的dom，随后显示在页面中
注：render中的this指向该类创建的实例对象。
React类组件中自定义的方法函数中的this丢失问题
正常情况下，方法中的this指向类实例化后的对象，但是如果此方法没有被类直接调用，而是作为回调函数传给react直接使用，此时的this不会指向window，而是指向undefined，因为类中的方法在定义时默认 开启了严格模式
函数式组件只能操作props，不能操作state和refs；但是类组件全都能玩。
