反应JS |渲染元素

在上一篇介绍 JSX 的文章中，我们了解了如何创建 React 元素。 React 元素是 React 中可用的最小可渲染单元。我们可以使用上一篇文章中描述的 ReactDOM 来渲染这些元素。 React 元素与 DOM 元素不同，因为 React 元素是简单的 javascript 对象并且可以高效地创建。 React 元素是任何 React 应用程序的构建块，不应与将在后续文章中讨论的 React 组件混淆。
在 React 中渲染元素：为了将任何元素渲染到浏览器 DOM 中，我们需要一个容器或根 DOM 元素。将 id=”root” 或 id=”app” 的 div 元素用作根 DOM 元素几乎是一种惯例。假设我们的 index.html 文件中包含以下语句。

文件名 App.js：现在，为了将一个简单的 React Element 渲染到根节点，我们必须在App.js文件中编写以下内容。

javascript

import React,{ Component }  from 'react';
 
class App extends Component {
 
  render() {
    return (    
       

         
Welcome to GeeksforGeeks!
       
 
    );
  }
}
    
export default App;

输出：

现在，你已经创建了你的第一个 React Element 并且已经将它渲染到位，但是 React 并不是为了创建静态页面而开发的，使用 React 的目的是创建一个更符合逻辑和更活跃的网页。为此，我们需要更新元素。下一节将指导我们完成相同的操作。
在 React 中更新元素： React 元素是不可变的，即一旦创建元素，就不可能更新其子元素或属性。因此，为了更新一个元素，我们必须多次使用 render() 方法来随着时间的推移更新值。让我们看一个例子。

javascript

import React from 'react';
import ReactDOM from 'react-dom';
 
function showTime()
{
const myElement = (
                   

                        
Welcome to GeeksforGeeks!
                        
{new Date().toLocaleTimeString()}
                   
                  );
 
ReactDOM.render(
      myElement,
      document.getElementById("root")
);                   
}
 
setInterval(showTime, 1000);

输出：

在上面的示例中，我们创建了一个显示当前时间的函数showTime()，我们设置了 1000 毫秒或 1 秒的间隔，每秒调用该函数，从而更新每次调用的时间。为简单起见，我们仅在给定图像中显示了一秒的时间跨度。

React 渲染效率：选择 React 而不是 DOM 更新的传统是因为它提高了效率。 React 通过使用虚拟 DOM 和高效的微分算法来实现这种效率。在显示当前时间的示例中，我们每秒调用 render 方法，虚拟 DOM 被更新，然后微分器检查浏览器 DOM 和虚拟 DOM 中的特定差异，然后仅更新所需的内容，例如给定的示例时间是唯一每次都改变的东西，而不是标题“欢迎来到 GeeksforGeeks！”因此 React 只更新时间本身，使其比传统的 DOM 操作更有效。

重要注意事项：

• 多次调用 render() 方法可以满足我们本示例的目的，但一般情况下，它不会被使用，而是使用有状态组件，我们将在后续文章中介绍。
• React 元素几乎从不孤立使用，我们可以使用元素作为在 React 中创建组件的构建块。组件也将在接下来的文章中讨论。