React初级学习——3 JSX

JSX：是一种Javacsript语言的语法扩展，看起来像模板语言，但具有JS的全部功能
价值：可以更好的呈现UI的交互本质
JSX用于生成React‘元素’
小结：通过JSX，灵活的将JS变量注入到Dom中，融合使用

语法：

1. {}
   在大括号内，可以放置任意的Javascript表达式，如 2+2 或 func(user) 或 user.firatName
2. 灵活运用JSX表达式，在if、for循环中都可以使用
3. JSX中Dom属性的定义：要么大括号括起来，通过JS表达式取值，要么双引号括起来赋值固定的字符串
   e.g.:

const element = 
Hi
;
//React Dom使用小驼峰定义属性名称，class为className，tabindex为tabIndex

JSX与React元素(虚拟Dom)：
JSX被Babel转译为React.createElement()函数调用

const element = 
Hello

等价于：

const element = React.createElement(
  'h1',
  {className='greet'},
  'Hello'
)

React.createElement会创建一个对象，即React元素，简化后结构如下：

const element = {
  type:'h1',
  props: {
    className:'greet',
    children: 'Hello'
  }
}
//以上这个对象便称为React元素，React通过读取这些对象，构建Dom和完成实时更新
//以上对象便是一个虚拟Dom