JSX ! ! !

1.什么是JSX

• Facebook起草的JS扩展语法
• 本质是一个js对象，会被babel编译，最终会被转换为React.createElement() 在转换成react节点对象
• 每个JSX表达式，有且仅有一个根节点
• 每个JSX元素必须有结束 (XML规范) ##1. Facebook起草的JS扩展语法

var h1 = (<h1 title="属性">hello word</h1>)

2. 本质是一个js对象，会被babel编译，最终会被转换为React.createElement() 在转换成react节点对象

之后会调用ReactDOM.render函数渲染成真实的dom元素

3. 每个JSX表达式，有且仅有一个根节点

这样写是错误的

因为jsx会被编译为虚拟dom树 树~ 自己想想
可以用React.Fragment 或 "<></>" 包裹

4.每个JSX元素必须有结束 (XML规范)

或者自动闭合

2.在JSX中嵌入表达式

• 在jsx中使用注释
• 将表达式作为内容的一部分
  
  • null 、 undefined、false不会显示
  • 普通对象，不可以作为子元素
  • 可以放置React元素对象
• 将表达式作为元素属性
• 属性使用小驼峰命名法
• 防止注入攻击
  
  • 自动编码
  • dangerouslySetinnerHTML

1.在jsx中使用注释

2.将表达式作为内容的一部分

• null 、 undefined、false不会显示

已经渲染成了react节点 但是没有render到页面上

• 2. 普通对象，不可以作为子元素

• 3. 可以放置React元素对象

3. 将表达式作为元素属性

4.属性使用小驼峰命名法

5.防止注入攻击

使用innerText进行赋值的

• 自动编码

• dangerouslySetInnerHTML

3 元素的不可变性

• 虽然JSX元素是一个对象，但是该对象中的所有属性不可更改
• 如果确实需要更改元素的属性，需要重新创建JSX元素 内部使用Object.freeze(obj)冻结对象
  只能直接改变