在学习 ReactJS 的过程中,我经常听到“挂载”这个词。关于这个术语,似乎存在生命周期方法和错误。安装到底是什么意思?
例子: componentDidMount() and componentWillMount()
componentDidMount() and componentWillMount()
Https://facebook.github.io/react/docs/tutorial.html
在这里,Component entDidMount 是在呈现组件时由 React 自动调用的方法。
这个概念就是你告诉 ReactJS,“请把这个东西,这个注释框或者旋转图片,或者任何我想放在浏览器页面上的东西,然后把它放到浏览器页面上。完成后,调用绑定到 componentDidMount的函数,这样我就可以继续了。”
componentDidMount
componentWillMount则相反,它将在组件呈现之前立即激发。
componentWillMount
请看这里 Https://facebook.github.io/react/docs/component-specs.html
最后,“ mount”术语似乎是 react.js 所特有的。我不认为它是一个普通的 javascript 概念,甚至一个普通的浏览器概念。
Mounting 指的是第一次呈现 React 组件时的初始页面加载:
Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).
您可以将此与 Component entDidUpdate 函数进行对比,后者在每次 React 呈现时都会调用(初始挂载除外)。
React 的主要工作是找出如何修改 DOM 以匹配要在屏幕上呈现的组件。
通过“挂载”(向 DOM 添加节点)、“卸载”(从 DOM 中删除节点)和“更新”(对 DOM 中已有的节点进行更改)来进行反应。
React 节点如何表示为 DOM 节点以及它在 DOM 树中出现的位置和时间由 顶层空气污染指数管理。为了更好地了解正在发生的事情,请看一个最简单的例子:
// JSX version: let foo = <FooComponent />; let foo = React.createElement(FooComponent);
那么什么是 foo,你能用它做什么呢?目前,foo是一个普通的 JavaScript 对象,看起来大致如下(简化) :
foo
{ type: FooComponent, props: {} }
它目前不在页面的任何地方,也就是说,它不是 DOM 元素,不存在于 DOM 树的任何地方,除了是 React 元素节点之外,在文档中没有其他有意义的表示。它还没有“安装”。
您可以通过调用:
ReactDOM.render(foo, domContainer);
这告诉 React 是时候在页面上显示 foo了。React 将创建 FooComponent类的一个实例并调用它的 render方法。假设它呈现一个 <div />,在这种情况下 React 将为它创建一个 div DOM 节点,并将其插入到 DOM 容器中。
FooComponent
render
<div />
div
创建与 React 组件对应的实例和 DOM 节点并将其插入 DOM 的过程称为挂载。
注意,通常您只调用 ReactDOM.render()来挂载根组件。您不需要手动“挂载”子组件。每当父组件调用 setState(),并且它的 render方法说某个特定的子组件应该首次呈现时,React 就会自动将该子组件“挂载”到其父组件中。
ReactDOM.render()
setState()
React 是一个 同构/通用框架。这意味着 UI 组件树有一个实际代表,并且与它在浏览器中输出的实际呈现分离。根据文件:
反应是如此之快,因为它从来没有直接与 DOM 交谈。React 维护 DOM 的快速内存表示。
然而,内存中的表示并不直接绑定到浏览器中的 DOM (尽管它被称为 Virtual DOM,这是个不幸又令人困惑的名字,用于通用应用程序框架) ,它只是一个类似于 DOM 的数据结构,表示所有 UI 组件的层次结构和附加的元数据。虚拟 DOM 只是一个实现细节。
“我们认为,React 的真正基础只是组件和元素的概念: 能够以声明的方式描述你想呈现的东西。这些是所有这些不同软件包共享的部分。特定渲染目标的“反应”部分通常不是我们想到的“反应”部分- React js Blog
所以,结论是 React 是不可知的,这意味着它不关心最终输出是什么。它可以是浏览器中的 DOM 树,也可以是 XML、本机组件或 JSON。
“当我们看到类似本地反应、反应艺术、反应画布和反应这样的软件包时,很明显,反应的美和本质与浏览器或 DOM 没有任何关系。”- React js Blog
现在,你知道了 React 是如何工作的,很容易回答你的问题:)
挂载 是将组件的实际代表输出到最终的 UI 表示(例如 DOM 或本机组件)的过程。
在浏览器中,这意味着将 React 元素输出到 DOM 树中的实际 DOM 元素(例如 HTML Div或 Li元素)中。在本机应用程序中,这意味着将 React 元素输出到本机组件中。如果您有勇气的话,还可以编写自己的渲染器并将 React 组件输出到 JSON 或 XML 甚至 XAML 中。
因此,挂载/卸载处理程序对于 React 应用程序至关重要,因为您只能确保在 安装时输出/呈现组件。但是,componentDidMount处理程序只有在呈现到实际的 UI 表示(DOM 或本机组件)时才会被调用,而在使用 renderToString呈现到服务器上的 HTML 字符串时则不会,这是有意义的,因为组件在到达浏览器并在其中执行之前不会实际挂载。
renderToString
而且,是的,如果你问我,正在安装也是一个不幸/令人困惑的名字。恕我直言,componentDidRender和 componentWillRender会是更好的名字。
componentDidRender
componentWillRender
React js 的主要目标是创建可重用的组件。在这里,组件是网页的各个部分。例如,在一个网页中,页眉是一个组件,页脚是一个组件,祝酒词通知是一个组件,等等。术语“ mount”告诉我们这些组件是在 DOM 中加载或呈现的。这些是许多处理此问题的顶级 API 和方法。
为了简单起见,挂载意味着组件已经加载到 DOM,卸载意味着组件已经从 DOM 中删除。
挂载是指将 React (创建的 DOM 节点)中的组件附加到文档的某个部分!
忽略 React 你可以把这两个本机函数看作是挂载:
替换 Child
附件儿童
这可能是 React 在内部挂载时使用的最常见的函数。
想想:
组件 Willmount = = = before-mount
还有:
Component entDidMount = = = after-mount