什么 "Mounting" 在 React js?

主要任务 React 这是要了解如何改变 DOM, 对应于组件想要在屏幕上可视化的事实。

React 是的 "mounting" /添加节点B. DOM/, "unmounting" /删除它们 DOM/ 和 "updating" /已经位于的节点修正案 DOM/.

作为一个节点 React 发布为节点 DOM 在树中出现在哪里，在树中 DOM, 受控
https://facebook.github.io/rea ... .html
. 为了更好地了解正在发生的事情，看看最简单的例子：

// JSX version: let foo = <foocomponent></foocomponent>;

let foo = React.createElement/FooComponent/;

那么是什么

foo

你能做什么？

foo

, 目前，这是一个简单的对象 JavaScript, 这看起来像这样 /简化/:

{

 type: FooComponent,

 props: {}

}

目前，页面上不是任何地方，即，它不是一个元素 DOM, 不存在树中的任何地方 DOM 并且，除了它是一个元素节点 React, 文档中没有其他有意义的演示文稿。

他只是说 React, 什么

必须

屏幕上

如果一个

这个元素 React 将可视化。

这仍然没有 "mounted".

你可以说反应 "mount" 他的容器 DOM 用电话：

ReactDOM.render/foo, domContainer/;

它说 React, 是时候展示了

foo

在页面上。 React将创建类的实例并导致IT方法

FooComponent

render

. 假设他是渲染

<div></div>

, 在这种情况下 React 为他创造一个结

div

DOM 并将其插入容器中 DOM.

这个创建实例和节点的过程 DOM, 相应的组件 React, 并插入它们 DOM 被称为诱拐。

请注意，您通常只打电话

ReactDOM.render//

-mount 根组件。 你不需要手动 "mount" 女儿组成部分。 每次 , 当父组件原因时

setState//

及其方法

render

说必须首次可视化特定的子元素， React 自动将此子元素转换为其父元素。

React - 这是

同构 / 普遍的

结构体。 这意味着组件树的虚拟呈现。 UI, 它与实际渲染分开，它在浏览器中显示它。 从文档中：

React 太快，因为他从不谈论 DOM 直接地。 React 支持快速观点 DOM 心里。

但是，内存中的此演示文稿未直接连接到 DOM 在浏览器中 /虽然被称为 Virtual DOM,

什么是不成功和混乱的名称

对于通用应用程序平台/, 这只是一个类似的数据结构，表示整个组件层次结构 UI 和其他元数据。 Virtual DOM - 这只是实现的详细信息。

"我们相信真正的基础 React - 这只是组件和元素的想法：能够描述您想要可视化声明方式的内容。 这些是所有这些不同包装的部分。 部分 React, 具体的渲染目的通常不是我们思考的想法 React". - React JS Blog

因此 , 结论是

React 它是渲染不可知论者

, 这意味着他并不关心最终结果是什么。 它可以是一棵树 DOM 在浏览器中，可能是 XML, 自己的组件或 JSON.

"当我们看看这样的包装 react-native, react-art, react-canvas 和 react-three, 美丽和精华变得明显 React 与浏览器无关 DOM".

现在你知道它是如何工作的 React, 容易回答你的问题 :/

配件

- 这是将组件的虚拟表示输出到最终表示中的过程 UI /例如， DOM 或自己的组件/.

在浏览器中，它意味着元素的输出 React 在实际元素中 DOM /例如，元素 HTML

div

或者

li

/ 在树上 DOM. 在本机应用程序中，这将意味着元素的输出响应其自己的组件。 您还可以编写自己的渲染器和显示组件。 React 在 JSON, XML 甚至 XAML, 如果你有足够的勇气。

所以安装/拆除处理程序对于申请至关重要 React, 由于您可以确定显示组件。/只有在他的时候是可视化的

登上

. 但是，处理器

componentDidMount

仅在实际表示中渲染时调用 UI /DOM 或自己的组件/, 但是在字符串中渲染时不是 HTML 在服务器上使用

renderToString

, 有意义的是，由于组件实际上未安装，直到浏览器到达并未在其中执行。

然后，

安装

- 这也是不成功的 / 如果你问我纠结的名字。 IMHO

componentDidRender

和

componentWillRender

会更好的名字。