React入门-JSX和虚拟dom

1.JSX理解

举例：

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

这被称为 JSX，是一个 JavaScript 的语法扩展。建议在 React 中配合使用 JSX，JSX 能够生成 React “元素”，并且JSX 能够很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会令人联想到模版语言，但它具备 JavaScript 的所有功能。

为何用JSX?

React 认为渲染逻辑本质上与其余 UI 逻辑内在耦合，好比，在 UI 中须要绑定处理事件、在某些时刻状态发生变化时须要通知到 UI，以及须要在 UI 中展现准备好的数据。

React 并无采用将标记与逻辑进行分离到不一样文件这种人为地分离方式，而是经过将两者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。

React 不强制要求使用 JSX，可是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一块儿时，会在视觉上有辅助做用。它还可使 React 显示更多有用的错误和警告消息。

在 JSX 中嵌入表达式

下面的例子声明了一个名为 name 的变量，而后在 JSX 中使用它，并将它包裹在大括号中：

const name = 'Josh Perez'; const element = <h1>Hello, {name}</h1>;
 ReactDOM.render( element, document.getElementById('root') );

在 JSX 语法中，你能够在大括号内放置任何有效的 JavaScript 表达式。例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。

 

下面的示例调用 JavaScript 函数 formatName(user) 的结果，并将结果嵌入到 <h1> 元素中。

function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}!
  </h1>
); ReactDOM.render( element, document.getElementById('root') );

JSX 也是一个表达式

在编译以后，JSX 表达式会被转为普通 JavaScript 函数调用，而且对其取值后获得 JavaScript 对象。也就是说，你能够在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 看成参数传入，以及从函数中返回 JSX。示例以下：

function getGreeting(user) { if (user) { return <h1>Hello, {formatName(user)}!</h1>;
 } return <h1>Hello, Stranger.</h1>;
}

JSX 具备特定属性

能够经过使用引号，来将属性值指定为字符串字面量：

const element = <div tabIndex="0"></div>;

也可使用大括号，来在属性值中插入一个 JavaScript 表达式：

const element = <img src={user.avatarUrl}></img>;

在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号。应该仅使用引号（对于字符串值）或大括号（对于表达式）中的一个，对于同一属性不能同时使用这两种符号。

注意：

由于 JSX 语法上更接近 JavaScript 而不是 HTML，因此 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。

使用 JSX 指定子元素

假如一个标签里面没有内容，你可使用 /> 来闭合标签，就像 XML 语法同样：

const element = <img src={user.avatarUrl} />;

JSX 标签里可以包含不少子元素:

const element = ( <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

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应用的最小砖块。

接下来介绍将 React 元素渲染为 DOM。

2.虚拟DOM

什么是虚拟DOM?

在 React 中，render 执行的结果获得的并非真正的 DOM 节点，结果仅仅是轻量级的 JavaScript 对象，咱们称之为 virtual DOM。

虚拟 DOM 是 React 的一大亮点，具备 batching(批处理) 和高效的 Diff 算法。这让咱们能够无需担忧性能问题而” 毫无顾忌” 的随时“ 刷新” 整个页面，由虚拟 DOM 来确保只对界面上真正变化的部分进行实际的 DOM 操做。在实际开发中基本无需关心虚拟 DOM 是如何运做的，可是理解其运行机制不只有助于更好的理解 React 组件的生命周期，并且对于进一步优化 React 程序也会有很大帮助。

与浏览器的 DOM 元素不一样，React 元素是建立开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

(我的理解：虚拟DOM是由javascript构建的文档树，而真实的DOM是由HTML绘制的文档树。传统的页面发生改变时，会引发DOM页面的重绘，下降效率。而在react中，当内容发生改变时，会触发对应javascript控制的树节点对象的改变，从而控制局部页面元素的刷新。更通俗的比较就是：传统的页面渲染是内容变化触发页面DOM的总体刷新，而react则是内容变化触发javacript虚拟DOM对象改变，进而控制页面DOM局部刷新)

将一个元素渲染为 DOM

 假设你的 HTML 文件某处有一个 <div>：

<div id="root"></div>

其被称为“根” DOM 节点，由于该节点内的全部内容都将由 React DOM 管理。

仅使用 React 构建的应用一般只有单一的根 DOM 节点。若是你在将 React 集成进一个已有应用，那么你能够在应用中包含任意多的独立根 DOM 节点。

若是想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一块儿传入 ReactDOM.render()：

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

更新已渲染的元素

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

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

 注意：在实践中，大多数 React 应用只会调用一次 ReactDOM.render()

 React 只更新它须要更新的部分

React DOM 会将元素和它的子元素与它们以前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。

 

react中文文档：https://zh-hans.reactjs.org/docs/hello-world.html

react开发者工具：https://github.com/facebook/react-devtools

react小型表单库：https://jaredpalmer.com/formik/docs/overview

javascript高阶知识:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

在线编写react练习：https://codepen.io/pen/?&editable=true

！以上是学习react可能会用到的知识文档，学习一门新技术的最好途径就是阅读官方文档+实际动手操做