关于javascript:react-也就这么回事-01-React-元素的创建和渲染

4次阅读

共计 4120 个字符，预计需要花费 11 分钟才能阅读完成。

React 是一个用于构建用户界面的 JavaScript 库

它包含两个库：react.js 和 react-dom.js

react.js：React 的外围库，提供了 React.js 的外围性能，比方创立 React 组件、组件的生命周期等
react-dom.js：提供了和浏览器交互的 DOM 性能，比方：将组件渲染到页面上

咱们能够通过官网提供的 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

能够看到是两个对象，并且领有很多办法，临时不用深究每个办法

首先咱们在 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!”）
渲染内容的接管容器（此处的根元素）
可选的回调函数（回调函数会在内容被渲染后执行）

如果咱们想要渲染的内容是一个题目 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"));

在线代码

留神

render 办法能够承受 createElement 创立的 React 元素作为渲染对象
render 办法属于 ReactDOM 对象
createElement 办法属于 React 对象

每个 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 元素。不过咱们写起来更加简略且直观

咱们将所有 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 来创立元素和渲染元素，也初步理解了创立元素的办法的语法糖 JSX。

公众号【前端嘛】

正文完

javascript

发表至： javascript

2022-02-22

0

关于javascript:深究-Map-和-Object-的区别

vue-插入字符串html代码如何绑定事件平民写法

关于javascript:问题集合1

区块链编程初学者入门指南

关于linux:Linux之lsof命令

关于javascript:react-也就这么回事-01-React-元素的创建和渲染

React 和 ReactDOM

React 初体验

创立 React 元素

JSX

JSX 初体验

站内搜索