景风

Appearance

React JSX ​

概述 ​

JSX全称JavaScript XML, React定义的一种类似于XML的JS扩展语法

JS + XML本质是React.createElement(component, props, ...children)方法的语法糖

作用 ​

用来简化创建虚拟DOM

  • 写法
jsx
const VDOM = <h1>Hello JSX</h1>

注意

  • 不是字符串也不是HTML/XML标签
  • 最终产生的就是一个JS对象

标签 ​

  • 标签名任意, HTML标签或其他标签
  • 标签属性任意, HTML标签属性或其他

Babel 的作用 ​

  • 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能执行
  • 只要用了JSX, script标签都要加上type="text/babel", 声明需要babel来处理

渲染虚拟 DOM ​

将虚拟DOM元素渲染到页面中的真实容器DOM中显示

  • 语法
jsx
/**
 * 渲染虚拟 DOM 到容器
 * virtualDOM: 纯 JS 或 JSX 创建的虚拟 DOM 对象
 * containerDOM: 用来包含虚拟 DOM 元素的真实 DOM 元素对象, 一般是一个 div
 */
ReactDOM.render(virtualDOM, containerDOM);

语法规则 ​

  1. 定义虚拟DOM时, 不要写引号
  2. 标签中混入JS表达式时要使用{}
    • ⚠️ 区分表达式与语句的区别: 表达式会产生一个值, 可以放在任何一个需要值的地方
  3. 样式的类名指定不要用class, 要使用className
  4. 内联样式要使用style={ { key: value } }的形式去写
  5. 只有一个根标签
  6. 标签必须闭合
  7. 标签首字母:
    1. 如果小写字母开头, 则将该标签转为html中同名元素, 若html中无改标签对应的同名元素则报错
    2. 若大写字母开头, React就去渲染对应的组件, 若组件没有定义则报错
  • 代码示例
jsx
const id = 'Miller'
const data = 'Hello JSX'
// 1. 创建虚拟 DOM
const VDOM = (
  <div>
    <h1 id={id.toLowerCase()} className="title">
      <span style={{ color: '#F00', fontSize: '50px' }}>{data.toUpperCase()}</span>
    </h1>
    <h2 id={id.toUpperCase()} className="title">
      <span style={{ color: '#F00', fontSize: '50px' }}>{data.toLowerCase()}</span>
    </h2>
    <input type="text" />
    <Good>123</Good>
  </div>
);
// 2. 渲染虚拟 DOM 到页面
ReactDOM.render(VDOM, document.getElementById("app"));

JSX 练习 ​

注意区分JS语句与JS表达式

  • 表达式: 一个表达式可以产生一个值, 可以放在任何一个需要值的地方

使用JSX渲染一个数组

  • 代码示例
jsx
const list = [ 'Angular', 'React', 'Vue' ]
// 1. 创建虚拟 DOM
const VDOM = (
  <div>
    <h1>前端框架</h1>
    <ul>
      { list.map((i, _i) => <li key={ _i }>{ i }</li>) }
    </ul>
  </div>
);
// 2. 渲染虚拟 DOM 到页面
ReactDOM.render(VDOM, document.getElementById("app"));