React —— JSX和React DOM和浏览器DOM

JSX和React DOM和浏览器DOM

JSX

JSX 是 JavaScript的语法扩展，用来描述UI应该呈现出它应有交互的本质形式。

在UI中需要绑定事件、数据变化时候需要通知到UI，以前渲染数据到UI的，通过JSX能很直观的表示出来。并且JSX的写法打破传统的将标记与逻辑进行分离到这种分离形式，而是将二者同时存放在一个单元组件中，来实现关注点分离，也就是模块化。

在JSX中嵌入表达式

   const name = 'Josh Perez';
   const element = <h1>Hello, {name}</h1>;

在JSX中，我们可以使用{}嵌入任意变量和JS表达式。

为了便于阅读，我们会将 JSX 拆分为多行。同时，我们建议将内容包裹在括号中，虽然这样做不是强制要求的，但是这可以避免遇到自动插入分号陷阱。

JSX也是一个表达式

编译之后，JSX表达式会被转化成普通的 JavaScript函数调用，并且对其取值后会得到js对象。所以我们可以像使用其他js表达式一样，讲jsx复制给变量，当做参数传递给函数以及作为函数的返回值。

JSX特定属性
因为jsx的语法上更接近与js，所以jsx中属性的命名使用camelCase(小驼峰命名)，而不是使用HTML属性名称的命名约定。
可以使用引号指定属性的值为字符串字面量。

const element = <img className="name" >

也可以使用{}为属性嵌入js表达式：

const src = '';
const element = <img className="name" src={src}>

使用 JSX 指定子元素

假如一个标签里面没有内容，可以使用/>来闭合标签，就是XML语法一样，如果内部有内容，可以包含多个子元素，但是最外层只能有一个元素包裹。

JSX防止注入攻击

JSX在渲染所有输入内容之前，会默认进行转义，所以可以确保不会注入那些非自己编写的呢日用。所有内容在渲染之后都被转换成了字符串。这样就可以有效的防止XSS攻击。

React DOM

babel会把JSX转译成一个名为 React.creatElement()函数来调用，以下两种表示完全等价：

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

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

React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个用来描述浏览器DOM的JS对象.

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

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

浏览器DOM

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 以树结构表达 HTML 文档。

也即是说，浏览器DOM包括了我们页面上看见的一个一个的元素和操作他们的方法，并且每一个DOM相互结合成一颗DOM树。所以我们直接修改一个DOM（读取某些属性）都会引起整个文档一起变化（重绘和重排），这无疑会增加性能负担和代价。

三者的关系

JSX是一种描述的语法，经过babel之后转化为了React DOM，React DOM 对应描述了真是DOM的所有属性， 通过ReactDOM.render()将它渲染到浏览器页面上。

需要注意的是：React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。