react替换元素节点_React的基本原理

从开始接触React至今已有两年的时间，但是对我而言，仍然有些雾里看花的感觉：我们为什么要使用它？ React中有哪些概念、包含什么东西？

本文梳理一些React主要概念，希望能我们平时在使用过程中有更加清晰的认识，了解背后的原理。

• Virtual DOM（虚拟DOM）
• Basic render
• diff 算法
• setState
• 更新机制

为了在浏览器中使用react，我们需要引用两种类库：React和ReactDOM。React是用来创建视图的；ReactDOM是用来在浏览器中渲染UI的。

Virtual DOM

当浏览器载入HTML文档并渲染用户界面时，构成HTML文档的元素就是DOM（文档对象模型）

JS可以通过与浏览器交互并修改DOM，如：document.creatElement或document.appendChild。但是这样做非常低效，想要使用JS高效的管理DOM元素可能会变得复杂而又耗时。

React的初衷就是帮助用户更新浏览器的DOM，我们不再需要关心和构建复杂的高性能单页应用，这些都可以交给React。使用React后，我们不直接和DOM API打交道，取而代之的是Virtual DOM。

Virtual DOM实际上是JS对象，我们直接访问JS对象比访问DOM API高效的多。我们可以修改JS对象，然后React通过DOM API为用户尽可能高效地渲染这些变更。

Basic render

React元素

Virtual DOM是由React元素是构成的，创建React元素：

React

第一个参数表示我们希望创建的元素类型，第二个参数表示元素的特性，第三个参数表示元素的子节点。最终会生成：

<

⚠️ data-reactroot 是用来标记React元素的根节点的，用于渲染时跟踪元素。

在控制台打印该元素，会得到一个对象

ReactDOM

ReactDOM中包含React元素在浏览器中渲染所必需的工具，它负责与DOM API交互，将VirtualDOM渲染到浏览器中

const dish = React.creatElement('div', null, "hello")

const rootElement = document.getElementById("root");
ReactDOM.render(dish, rootElement);

ReactDOM.render()第一个参数表示希望渲染的节点，第二参数代表目标节点，即渲染的具体位置。

⚠️ 这里的root节点，是在HTML模板中定义的。HTML模板一般在 ./public/index.html

通过 Bebal编译，我们可以看到 React与 ReactDOM两者之间是如何配合的：

子节点

React是采用props.children渲染子元素的。上面我们讲到React使用data-reactroot标记根节点，其他的React元素都可以通过嵌套的方式合成到其中 。

使用数据构造元素

React的主要优点是它可以将数据和UI元素有效隔离。比如，我们要创建一个食材成分的无序列表：

React

成分列表中用到的数据，我们也可以使用数组映射到React元素上 ：

const 

⚠️ 通过遍历生成的React元素，需要指定一个key值，用来辅助React高效的更新DOM。

持续更新中......