2-1 初识JSX

什么是JSX

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

import React from 'react';
import ReactDOM from 'react-dom';
//根节点
var div=(
  <div>
      <p>今天星期六</p>
      <p>明天星期天</p>
  </div>
)

//有根节点，并不会反映到真实的dom上
var div=(
  <>
      <p>今天星期六</p>
      <p>明天星期天</p>
  </>
)


React.createElement('div',{})
ReactDOM.render(div,document.getElementById('root'))

在JSX中嵌入表达式

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

import React from 'react';
import ReactDOM from 'react-dom';

const content = "<h1>afasfasfd</h1><p>阿斯顿法定发送</p>";
const div = (
  <div dangerouslySetInnerHTML={{
      __html: content
  }}>
  </div>
);

ReactDOM.render(div, document.getElementById("root"));

元素的不可变性

• 虽然JSX元素是一个对象，但是该对象中的所有属性不可更改
• 如果确实需要更改元素的属性，需要重新创建JSX元素