React1——JSX是什么

ReactDOM.render(...)

ReactDOM.render(...)是渲染方法： 参数是 要被渲染的虚拟ＤＯＭ元素和指定容器，相当于vue中的el

ReactDom.render(firstDom, document.getElementById('parent'))

JSX

React 使用 JSX 来替代常规的 JavaScript
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展

• JSX看起来像是把HTML结构直接写在js中，且不加引号的语法格式，它也允许HTML和js混写，看一个例子🌰：

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

• 它的解析规范是: 遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。
• 因此在JSX 中使用 JavaScript 表达式时表达式写在花括号 {} 中，举个例子🌰：

ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>
    ,
    document.getElementById('example')
);

• HTML 里的 class在 JSX 里要写成 className，因为class 在 JS 里是保留关键字。同理某些属性比如 for 要写成 htmlFor。
• 自定义属性时需要必须使用data-前缀
• 看一个在JSX中遍历数组的🌰：

const arr = ['巧豆皮', '猪肉脯', '猪肉粒', '八爪鱼', '烤鱼片', '臭豆腐', '小鱼仔', '小鸡腿', '手撕面包']

// 操作数组时，需要把key添加给循环最外层的元素
const fly = arr.map((item, index) => {
    return <h4 className = 'fly' key={index}>{item}</h4>
    })

ReactDom.render(<div>{fly}<div id="live"></div></div>, document.getElementById('first-dom'))

• JSX可以防止XSS攻击：ReactDOM渲染之前会进行转义,如果想要不经过转义，可以这样：

{/* 转义为html ,data.content是一些html代码*/}
<p dangerouslySetInnerHTML={{ __html: data.content }}  />