测开技能--Web开发 React 学习（三）元素的渲染

前面的两节呢，讲了React环境的搭建呢，这节呢，我们这次来看下元素的渲染。

元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。

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

我们将这样的h1标签渲染到浏览器上，怎么做呢！

首先我们在一个 HTML 页面中添加一个 id="example" 的 <div>:

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

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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

那么我们应怎么讲element 渲染到页面上去呢，其实很简单

这样就完成了渲染，那么我们去启动下工程，看看 对应的h1标签有没有渲染

我们去启动下。npm start 就可以展示了。

我们可以看到，这样呢，我们的元素就渲染上去了。对应的h1标签是渲染的已经展示出来了。

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

那么我们怎么改变下元素的值呢，我们将在下一个章节为大家揭秘，如何利用现有的知识，将元素做动态化渲染。

如果你感觉，文章对你有帮助，请点赞，点击在看或者分享，让更多的人收益。我是雷子，一个热衷分享技术的人。