什么是React js中的“安装”?

JavaScript

宝儿神奇

2020-03-12

在学习ReactJS时,我多次听到“ mount”一词。与此术语相比,似乎存在生命周期方法和错误。通过安装,React到底意味着什么?

例子: componentDidMount() and componentWillMount()

第866篇《什么是React js中的“安装”?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

4个回答
神奇Tony古一 2020.03.12

安装是指首次渲染React组件时的初始页面加载。从React文档中的Mounting:componentDidMount:

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).

您可以将它与componentDidUpdate函数进行对比,该函数在每次React渲染时都会调用(初始安装除外)。

路易Green 2020.03.12

React是一个同构/通用框架。这意味着存在UI组件树的虚拟表示,并且与它在浏览器中输出的实际呈现是分开的。从文档中:

React是如此之快,因为它从不直接与DOM对话。React维护了DOM的快速内存表示。

但是,内存中的表示形式并不直接与浏览器中的DOM绑定(即使它被称为虚拟DOM,对于通用应用程序框架来说这是一个不幸的名称也令人困惑),它只是一个类似于DOM的数据,表示所有UI组件层次结构和其他元数据的结构。虚拟DOM只是实现细节。

“我们认为React的真正基础只是组件和元素的概念:能够以声明性的方式描述您要渲染的内容。这些是所有这些不同程序包共享的部分。React的特定于某些渲染的部分目标通常不是我们想到React时想到的。” -React js博客

因此,结论是React是Rendering Agnostic,这意味着它不在乎最终输出是什么。它可以是浏览器中的DOM树,也可以是XML,本机组件或JSON。

“当我们查看像react-native,react-art,react-canvas和React-3之类的包时,很明显,React的本质和本质与浏览器或DOM无关。” -React js博客

现在,您知道React的工作原理,很容易回答您的问题:)

挂载是将组件的虚拟表示输出到最终UI表示(例如DOM或本机组件)的过程。

在浏览器中,这意味着将React元素输出到DOM树中的实际DOM元素(例如HTML divli元素)中。在本机应用程序中,这意味着将React元素输出到本机组件中。如果您有胆量,您还可以编写自己的渲染器,并将React组件输出到JSON或XML甚至XAML中。

因此,挂载/卸载处理程序对于React应用程序至关重要,因为您只能确保组件在挂载时已输出/渲染但是,componentDidMount仅当渲染为实际的UI表示(DOM或本机组件)时,才调用处理程序而如果使用渲染为服务器上的HTML字符串,则不会调用处理程序renderToString,这是有道理的,因为该组件在到达浏览器并在其中执行。

而且,是的,如果您问我Mounting也是一个不幸的名字。恕我直言componentDidRendercomponentWillRender将是更好的名字。

Stafan古一 2020.03.12

挂载是指React中的组件(创建的DOM节点)被附加到文档的某个部分。而已!

忽略React,您可以将这两个本机功能视为安装:

replaceChild

appendChild

这可能是React在内部安装时最常用的功能。

考虑到:

componentWillMount ===挂载前

和:

挂载后componentDidMount ===

录泰红木 2020.03.12

React js的主要目标是创建可重用的组件。在此,组件是网页的各个部分。例如,在网页中,标头是一个组件,页脚是一个组件,敬酒通知是一个组件,等等。术语“ mount”告诉我们这些组件是在DOM中加载或呈现的。这些是处理这些问题的许多顶级API和方法。

为简单起见,“已安装”表示已将组件加载到DOM,而“未安装”则意味着已从DOM中删除了组件。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android