React 元素渲染

最新推荐文章于 2024-06-21 00:11:24 发布

一只有理想的癞蛤蟆

最新推荐文章于 2024-06-21 00:11:24 发布

阅读量121

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46904245/article/details/128856834

版权

自学专栏收录该内容

9 篇文章 1 订阅

订阅专栏

React应用的基本构建块是元素，它们描述屏幕上的内容。通过ReactDOM.render()方法将元素渲染到指定的DOM节点，如

。元素是不可变的，更新界面需创建新元素并重新渲染。例如，定时器示例中每秒创建新的时间元素并替换旧的，以实现界面动态更新。

摘要由CSDN通过智能技术生成

React 元素渲染

元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。

将元素渲染到DOM中

<div id="example"></div>

div中的内容是React DOM来管理的称之‘跟’DOM节点
要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上

const element = <h1>Hello, world!</h1>;
ReactDOM.render(
    element,
    document.getElementById('example')
);

更新元素渲染

React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。
目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法：
来看一下这个计时器的例子:

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
}
 
setInterval(tick, 1000);