如何在React中使用数据动态生成DOM标签

我们可以在一个组件中，使用ReactDom.render 方法将另一个组件渲染到一个指定的DOM 元素中。

当数据发生变化时，React会创建一个新的Virtual DOM树。 React会将新旧两个Virtual DOM树进行比较，并找出两者之间的差异。React使用Diff算法来进行比较，该算法能够高效地找出不同之处。

React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。

对于 react web app 来说，数据的变动最终会转化为 dom 的变化。当然 react 并不会对 dom 进行直接比较，而是对比变化前的 fiber。对 fiber 的 diff 最终会反映到 dom 上。

ReactDOM.createPortal

1、通过createPortal渲染的元素会被添加到另外的节点，同时点击事件会被触发；而通过ReactDOM.render渲染的元素添加到新节点，但是点击事件没有触发。

2、我们可以在一个组件中，使用ReactDom.render 方法将另一个组件渲染到一个指定的DOM 元素中。

3、React 渲染界面的方式在 React 等大型前端框架出现之前，我们渲染 UI 元素的方式是使用字符串模板。而在 React 中，我们通过使用JavaScript 对象来渲染 UI 元素。

4、我们使用react的时候常常需要在一个组件传入的props更新时重新渲染该组件，常用的方法是在componentWillReceiveProps中将新的props更新到组件的state中（这种state被成为派生状态（Derived State），从而实现重新渲染。

5、元素描述了你在屏幕上想看到的内容，是构成 React 应用的最小砖块，与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

React如何将组件渲染到指定DOM节点详解

我们可以在一个组件中，使用ReactDom.render 方法将另一个组件渲染到一个指定的DOM 元素中。

React 渲染界面的方式在 React 等大型前端框架出现之前，我们渲染 UI 元素的方式是使用字符串模板。而在 React 中，我们通过使用JavaScript 对象来渲染 UI 元素。

这种方案的缺点也是显而易见的，在组件的返回值上，总需要一层 、 或其他 DOM 节点包装起来。当 React 渲染成真实 DOM 时，这个包装节点总是会存在的。

具体实现方法如下：使用React.lazy（）和Suspense组件：React.lazy（）是React16版本中引入的新特性，可以实现动态加载组件。通过React.lazy（）可以将组件按需加载，只有在组件被访问时才会加载。