在react项目启动时，页面加载中过程中，提示正在等待unpkg.com的响应
同样的代码昨天还可以正常运行，今天就不可以了。好奇怪
1.导入的react的javascript文件，
写的是
<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>
我可以fanQ,可以正常访问https://unpkg.com/react@18.2.0/umd/react.development.js
getbash截图：
2.用的是18版本的，
完整index.html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
<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>
<script src="../src/index.js" type="text/JSX"></script>
</body>
</html>
完整的index.js代码：
import React from 'react';
import ReactDOM from 'react-dom/client';
// 引入CSS
import './index.css';
//创建高阶组件
//1.创建一个函数以with开头
// 2. 指定函数参数以大写开头（作为要渲染的函数）
function withMouse(WrappedComponent){
// 3. 在函数内部创建一个类组件，提供**复用的状态逻辑代码**（操作state的方法）
class Mouse extends React.Component{
//提供状态与操作状态的方法
constructor(){
super()
//鼠标状态
this.state={
x:0,
y:0
}
}
handleMouseMove=e=>{
this.setState({
x:e.clientX,
y:e.clientY
})
}
// 控制鼠标状态的逻辑
componentDidMount(){
window.addEventListener('mousemove',this.handleMouseMove)
}
// 解绑事件
componentWillUnmount(){
window.removeEventListener('mousemove',this.handleMouseMove)
}
// 当前方法未渲染任何UI结构，withMouse渲染UI结构是捅错参数来决定的，拿到这个参数，在render方法中渲染一下
// 4. 在该组件中渲染参数组件(WrappedComponent)，同时将状态通过props传递给参数组件({...this.state})
render(){
return <WrappedComponent {...this.state}></WrappedComponent>
}
}
return Mouse
}
// 用来测试高阶组件的一个组件
const Position =props=> (
<p>
鼠标当前位置：(x:{ props.x},y:{props.y})
</p>
)
// 5. 调用该高阶组件，传入要增强的组件，通过返回值拿到要增强后的组件，
// 获取增强后的组件
const MousePosition =withMouse(Position)
class App extends React.Component{
render(){
return(
<div>
<h1>高阶组件</h1>
{/* 6. 将高阶组件渲染到页面中 */}
<MousePosition/>
</div>
)
}
}
/* 17版本写法 */
// ReactDOM.render(<App/>,document.getElementById('root'));
/* 18版本写法 */
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
