1.将React添加到网站

风落不归处

已于 2023-06-19 14:05:10 修改

阅读量210

点赞数

分类专栏： react 文章标签： react.js javascript ecmascript

于 2023-06-19 13:18:50 首次发布

本文链接：https://blog.csdn.net/weixin_43893483/article/details/131285196

版权

react 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.在一分钟内添加React——来自官网(将 React 添加到网站 - React 中文网 (caibaojian.com.cn))

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello_react</title>
</head>
<body>
    <!-- 1.第一步，添加一个DOM容器到HTML -->
    <div id="like_button_container"></div>
    
    <!-- 2.第二步： 引入react核心库，引入react-dom 引入babel -->
    
    <!-- (1). 引入react核心库 -->
    <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。 -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    
    <!-- (2). 引入react-dom：提供与DOM相关的功能 -->
    <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。 -->
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    
    <!-- (3). 引入babel，用于将jsx转为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <!-- 3.第三步：创建一个react组件 -->
    <script type="text/babel>
        //1.创建虚拟DOM
        const e = React.createElement;
        class LikeButton extends React.Component {
            constructor(props) {
                super(props);
                this.state = {liked: false}
            }

            render() {
                if (this.state.likes) {
                    return "You liked this."
                }
                
                return e(
                    "button",
                    {onClick:() => this.setState({liked: true})},
                    'Like'
                )
            }
        }
        //2.获取容器DOM
        const domContainer = document.querySelector("#like_button_container");
        //创建根节点
        const root = ReactDOM.createRoot(domContainer);
        //渲染元素
        root.render(e(LikeButton));
    </script>
</body>
</html>

1.CDN链接：可以通过CDN获得React和ReactDOM的UMD版本

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

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

上述版本仅用于开发环境，不适用于生产环境。压缩优化后可用于生产的React版本可通过如下方式引用：

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

2.为什么要使用crossorigin属性？

如果你通过CDN的方式引入React，我们建议设置crossorigin属性

3. 解释：script中crossorigin属性作用

当引入跨域的脚本（比如用了 apis.google.com 上的库文件）时，如果这个脚本有错误，因为浏览器的限制（根本原因是协议的规定），是拿不到错误信息的。当本地尝试使用 window.onerror 去记录脚本的错误时，跨域脚本的错误只会返回 Script error。

而 HTML5 新的规定，是可以允许本地获取到跨域脚本的错误信息的，但有两个条件：一是跨域脚本的服务器必须通过 Access-Control-Allow-Origin 头信息允许当前域名可以获取错误信息，二是网页里的 script 标签也必须指明 src 属性指定的地址是支持跨域的地址，也就是 crossorigin 属性。有了这两个条件，就可以获取跨域脚本的错误信息。

但是当script中的src为一个跨域的html资源，其报错信息就有可能泄漏隐私信息，因此就需要慎重考虑清楚是否使用crossorigin 属性。

4.img、link中crossorigin属性的作用

img、link添加crossorigin属性后，canvas 不仅可以读取另外一个域名下的图片资源的数据，还能对其做操作，就跟操作同个域名下的图片一样了。
未添加时， canvas 只能按 tainted 方式读取非同域名下的图片资源，『taint』就是上色，贴膜的意思，比如给汽车车窗贴膜。我理解浏览器里的『贴膜』方式，应该是指只能将图片贴在 canvas 上，但不能将图片作为数据读出来，从而防止某些隐私信息随着图片传到别的地方。

风落不归处

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.将React添加到网站

而 HTML5 新的规定，是可以允许本地获取到跨域脚本的错误信息的，但有两个条件：一是跨域脚本的服务器必须通过 Access-Control-Allow-Origin 头信息允许当前域名可以获取错误信息，二是网页里的 script 标签也必须指明 src 属性指定的地址是支持跨域的地址，也就是 crossorigin 属性。当引入跨域的脚本（比如用了 apis.google.com 上的库文件）时，如果这个脚本有错误，因为浏览器的限制（根本原因是协议的规定），是拿不到错误信息的。
复制链接

扫一扫