Hello World（React学习）

日升月潜
206 阅读8分钟

Hello World（React学习）

一、搭建环境

文章最后有整个详细的html信息

不使用脚手架的形式,直接在页面上使用React,引用下面的JS。

<!-- React的核心库,与宿主环境无关 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 依赖核心库,将核心的功能与页面结合 -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 编译JSX -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

注:跨域资源加上crossorigin,如果报错,就会显示详细信息。

二、React.createElement

1.说明:

React.createElement 是 React 库中的一个函数,用于创建 React 元素（React elements）React 元素是构建 React 应用的基本单位,它描述了 UI 的结构和内容。

React.createElement 函数的语法如下:

React.createElement(type, [props], [...children]);
  • type:表示要创建的元素的类型可以是一个 HTML 标签名（例如 "div"、"span"）,也可以是一个自定义的 React 组件如果是自定义组件,需要传递组件的类名或函数名。
  • props（可选）:表示要传递给元素的属性（props）这是一个包含键值对的对象,用于描述元素的特性和行为。
  • ...children（可选）:表示元素的子元素可以是一个或多个 React 元素,也可以是字符串或其他类型的值子元素可以嵌套,形成树状结构。

React.createElement 函数的作用是根据提供的参数创建一个 React 元素对象这个元素对象可以被 React 库用于构建虚拟 DOM,并最终渲染到页面上。

2.示例:

var span = React.createElement("span", {}, "一个span元素");
var h1 = React.createElement("h1", {
    title: "第一个React元素"
}, "Hello", "World", span);

页面上展示的 image-20240608173839220.png

3.h1对象的结构

{
    "type": "h1",
    "key": null,
    "ref": null,
    "props": {
        "title": "第一个React元素",
        "children": [
            "Hello",
            "World",
            {
                "type": "span",
                "key": null,
                "ref": null,
                "props": {
                    "children": "一个span元素"
                },
                "_owner": null,
                "_store": {}
            }
        ]
    },
    "_owner": null,
    "_store": {}
}

解释:

  • type:表示元素的类型在这个例子中,type 的值是 "h1",表示创建一个 <h1> 标签的元素。
  • key:用于元素的唯一标识这个值可以帮助 React 在更新元素时进行高效的比较和重渲染在这个例子中,key 的值是 null,表示没有为元素指定特定的标识。
  • ref:用于引用元素的引用ref 可以用于访问元素的实例或 DOM 节点在这个例子中,ref 的值是 null,表示没有为元素指定引用。
  • props:表示元素的属性（props）这是一个包含键值对的对象,用于描述元素的特性和行为在这个例子中,props 的值是一个对象,包含了 title 和 children 两个属性。
    • title:表示元素的标题属性,它的值是 "第一个React元素"。
    • children:表示元素的子元素这是一个数组,包含了三个子元素。
      • "Hello" 和 "World":这是两个字符串子元素,表示文本内容。
      • 一个嵌套的 <span> 元素:这是一个对象,表示一个嵌套的子元素它具有和父元素相似的结构,包含了 type、key、ref 和 props 属性
        • type:表示嵌套元素的类型在这个例子中,type 的值是 "span",表示创建一个 <span> 标签的元素。
        • key 和 ref:与父元素相同,都是 null。
        • props:表示嵌套元素的属性在这个例子中,props 的值是一个对象,只包含了一个 children 属性。
          • children:表示嵌套元素的子元素这是一个字符串,其值是 "一个p元素"。
  • _owner 和 _store:这些属性是 React 内部使用的属性,用于追踪元素的所有者（组件）和存储相关信息在这个例子中,它们的值都是 null 和 {}。

三、ReactDOM.render

1.说明:

ReactDOM.render() 方法是 React 库中的一个核心方法,用于将 React 元素渲染到实际的 DOM 上。

具体来说,ReactDOM.render() 方法的作用如下:

  1. 将 React 元素渲染到 DOM 上:通过调用 ReactDOM.render() 方法,可以将 React 元素（或组件）渲染到指定的 DOM 节点上这样,React 将会根据元素的描述构建虚拟 DOM,并将其与实际的 DOM 进行比较和更新,从而实现页面的渲染和更新。
  2. 更新已渲染的 React 元素:如果之前已经通过 ReactDOM.render() 方法将一个 React 元素渲染到 DOM 上,可以再次调用该方法,传入新的 React 元素,从而更新已渲染的内容React 会比较新旧元素的差异,并只更新需要更新的部分,以提高性能和效率。

需要注意的是,ReactDOM.render() 方法通常在应用程序的入口点被调用,用于将整个 React 应用程序渲染到页面上的特定位置在后续的状态变化时,可以再次调用该方法来更新页面。

以下是 ReactDOM.render() 方法的基本语法:

ReactDOM.render(element, container[, callback]);
  • element:要渲染的 React 元素（或组件）。
  • container:要将元素渲染到的 DOM 容器,通常是通过 document.getElementById() 等方法获取到的 DOM 元素。
  • callback（可选）:渲染完成后的回调函数。

总的来说,ReactDOM.render() 方法是 React 应用程序的入口点,用于将 React 元素渲染到实际的 DOM 上,并在后续的状态变化时更新页面它是使用 React 构建用户界面的关键方法之一。

2.实例:

ReactDOM.render("hello world", document.getElementById("root"));

image-20240608175146638.png

四、JSX

1.说明:

JSX（JavaScript XML）是一种 JavaScript 的语法扩展,通常与 React 库一起使用,用于在 JavaScript 中编写类似 XML 或 HTML 的结构JSX 允许开发者在 JavaScript 中直接编写类似 HTML 的代码,这样可以更直观地描述 UI 的结构和组件之间的关系。

以下是一个简单的 JSX 示例:

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

在这个例子中,<h1>Hello, world!</h1> 就是使用 JSX 编写的一个简单的 React 元素在实际运行时,JSX 会被转译成普通的 JavaScript 对象,以便在浏览器中渲染。

2.特点:

JSX 语法特点包括:

  1. 使用类似 XML 或 HTML 的标签语法。
  2. 允许在标签中使用 JavaScript 表达式,用大括号 {} 括起来。
  3. 支持嵌套,可以像编写 HTML 一样嵌套 JSX 元素。
  4. 可以在 JSX 中使用 JavaScript 变量、函数等。

React 开发中通常使用 JSX 来描述 UI 的结构,它使得代码更易读、易写,并且有助于组件化开发在底层,JSX 会被转译为普通的 JavaScript 代码,以便在浏览器中执行。

由于标准不支持,所以需要使用babel进行转义理念是所有的东西都应该再js里完成,不应该去动html里的东西。

输出之后的h1对象是和上面一样的,也可以理解成语法糖。

{
    "type": "h1",
    "key": null,
    "ref": null,
    "props": {
        "title": "第一个React元素",
        "children": [
            "Hello World ",
            {
                "type": "span",
                "key": null,
                "ref": null,
                "props": {
                    "children": "一个span元素"
                },
                "_owner": null,
                "_store": {}
            }
        ]
    },
    "_owner": null,
    "_store": {}
}

五、页面代码

<!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>Document</title>
</head>

<body>
<div id="root"></div>
<!-- React的核心库,与宿主环境无关 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 依赖核心库,将核心的功能与页面结合 -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 编译JSX -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script>
    <!-- ReactDOM.render("要显示的内容", "容器")   -->
    ReactDOM.render("Hello World", document.getElementById("root"));

    //创建一个span元素
    var span = React.createElement("span", {}, "一个p元素");


    //创建一个H1元素
    var h1 = React.createElement("h1", {
        title: "第一个React元素"
    }, "Hello", "World", span);

    console.log(h1);

    //把js对象变成真实的dom对象(与页面相结合)
    ReactDOM.render(h1, document.getElementById("root"));

    //用对象来描述元素结构,用的核心库,即可以显示在页面上也可以是手机端
    //React的本质是创建的一个个对象,形成一种结构,最后交给ReactDOM渲染到页面上

</script>

<!--行代码告诉浏览器,其中包含的脚本应该使用 Babel 进行转译当浏览器遇到这样的 <script> 标签时,
它会将其内容传递给 Babel 进行处理,以确保其中的 JSX 语法能够被正确转换为标准的 JavaScript 代码-->
<script type="text/babel">

    //var span = React.createElement("span", {}, "一个p元素");
    //经过转换以后会和上面的代码一样
    var h1 = <h1 title="第一个React元素">Hello World <span>一个span元素</span></h1>
    console.log(h1);
    ReactDOM.render(h1, document.getElementById("root"));

</script>
</body>

</html>

六、其他说明

1.crossorigin

crossorigin 是一个 HTML 属性,用于指定在加载跨域资源时如何处理跨域请求它可以在 <script> 标签中使用。

当你在网页中引入跨域资源（例如从不同域名加载的 JavaScript 文件）时,浏览器会执行一些安全策略以防止潜在的安全风险其中一个安全策略是同源策略,它要求网页中加载的脚本与网页本身具有相同的协议、域名和端口。

然而,有时你可能需要加载跨域资源,这时就可以使用 crossorigin 属性来告诉浏览器如何处理这些请求crossorigin 属性有以下几个取值:

  • anonymous:表示请求资源时不发送凭据（如 cookies 或 HTTP 认证信息）,适用于公共资源。
  • use-credentials:表示请求资源时发送凭据,适用于需要进行身份验证的资源。

在你提供的代码中,crossorigin 属性被用于加载 React 和 Babel 相关的资源这些资源可能来自不同的域名,因此使用 crossorigin 属性可以告诉浏览器如何处理这些跨域请求。

请注意,crossorigin 属性仅在加载跨域资源时才需要使用,对于同源资源,不需要设置该属性。

avatar
文章
阅读
粉丝