React 核心概念（1）

React 核心概念（1）

 

1.初识 JSX

 

1.1 JSX 简介

 
首先我们给出 JSX 的一个简单示例：

const element = <h1>Hello, world!</h1>;

 
上面的标签语法既不是字符串也不是 HTML。

 
这就是 JSX ，是一个 JavaScript 的语法扩展。React 建议书写代码时配合 JSX 。JSX 可以很直观的描述 UI ，并且具有 JS 的全部功能。

 
JSX 本质上 只是调用 React.createElement(component, props, …children) 的语法糖。我们当然可以不使用 JSX 。例如本小节一开始的简单示例，也可以这样写：

const element = React.createElement('h1', null, "Hello, world!");

当 UI 比较复杂时，使用 React.createElement() 的方式会让编程效率大大降低。

 
React 并不强制要求使用 JSX，但是在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

 
简单来讲，使用 JSX 是为了更加方便书写程序。

 
注：在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。（这一点后面会展开说明）

 

1.2 JSX 使用

 

1.在 JSX 中嵌入表达式

 
在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。

// 示例1
const objectTo = "world";
const element1 = <h1>hello, {objectTo}</h1>; // hello, world

// 示例2
const element2 = <h1>{1 + 1}</h1>; // 2

// 示例3
const renderUser = (address) => {
  return '在' + address + '读书';
}
const element3 = <h1>Jack, {renderUser('北京')}</h1>; // Jack, 在北京读书

// 其他情况就不一一列举了

 

2.在 JSX 上定义属性名称

 
采用小驼峰命名法

const element = <h1 className="name">Hello, world!</h1>;

 

3.使用 JSX 的安全性

 
React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。（引自： JSX 防止注入攻击 )

const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;

 

1.3 JSX 如何工作

 
在 1.1 小节中我们说过，JSX 是调用 React.createElement(component, props, …children) 的语法糖。

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

 
因此下面两种写法是一样的：

const element = <h1 className="title">>Hello, world!</h1>;

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

 
那么，React.createElement() 这个函数做了什么呢？

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

const element = {
  type: 'h1',
  props: {
    className: 'title',
    children: 'Hello, world!'
  }
};

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

 
这就是在 1.1 小节的注 中讲到的，在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。

 
注：请先暂时对为什么 React.createElement() 要去创建这样一个对象保留疑问，在后面涉及虚拟 DOM 及 Diff 算法时，会详细阐述。

 

2.元素渲染

 
在 初识 JSX 第三小节中，我们得知了 React.createElement() 函数会创建这样一个对象：

const element = {
  type: 'h1',
  props: {
    className: 'title',
    children: 'Hello, world!'
  }
};

 
此对象被称为：React 元素，而元素是构成 React 应用的最小砖块。

 

2.1 将一个元素渲染为 DOM

 
想要将一个 React 元素渲染到某 DOM 节点中，只需把它们一起传入 ReactDOM.render()；

 
例如已知根节点标签 id 为 root，那么将 element 渲染到根节点中示例如下：

const element = <h1>Hello, World！</h1>;
ReactDOM.render(element, document.getElementById('root'));

 

2.2 更新行为

 
React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

 
根据已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

 
DOM 操作是很耗费性能的行为，因此 React DOM 只会更新它需要更新的部分。

 
注：这里也涉及到虚拟 DOM 与 Diff 算法的内容，请暂时按耐住好奇心，先明确一点：React DOM 只会更新它需要改变的部分 即可。后面讲到虚拟 DOM 与 Diff 算法时，会再一次提及此话题。