一起来学习React元素的创建和渲染

2024-08-02 13:15:11

React 和 ReactDOM

我们可以通过官方提供的 CDN 链接引入 react.js 和 react-dom.js 这两个库，从而在 HTML 中使用

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

React 是 React 库的入口。如果你通过使用 <script> 标签的方式来加载 React，则可以通过 React 全局变量对象来获得 React 的顶层 API

如果你使用一个 <script> 标签引入 react-dom，所有的顶层 API 都能在全局 ReactDOM 上调用

先来看看 React 和 ReactDOM 是什么：

console.log(React)
console.log(ReactDOM)

React

ReactDOM

可以看到是两个对象，并且拥有很多方法，暂时不必深究每个方法

React 初体验

首先我们在 html 中引入：react.js react-dom.js

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

目前我们的代码写在 html 中，所以都通过 script 标签引入这两个库（后续不再赘述）

接着我们在界面上添加一个根元素：

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

如果我们想给这个根元素添加一段文字比如： Hello,React! ，我们可以这么做：

<div id="root">
    Hello,React!
</div>

现在用 React 的方式来将这个标题渲染到页面上

我们要用到 ReactDOM 提供的 API ：ReactDOM.render()

ReactDOM.render("Hello, React!", document.getElementById("root"), () => {
      console.log("渲染完执行回调函数");
});

事实上，render 方法接受 3 个参数：

要渲染的内容（"Hello, React!"）
渲染内容的接收容器（此处的根元素）
可选的回调函数（回调函数会在内容被渲染后执行）

创建 React 元素

如果我们想要渲染的内容是一个标题 h1 或者一个段落 p ，甚至是更复杂的元素嵌套该怎么办呢

<!-- 比如 -->
<h1>Hello,React!</h1>
<p>第一次学习React，太简单了吧</p>
<!-- 甚至 -->
<div>
    <header>
        <h1>Hello,React!</h1>
    </header>
    <section>
        <p>第一次学习React，太简单了吧</p>
    </section>
</div>

React 提供了创建并返回 React 元素的 API：

React.createElement(
  type,
  [props],
  [...children]
)

该方法接受 3 个参数：

type：指定元素类型，比如 'h1'、'p'
props：可选参数，元素的属性值对对象，比如

{className: 'bg-red', id: 'title'}

可选参数，元素的子元素

创建元素并渲染到指定容器

const h1 = React.createElement("h1", null, "Hello,React!");
const p = React.createElement("p", null, "第一次学react，太简单了吧");
const header = React.createElement("header", { id: "title" }, h1);
const section = React.createElement("section", null, p);
const div = React.createElement("div", null, header, section);

渲染到根元素：

ReactDOM.render(div, document.querySelector("#root"));

注意

1.render 方法可以接受 createElement 创建的 React 元素作为渲染对象

2.render 方法属于 ReactDOM 对象

3.createElement 方法属于 React 对象

JSX

每个 React 元素都用 createElement 创建有点麻烦啊，有没有简单点的办法

事实上，对于：

const h1 = React.createElement("h1", null, "Hello,React!");
const p = React.createElement("p", null, "第一次学react，太简单了吧");
const header = React.createElement("header", { id: "title" }, h1);
const section = React.createElement("section", null, p);
const div = React.createElement("div", null, header, section);

可以这么写：

const h1 = <h1>Hello,React!</h1>;
const p = <p>第一次学react，太简单了吧</p>;
const header = (
    <header>
        <h1>Hello,React!</h1>
    </header>
);
const section = (
    <section>
        <p>第一次学react，太简单了吧</p>
    </section>
);
const div = (
    <div>
        <header>
            <h1>Hello,React!</h1>
        </header>
        <section>
            <p>第一次学react，太简单了吧</p>
        </section>
    </div>
);

这种标签语法既不是字符串也不是 HTML

它被称为 JSX，是 JavaScript 的语法扩展

事实上，每个 JSX 元素一个语法糖，它们最终还是会调用React.createElement(component, props, ...children) 方法来创建 React 元素。不过我们写起来更加简单且直观

JSX 初体验

我们将所有 createElement 创建的元素改写成 JSX

得到如下完整 HTML 页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Static Template</title>
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  const h1 = <h1>Hello,React!</h1>;
  const p = <p>第一次学react，太简单了吧</p>;
  const header = (
    <header>
      <h1>Hello,React!</h1>
    </header>
  );
  const section = (
    <section>
      <p>第一次学react，太简单了吧</p>
    </section>
  );
  const div = (
    <div>
      <header>
        <h1>Hello,React!</h1>
      </header>
      <section>
        <p>第一次学react，太简单了吧</p>
      </section>
    </div>
  );
  ReactDOM.render(div, document.querySelector("#root"));
</script>
</html>

在浏览器中打开，会发现页面上的元素并没有得到正确的渲染

并且控制台输出了错误：Uncaught SyntaxError: Unexpected token '<'

这是因为浏览器并不认识 JSX，JSX 只是 React 团队自己造的东西，我们需要把 JSX 转换成符合 JS 规范的语法，这样浏览器就认识了

这跟将 ES6 语法转换成 ES5 差不多

什么东西能把 ES6 语法转换成 ES5 ？

没错，Babel

同样，借助 Babel 我们可以将 JSX 转换成 JS 语法

在页面中添加如下 script 标签

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

并将 script 标签（指包含 JSX 语法的 script）的 type 属性改为：text/babel

<script type="text/babel">
  const h1 = <h1>Hello,React!</h1>;
</script>

现在，元素可以正确的显示了

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

详解React 元素渲染

元素是构成 React 应用的最小单位,它用于描述屏幕上输出的内容. const element = <h1>Hello, world!</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致. 将元素渲染到 DOM 中首先我们在一个 HTML 页面中添加一个 id="example" 的 <div>: <div id="
详解React 条件渲染

在 React 中,你可以创建不同的组件来封装各种你需要的行为.然后还可以根据应用的状态变化只渲染其中的一部分. React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI. 先来看两个组件: function UserGreeting(props) { return <h1>欢迎回来!</h1>; } function GuestGreeting(props)
React服务端渲染原理解析与实践

关于服务端渲染也就是我们说的SSR大多数人都听过这个概念,很多同学或许在公司中已经做过服务端渲染的项目了,主流的单页面应用比如说Vue或者React开发的项目采用的一般都是客户端渲染的模式也就是我们说的CSR. 但是这种模式会带来明显的两个问题,第一个就是TTFP时间比较长,TTFP指的就是首屏展示时间,同时不具备SEO排名的条件,搜索引擎上排名不是很好.所以我们可以借助一些工具来进行改良我们的项目,将单页面应用编程服务器端渲染项目,这样就可以解决掉这些问题了. 目前主流的服务器端渲染框架也就是
浅谈React中的元素、组件、实例和节点

React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中更加灵活地使用React. React 中的元素.组件.实例和节点,是React中关系密切的4个概念,也是很容易让React 初学者迷惑的4个概念.现在,老干部就来详细地介绍这4个概念,以及它们之间的联系和区别,满足喜欢咬文嚼字.刨根问底的同学(老干部就是其中一员)的好奇心. 元素 (Element) React 元素其实就是一个简单JavaScript对象,一个React 元素
一起来学习React元素的创建和渲染

目录 React和ReactDOM React初体验创建React元素 JSX JSX初体验总结 React 是一个用于构建用户界面的 JavaScript 库它包括两个库:react.js 和 react-dom.js react.js:React 的核心库,提供了 React.js 的核心功能,比如创建 React 组件.组件的生命周期等 react-dom.js:提供了和浏览器交互的 DOM 功能,比如:将组件渲染到页面上 React 和 ReactDOM 我们可以通过官方提供的 C
react组件的创建与更新实现流程详解

目录 React源码执行流程图 legacyRenderSubtreeIntoContainer legacyCreateRootFromDOMContainer createLegacyRoot ReactDOMBlockingRoot createRootImpl createContainer createFiberRoot createHostRootFiber createFiber updateContainer 总结这一章节就来讲讲ReactDOM.render()方法的内部实现
使用 React 和 Threejs 创建一个VR全景项目的过程详解

最近我在学习使用 React 配合 Three.js 来搭建一个可以浏览720全景图片的项目实现的是加载一张 2:1 的720全景分享一下我的创建过程一.搭建框架并安装需要的插件 npx create-react-app parano // 创建一个 React 项目 npm install -S typescript // 安装 typescript,这个是类型辅助插件,与全景项目关系不大 npm install -S @types/three // 安装 typescript 支持的
Python语法学习之线程的创建与常用方法详解

目录线程的创建与使用线程的创建 -threading 线程对象的常用方法线程演示案例线程的问题线程的创建与使用在Python中有很多的多线程模块,其中 threading 模块就是比较常用的.下面就来看一下如何利用 threading 创建线程以及它的常用方法. 线程的创建 -threading 函数名介绍举例 Thread 创建线程 Thread(target, args) Thread 的动能介绍:通过调用 threading 模块的 Thread 类来实例化一个线程对象:它
Python学习之字典的创建和使用

目录字典的创建字典中键值的获取修改元素添加元素删除元素清空字典字典的创建名称={”键名“:”键值“} 举例: person={"name":"张三","age":10,"地址":"北京市海淀区"} print(person)//打印字典 print(type(person))//输出字典的类型输出: {'name': '张三', 'age': 10, '地址': '北京市海淀区'}<
React元素与组件的区别示例详解

目录从问题出发元素与组件元素组件问题如何解决自定义内容第一种实现方式第二种实现方式第三种实现方式从问题出发我被问过这样一个问题: 想要实现一个 useTitle 方法,具体使用示例如下: function Header() { const [Title, changeTitle] = useTitle(); return ( <div onClick={() => changeTitle('new title')}> <Title /> </div
深入理解React中es6创建组件this的方法

首发于:https://mingjiezhang.github.io/. 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的demo说起 Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中.Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类.官方的demo: class LikeButton extends React.Component
javascript元素动态创建实现方法

本文实例讲述了javascript元素动态创建实现方法.分享给大家供大家参考.具体分析如下: document.write只能在页面加载过程中才能动态创建可以调用document的createElement方法来创建具有指定标签的DOM对象,然后通过调用元素的appendChild方法将新创建元素添加到相应的元素下举例如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e
Python学习笔记之Django创建第一个数据库模型的方法

Django里面集成了SQLite的数据库,对于初期研究来说,可以用这个学习. 第一步,创建数据库就涉及到建表等一系列的工作,在此之前,要先在cmd执行一个命令: python manage.py migrate 这个命令就看成一个打包安装的命令,它会根据mysite/settings.py的配置安装一系列必要的数据库表第二步,我们要建立一个Model层,修改demo/model.py: from django.db import models classQuestion(models.Mod

一起来学习React元素的创建和渲染

目录

React 和 ReactDOM

React 初体验

创建 React 元素

JSX

JSX 初体验

总结

相关推荐

随机推荐