让我们一起来熟悉 React@18.3 的 use()
首先
由于 React 18.3 即将推出一个名为 use() 的新 Hook，所以现在就要尽量熟悉它，以免慌忙起来。
这个题目
突然，这是来源。
这是使用Render-as-You-Fetch技术的React@18.2之前的老代码，对于聪明的人来说应该已经很熟悉了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="app"></div>
<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>
<script>
////////////////////////////////////////////////////
// Render-as-You-Fetch
// https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense
const wrapPromise = promise => {
let status = "pending"
let result
const suspender = promise.then(
r => {
status = "success"
result = r
},
e => {
status = "error"
result = e
}
)
return {
read() {
if (status === "pending") {
throw suspender
} else if (status === "error") {
throw result
} else if (status === "success") {
return result
}
}
}
}
//
const resource = wrapPromise(
(async() => {
const r = await fetch('https://www.reddit.com/r/reactjs.json')
return await r.json()
})()
)
//
const Inner = props => {
const json = resource.read()
const posts = json.data.children.map((child) => child.data);
return posts.map(post =>
React.createElement('div', {key: post.id}, post.title)
)
}
//
const App = props => {
return React.createElement(React.Suspense,
{
fallback: React.createElement('p', {}, 'Now Loading...')
},
React.createElement(Inner)
)
}
const root = ReactDOM.createRoot(document.getElementById("app"))
root.render(React.createElement(App))
////////////////////////////////////////////////////
</script>
</body>
</html>
终于，大家期待已久的使用()方法的最新源代码来了。现在看起来干净多了！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@18.3.0-next-6883d7944-20221101/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18.3.0-next-6883d7944-20221101/umd/react-dom.production.min.js"></script>
<script>
////////////////////////////////////////////////////
//
const resource = (async() => {
const r = await fetch('https://www.reddit.com/r/reactjs.json')
return await r.json()
})()
//
const Inner = props => {
const json = React.use(resource)
const posts = json.data.children.map((child) => child.data);
return posts.map(post =>
React.createElement('div', {key: post.id}, post.title)
)
}
//
const App = props => {
return React.createElement(React.Suspense,
{
fallback: React.createElement('p', {}, 'Now Loading...')
},
React.createElement(Inner)
)
}
const root = ReactDOM.createRoot(document.getElementById("app"))
root.render(React.createElement(App))
////////////////////////////////////////////////////
</script>
</body>
</html>
最后
如果比较一下上述的资源，你应该不会为 React@18.3 而感到慌张和困惑了。
结合我之前发布的类信号系统，也许很快就能成为真正强大的 React 大师了，这话一点也不夸张。
感谢您一直阅读我的拙文，直到最后<(_ _)>
