React之元素渲染

Myth丶恋晨 2022-04-16 03:44 195阅读 0赞

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

const element = <h1>Hello, world!</h1>;

与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。

**将元素渲染到 DOM 中**  
首先我们在一个 HTML 页面中添加一个 id=“root” 的`<div>`:

<div id="root"></div>

在此 div 中的所有内容都将由 React DOM 来管理，将其称之为 “根” DOM 节点。

用React 开发应用时一般只会定义一个根节点。但如果是在一个已有的项目当中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。

要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上:

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

**更新元素渲染**  
React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。

目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法：

来看一下这个计时器的例子:

class App extends Component {
      render() {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>
          </div>
        );
      }
    }
    
    function tick() {
        ReactDOM.render(
          <App date={new Date()} />,
          document.getElementById('root')
        );
    }
       
    setInterval(tick, 1000);

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关 web前端高级React - React从入门到进阶之元素渲染

系列文章目录 [第一章：React从入门到进阶之初识React][React_React] [第二章：React从入门到进阶之JSX简介][React_JSX]

布满荆棘的人生/ 2023年01月02日 12:21/ 0 赞/ 125 阅读

相关 react 条件渲染

在 `React` 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。 `React` 中的条件渲染和 `JavaScript`

朴灿烈づ我的快乐病毒、/ 2022年12月27日 01:42/ 0 赞/ 217 阅读

相关 react学习经验总结（元素渲染）

1.元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。 const element = <h1>Hello, react!</h1>; 与浏览

た入场券/ 2022年12月25日 14:58/ 0 赞/ 136 阅读

相关 24【React基础-3】元素渲染

写在前面本文是【React基础】系列的第三篇文章，这篇文章中我们介绍一下在react中的"元素"这个概念，并且了解下它跟我们传统的浏览器DOM元素有什么不同。概述

迷南。/ 2022年12月17日 14:57/ 0 赞/ 133 阅读

相关 React学习之条件渲染

说明：本系列所有demo代码的github地址为：[https://github.com/Brucewu998/react.js-learning][https_github

た入场券/ 2022年12月02日 15:27/ 0 赞/ 172 阅读

相关 React学习之元素渲染

说明：本系列所有demo代码的github地址为：[https://github.com/Brucewu998/react.js-learning][https_github

爱被打了一巴掌/ 2022年11月29日 13:29/ 0 赞/ 170 阅读

相关 React 源码学习（一）：HTML 元素渲染

> 阅读源码成了今年的学习目标之一，在选择 Vue 和 React 之间，我想先阅读 React 。在考虑到读哪个版本的时候，我想先接触到源码早期的思想可能会更轻松一些，最终

桃扇骨/ 2022年04月27日 22:30/ 0 赞/ 224 阅读

相关 React之元素渲染

元素渲染元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。 const element = <h1>Hello, world!</h1>;

Myth丶恋晨/ 2022年04月16日 03:44/ 0 赞/ 195 阅读

相关 React渲染原理

渲染原理渲染：生成用于显示的对象，以及将这些对象形成真实的DOM对象 React元素：React Element，通过React.createElement创建

今天药忘吃喽~/ 2021年08月14日 01:47/ 0 赞/ 441 阅读

相关 react 渲染 hello React

react为一套为视图准备的js框架引入四个文件 <script src="js/libs/browser.min.js"></

╰+哭是因爲堅強的太久メ/ 2021年07月24日 15:47/ 0 赞/ 472 阅读