react 中 jsx 是什么呀?

jsx 是什么?

JSX 就是 JavaScript 和 xml 结合的一种格式. 是一个 JavaScript 的语法扩展.

React 发明了 JSX, 利用 html 语法来创建虚拟 DOM. 当遇到 <,JSX 就当 HTML 解析, 遇到 {就当 JavaScript 解析.

JSX, 是一个 JavaScript 的语法扩展. JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式.

JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖

JSX 将 xml 语法直接加入 JS 中, 通过代码而非模板来高效的定义界面. 之后 JSX 通过翻译器转换为纯 JS 再由浏览器执行. 在实际开发中, JSX 在产品打包阶段都已经编译成纯 JavaScript,JSX 的语法不会带来任何性能影响. 另外, 由于 JSX 只是一种语法, 因此 JavaScript 的关键字 class, for 等也不能出现在 xml 中, 而要如例子中所示, 使用 className, htmlFor 代替, 这和原生 DOM 在 JavaScript 中的创建也是一致的. JSX 只是创建虚拟 DOM 的一种语法格式而已, 除了用 JSX, 我们也可以用 JS 代码来创建虚拟 DOM.

JSX 表示对象

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用.

const element = (
   <h1 className="greeting">
     Hello, world!
   </h1>
);

等效

const element = React.createElement(
  'h1',
   {className: 'greeting'},
  'Hello, world!'
);

React.createElement() 会预先执行一些检查, 以帮助你编写无错代码, 但实际上它创建了一个这样的对象:

// 注意: 这是简化过的结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

这些对象被称为 "React 元素". 它们描述了你希望在屏幕上看到的内容. React 通过读取这些对象, 然后使用它们来构建 DOM 以及保持随时更新.

更多 react 的相关知识, 可访问: web 前端课程 https://www.html.cn/ !!

来源: http://www.css88.com/qa/react/18037.html