创建 React Element

yanbingyun1990 发布于2019-08-23 12:34 / 2926人阅读

摘要：现在，我们完成了的创建，下一步就需要将这个元素变成真正的节点添加到我们的页面中去。那我们第一步应该要创建这些节点。首先引入对象，使用方法创建第一个元素，第一个显示，然后再创建两个相同的元素，分别显示和。

在上一章节中，我们使用 create-react-app 工具搭建了一个基于 react 的开发环境，那么从这一章起，我们就正式开始 react 框架的学习。

打开 my-app 项目，找到 src/index.js 文件，我们在上一章中提到过，这个文件是整个应用的入口，当页面刷新时，会主动去加载这个文件，那这里我们直接删掉这个目录下的其他文件，只保存 index.js 即可。然后删除这个文件中的默认代码，并调用console.log("in")方法在控制台上进行输出。

使用 yarn start 命令启动项目，打开浏览器开发者工具，可以看到控制台成功打印。使用脚手架工具搭建的开发环境中，已经实现了热加载的功能，也就是说，当我们完成 js 代码的修改之后，不在需要频繁的通过刷新来查看页面的效果，在每次修改保存之后，浏览器会自动的完成页面的刷新。比如这里，我把这里输出的字符串稍稍改一下，然后保存，可以看到控制台已经将刚刚修改的字符串输出了。

React Element

好，回到 react 框架的知识点上，我们知道，一个页面是由很多的节点元素组合在一起的，比方说，h1 元素，div 元素，ul 元素等等。那实际上，在 react 中，最小的组成单元也是元素，只是我们将它称之为 react element。那么，我们如何创建一个 react element 呢？

比方说，这里我需要在页面中显示一个 h1 的元素，里面是一个 Hello World 字符串，那首先我就需要创建这样的一个 react element。

react 框架中，有两个核心对象 React 和 ReactDOM。这里就可以通过 React 对象来创建一个 h1 元素，首先引入这个对象。

import React from "react";

然后调用 createElement 方法来创建元素。这个方法的第一个参数是我们需要创建的节点类型，这里我需要创建一个 h1 元素，那参数就是 h1，第二个参数是这个元素拥有的属性设置，没有属性的时候可以直接给 null 的值，第三个参数就是该元素的子元素，这里我们需要在 h1 元素下显示 Hello World，那我们就可以把这个字符串当成它的子元素传递进去。这个方法的返回值就是一个 react element。我们可以在控制台上打印这个对象。

const h1Ele = React.createElement("h1", null, "Hello World");
console.log(h1Ele)

从控制台上我们可以看到，它就是一个普通的 javascript 对象，这个对象拥有一些属性，用来描述真实的元素。比方说: 这里的 type 属性就是用来描述这个元素的类型，也就是说这个对象映射的是一个 h1 元素，同理，这里的 props.children 指的就是这个元素下面的子元素，也就是的 Hello World 字符串。

现在，我们完成了 react element 的创建，下一步就需要将这个元素变成真正的 DOM 节点添加到我们的页面中去。这时，就需要使用 ReactDOM 对象来完成真实节点的渲染。首先引入这个对象。

import ReactDOM from "react-dom"

在 ReactDOM 对象上，有一个 render 方法，就是专门用来将 react element 渲染成真实 DOM 的。这个方法接收 2 个参数。第一个参数是我们需要渲染的 react element，这里我们就直接使用刚刚创建的那个 h1 元素；第二个参数是需要将这些元素显示到页面的哪个地方。打开 index.html 页面，我们可以发现，在这个页面中有一个空白的 div 元素，这个元素我们称之为叫容器，专门用来存放由 react 产生的这些元素的。那么这里，我们就可以把这个元素当成 render 方法的第二个参数。保存之后，查看页面，我们就可以看到在页面上显示了一个 Hello World。

ReactDOM.render(h1Ele, document.querySelector("#root"))

下一步，我们如何给这个节点增加样式呢？回到刚刚创建节点的那个方法，实际上，我们可以在这个方法的第二个参数中，来设置这个节点的样式，比方说，我现在需要让这个 h1 的字体颜色变成红色，那么直接指定 style color: red 就可以了。

const h1Ele = React.createElement("h1", {
  style: {
    color: "red"
  }
}, "Hello World");

除了使用 style 属性以外，我们依然可以通过引入外部样式表来修饰。这里我新建一个 css 文件，添加一个 class 选择器，设置字体大小为 50px，然后在 index.js 中，我们使用 import 引入这个 css 文件：

// theme.css
.msg {
  font-size: 50px;
}

// index.js
import "./theme.css"

然后在创建这个元素的时候，指定这个元素的 className 为 msg 就可以了，这时我们可以看到这个样式表就应用到当前这个元素了。

const h1Ele = React.createElement("h1", {
  style: {
    color: "red"
  },
  className: "msg"
}, "Hello World");

多个子元素的传递方式

接下来，我想再渲染一个列表应该如何操作呢？比方说，在这个列表中要显示 3 个选项，分别是 HTML，CSS 和 JAVASCRIPT。那我们第一步应该要创建这些节点。

首先引入 React 对象，使用 createElement 方法创建第一个 li 元素，第一个显示 HTML，然后再创建两个相同的元素，分别显示 CSS 和 JAVASCRIPT。

const li_01 = React.createElement("li", null, "HTML")
const li_02 = React.createElement("li", null, "CSS")
const li_03 = React.createElement("li", null, "JAVASCRIPT")

子元素创建完成之后，我们再来创建一个 ul 元素，因为这个ul元素有多个子元素，因此，这里有两种方式可以来传递子元素，第一种，我们可以把每一个子元素都当成参数传递给 createElement 方法

const ulEle = React.createElement("ul", null, li_01, li_02, li_03)

完成之后，将 ulEle 元素通过 render 方法渲染出来。查看页面，可以看到列表已经成功显示。

第二种方法，我们还可以将这些子元素变成一个数组交给 createElement 方法完成渲染，查看页面，我们可以看到列表依然正常显示，但是控制台给咱们抛出了一个警告:

这个警告的原因是，如果我们通过数组迭代的方式来创建子元素的话，我们需要给每一个子元素添加一个key的属性，而且这个属性的值，在同级元素中必须是唯一且不变的。那这里，我们给每一个li元素都增加一个key，值得话，让他们保证唯一就可以了。再查看页面，这时警告就消失了。

const li_01 = React.createElement("li", { key: 0 }, "HTML")
const li_02 = React.createElement("li", { key: 1 }, "CSS")
const li_03 = React.createElement("li", { key: 2 }, "JAVASCRIPT")

当然，这里我们还可以定义一个数组，然后通过迭代数组来产生这些li元素，这样可以简化一下我们的代码：

const arr = ["HTML", "CSS", "JAVASCRIPT"]

const liEles = arr.map((item, index) => {
  return React.createElement("li", {
    key: index
  }, item)
})

const ulEle = React.createElement("ul", null, liEles)

GPU云服务器云服务器 Element element-ui element-ui dialog组件 react

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98745.html

图解 React Virtual DOM

摘要：判断是否是有效的元素。主要和同构相关。是真实的模拟，真实是由真实的元素构成，也是由虚拟的元素构成。当这些对象上的数据发生变化时，通过打把变化同步到真实的上去。原创新书移动前端高效开发实战已在亚马逊京东当当开售。作者：阿希（沪江Web前端开发工程师）本文原创，转载请注明作者及出处。了解 React 的人几乎都听过说 Virtual DOM，甚至不了解 React 的人也听过 Vi...

Soarkey 2019-08-20 19:02 评论0 收藏0
【译】渲染Elements

摘要：注不做翻译是中最小的构建部件。在里渲染让我们看一下在下面有在你文件中无处不在的标签我们会把这元素成为元素因为的所有东西都会放在这个元素里面。通过方法，我们能吧渲染到我们根节点上。更新被渲染的是不可变的。下面是react官方文档的个人翻译，如有翻译错误，请多多指出原文地址：https://facebook.github.io/re...特别感谢Hevaen，同时也向豪大React群所有...

LoftySoul 2019-08-20 14:29 评论0 收藏0
React源码解析之ReactDOM.render()

摘要：一更新的方式有三种渲染接下来，我们就来看下源码二作用在提供的里渲染一个元素，并返回对该组件的引用常见的用法是这个官网网址源码服务端使用方法渲染节点是让服务端尽可能复用节点，提高性能元素容器应用渲染结束后，调用的函数错误抓取方法本质是返回 showImg(https://segmentfault.com/img/remote/1460000020064414?w=1240&h=641);...

iKcamp 2019-08-26 10:45 评论0 收藏0
React 内部机制探秘 - React Component 和 Element（文末附彩蛋demo

摘要：内部机制探秘和文末附彩蛋和源码这篇文章比较偏基础，但是对入门内部机制和实现原理却至关重要。当然也需要明白一些浅显的内部工作机制。当改变出现时，相比于真实更新虚拟的性能优势非常明显。直到最终，会得到完整的表述树的对象。 React 内部机制探秘 - React Component 和 Element（文末附彩蛋demo和源码）这篇文章比较偏基础，但是对入门 React 内部机制和实现原...

wenshi11019 2019-08-21 16:49 评论0 收藏0
React源码解析之React.createElement()和ReactElement()

摘要：一语法转换到语法从转换到会用到，所以先熟悉下到的转换。对于库作者而言，冻结对象可防止有人修改库的核心对象。 showImg(https://segmentfault.com/img/remote/1460000019757204); 一、JSX语法转换到Js语法从 JSX 转换到 JS 会用到React.createElement()，所以先熟悉下 JSX 到 JS 的转换。这边是 ...

BlackMass 2019-08-23 18:39 评论0 收藏0