亚洲视频免费播放,四虎成人免费影院网址,免费国产一级特黄久久

大家好，我是皮湯。周五翻 Github 趨勢榜看到了 Remix 這個內(nèi)容，覺得挺有發(fā)展前景的，初步了解了一下具體的特性，分享給大家。

近期，由 React Router 原班團隊打造，基于 TypeScript 與 React，內(nèi)建 React Router V6 特性的全棧 Web 框架 Remix 正式開源。目前占據(jù) Github 趨勢總榜前 3，Github 標星 5K+ Star：

Remix 開源之后可以說是在 React 全?？蚣茴I(lǐng)域激起千層浪，絕對可以算是 Next.js 的強勁對手。Remix 的特性如下：

追求速度，然后是用戶體驗(UX)，支持任何 SSR/SSG 等
基于 Web 基礎技術(shù)，如 HTML/CSS 與 HTTP 以及 Web Fecth API，在絕大部分情況可以不依賴于 JavaScript 運行，所以可以運行在任何環(huán)境下，如 Web Browser、Cloudflare Workers、Serverless 或者 Node.js 等
客戶端與服務端一致的開發(fā)體驗，客戶端代碼與服務端代碼寫在一個文件里，無縫進行數(shù)據(jù)交互，同時基于 TypeScript，類型定義可以跨客戶端與服務端共用
內(nèi)建文件即路由、動態(tài)路由、嵌套路由、資源路由等
干掉 Loading、骨架屏等任何加載狀態(tài)，頁面中所有資源都可以預加載(Prefetch)，頁面幾乎可以立即加載
告別以往瀑布式(Waterfall)的數(shù)據(jù)獲取方式，數(shù)據(jù)獲取在服務端并行(Parallel)獲取，生成完整 HTML 文檔，類似 React 的并發(fā)特性
提供開發(fā)網(wǎng)頁需要所有狀態(tài)，開箱即用；提供所有需要使用的組件，包括 <Links> 、<Link>、 <Meta> 、<Form> 、<Script/> ，用于處理元信息、腳本、CSS、路由和表單相關(guān)的內(nèi)容
內(nèi)建錯誤處理，針對非預期錯誤處理的 <ErrorBoundary> 和開發(fā)者拋出錯誤處理的 <CatchBoundary>

特性這么多?不明覺厲!接下來我們就嘗試一一來展示這些 Remix 的特性。

一致的開發(fā)體驗

Remix 提供基于文件的路由，將讀取數(shù)據(jù)、操作數(shù)據(jù)和渲染數(shù)據(jù)的邏輯都寫在同一個路由文件里，方便一致性處理，這樣可以跨客戶端和服務端邏輯共享同一套類型定義。

看一段官網(wǎng)的代碼：

import type { Post } from "~/post";
import { Outlet, Link, useLoaderData, useTransition } from "remix";
let postsPath = path.join(__dirname, "..", "posts");
async function getPosts() {
let dir = await fs.readdir(postsPath);
return Promise.all(
dir.map(async (filename) => {
let file = await fs.readFile(path.join(postsPath, filename));
let { attributes } = parseFrontMatter(file.toString());
invariant(
isValidPostAttributes(attributes),
`${filename} has bad meta data!`
);
return {
slug: filename.replace(/.md$/, ""),
title: attributes.title,
};
})
);
}
async function createPost(post: Post) {
let md = `---\ntitle: ${post.title}\n---\n\n${post.markdown}`;
await fs.writeFile(path.join(postsPath, post.slug + ".md"), md);
return getPost(post.slug);
}
export async function loader({ request }) {
return getProjects();
}
export async function action({ request }) {
let form = await request.formData();
const post = createPost({ title: form.get("title") });
return redirect(`/posts/${post.id}`);
}
export default function Projects() {
let posts = useLoaderData<Post[]>();
let { state } = useTransition();
let busy = state === "submitting";
return (
<div>
{posts.map((post) => (
<Link to={post.slug}>{post.title}</Link>
))}
<Form method="post">
<input name="title" />
<button type="submit" disabled={busy}>
{busy ? "Creating..." : "Create New Post"}
</button>
</Form>
<Outlet />
</div>
);
}

上述是一個路由文件，如果它是 src/routes/posts/index.tsx 文件，那么我們開啟服務器，通過 localhost:3000/posts 就可以訪問到這個文件，這就是文件即路由，而默認導出的 Projects 函數(shù)，即為一個 React 函數(shù)式組件，此函數(shù)的返回模板則為訪問這個路由的 HTML 文檔。

每個路由函數(shù)，如 Projects 可以定義一個 loader 函數(shù)，類似處理 GET 請求的服務端函數(shù)，可以獲取到路由信息，為初次服務端渲提供數(shù)據(jù)，在這個函數(shù)中可以獲取文件系統(tǒng)、請求數(shù)據(jù)庫、進行其他網(wǎng)絡請求，然后返回數(shù)據(jù)，在我們的 Projects 組件里，可以通過 Remix 提供的 useLoaderData 鉤子拿到 loader 函數(shù)獲取到的數(shù)據(jù)。
每個路由函數(shù)也可以定義一個 action 函數(shù)，用于進行實際的操作，類似處理非 GET 請求，如 POST/PUT/PATCH/DELETE 的操作的函數(shù)，它可以操作修改數(shù)據(jù)庫、寫入文件系統(tǒng)等，同時其返回的結(jié)果可能是實際的數(shù)據(jù)或是重定向到某個新頁面，如 redirect("/admin")。當 action 函數(shù)返回數(shù)據(jù)或錯誤信息時，我們可以通過 Remix 提供的 useActionData 鉤子拿到這個返回的錯誤信息，進行前端的展示等。

值得注意的是，action 函數(shù)是在 <Form method="post"> 表單里，用戶點擊提交按鈕之后自動調(diào)用，Remix 通過 Fetch API 的形式去調(diào)用，然后在前端不斷的輪詢獲取調(diào)用結(jié)果，且自動處理用戶多次點擊時的競爭情況。

你的瀏覽器網(wǎng)絡面板將呈現(xiàn)如下情況，自動 Remix 發(fā)起 POST 請求，然后處理重定向到 /post/${post.id} ，同時加載對應的 /posts 和 /posts/${post.id} 對應的路由頁面內(nèi)容。

通過 Remix 提供的 useTransition 鉤子，我們可以拿到表單提交的狀態(tài)，當請求還未返回結(jié)果時，我們可以通過這個狀態(tài) state 判斷是否要展示一個加載狀態(tài)，提示用戶當前的請求進展。

同時 Post 類型在 useLoaderData

有同學可能注意到了，上面我們整個頁面渲染、到發(fā)起創(chuàng)建 Post 請求、到后臺創(chuàng)建 Post，到重定向到 Post 詳情，這整個過程，我們無需在前端使用任何 JavaScript 相關(guān)的內(nèi)容，僅僅通過 HTML 與 HTTP 就完成了這個交互，所以 Remix 的網(wǎng)站在 Disbaled JavaScript 運行環(huán)境下也可以正常工作。

通過上圖我們可以看到，即使 JavaScript 已經(jīng)關(guān)閉了，我們的網(wǎng)站依然可以正常運行。

強大的嵌套路由體系

基于文件即路由的理念，我們無需集中的維護一套路由定義，當我們創(chuàng)建了對應的文件之后，Remix 就為我們注冊了對應的路由。

而 Remix 最具特色的功能之一就是嵌套路由。在 Remix 中，一個頁面通常包含多層級頁面，每個子頁面控制自身的 UI 展現(xiàn)，而且獨立控制自身的數(shù)據(jù)加載和代碼分割。

拿官網(wǎng)的例子來看如下：

上述頁面的對應關(guān)系如下：

整個頁面模塊為 / 、而對應到 /sales 則是右邊的整塊天藍色內(nèi)容、/sales/invoices 對應到黃色的部分、/sales/invoices/102000 則對應到右下角的紅色部分

整個路由分層，對應到整個頁面的分層視圖，而每個分層下的代碼都是獨立編寫，視圖渲染獨立渲染，數(shù)據(jù)獨立獲取，錯誤獨立展示。

來看一個實際例子：

// src/root.tsx
import {
Outlet,
export default function App() {
return (
<Document>
<Layout>
<Outlet />
</Layout>
</Document>
);
}
function Document() {}
function Layout() {}

// src/routes/admin.tsx
import { Outlet, Link, useLoaderData } from "remix";
import { getPosts } from "~/post";
import type { Post } from "~/post";
import adminStyles from "~/styles/admin.css";
export let links = () => {
return [{ rel: "stylesheet", href: adminStyles }];
};
export let loader = () => {
return getPosts();
};
export default function Admin() {
let posts = useLoaderData<Post[]>();
return (
<div className="admin">
<nav>
<h1>Admin</h1>
<ul>
{posts.map((post) => (
<li key={post.slug}>
<Link to={post.slug}>{post.title}</Link>
</li>
))}
</ul>
</nav>
<main>
<Outlet />
</main>
</div>
);
}

// src/routes/admin/index.tsx
import { Link } from "remix";
export default function AdminIndex() {
return (
<p>
<Link to="new">Create a New Post</Link>
</p>
);
}

// src/routes/admin/new.tsx
import { useTransition, useActionData, redirect, Form } from "remix";
import type { ActionFunction } from "remix";
import { createPost } from "~/post";
import invariant from "tiny-invariant";
export let action: ActionFunction = async ({ request }) => {
await new Promise((res) => setTimeout(res, 1000));
let formData = await request.formData();
let title = formData.get("title");
let slug = formData.get("slug");
let markdown = formData.get("markdown");
let errors = {};
if (!title) errors.title = true;
if (!slug) errors.slug = true;
if (!markdown) errors.markdown = true;
if (Object.keys(errors).length) {
return errors;
}
await createPost({ title, slug, markdown });
return redirect("/admin");
};
export default function NewPost() {
let errors = useActionData();
let transition = useTransition();
return (
<Form method="post">
<p>
<label>
Post Title: {errors?.title && <em>Title is required</em>}
<input type="text" name="title" />
</label>
</p>
<p>
<label>
Post Slug: {errors?.slug && <em>Slug is required</em>}{" "}
<input type="text" name="slug" />
</label>
</p>
<p>
<label htmlFor="markdown">Markdown:</label>{" "}
{errors?.markdown && <em>Markdown is required</em>}
<br />
<textarea rows={20} name="markdown" />
</p>
<p>
<button type="submit">
{transition.submission ? "Create..." : "Create Post"}
</button>
</p>
</Form>
);
}

上述代碼渲染的頁面如下：

整個 App 網(wǎng)站是由 <Document> 嵌套 <Layout> 組成，其中 <Outlet> 是路由的填充處，即上圖中綠色的部分。當我們訪問 localhost:3000/ 時，其中填充的內(nèi)容為 src/routes/index.tsx 路由文件對應的渲染內(nèi)容，而當我們訪問 localhost:3000/admin 時，對應的是 src/routes/admin.tsx 路由文件對應的渲染內(nèi)容。

而我們在的 src/routes/admin.tsx 繼續(xù)提供了 <Outlet> 路由顯然組件，意味著當我們繼續(xù)添加分級（嵌套）路由時，如訪問 http://localhost:3000/admin/new 那么這個 <Outlet> 會渲染 src/routes/admin/new.tsx 對應路由文件的渲染內(nèi)容，而訪問 http://localhost:3000/admin 時，<Outlet> 部分會渲染 src/routes/admin/index.tsx 對應路由文件的渲染內(nèi)容，見下圖：

而這種嵌套路由是自動發(fā)生的，當你創(chuàng)建了一個 src/routes/admin.tsx 之后，又創(chuàng)建了一個同名的文件夾，并在文件夾下建立了其它文件，那么這些文件的文件名會被注冊為下一級的嵌套路由名：

localhost:3000/admin 同時注冊 src/routes/admin.tsx 和 src/routes/admin/index.tsx
localhost:3000/admin/new 注冊 src/routes/admin/new.tsx

通過這種文件即路由，同名文件夾下文件即嵌套路由的方式，然后通過在父頁面里面通過的方式渲染根據(jù)子路由渲染子頁面內(nèi)容，極大的增加了靈活性，且每個子路由對應獨立的路由文件，具有獨立的數(shù)據(jù)處理邏輯、內(nèi)容渲染邏輯、錯誤處理邏輯。

上述嵌套路由一個顯而易見的優(yōu)點就是，某個部分如果報錯了，結(jié)合后續(xù)會提到的 ErrorBoundary 和 CatchBoundary 這個部分可以顯示錯誤的頁面，而用戶仍然可以操作其他部分，而不需要刷新整個頁面以重新加載使用，極大提高網(wǎng)站容錯性。

再見，加載狀態(tài)

通過嵌套路由，Remix 可以干掉幾乎所有的加載狀態(tài)、骨架屏，現(xiàn)在很多應用都是在前端組件里進行數(shù)據(jù)獲取，獲取前置數(shù)據(jù)之后，然后用前置數(shù)據(jù)去獲取后置的數(shù)據(jù)，形成了一個瀑布式的獲取形式，當數(shù)據(jù)量大的時候，頁面加載就需要很長時間，所以絕大部分網(wǎng)站都會放一個加載的狀態(tài)，如小菊花轉(zhuǎn)圈圈，或者體驗更好一點的骨架屏，如下：

這是因為這些應用缺乏類似 Remix 這樣的嵌套路由的概念，訪問某個路由時，就是訪問這個路由對應的頁面，只有這個頁面加載出來之后，里面的子組件渲染時，再進行數(shù)據(jù)的獲取，再加載子組件，如此往復，就呈現(xiàn)瀑布流式的加載，帶來了很多中間的加載狀態(tài)。

而 Remix 提供了嵌套路由，當訪問路由 localhost:3000/admin/new 時，會加載三級路由，同時這三個路由對應的頁面獨立、并行加載，獨立、并行獲取數(shù)據(jù)，最后發(fā)送給客戶端的是一個完整的 HTML 文檔，如下過程：

可見雖然我們首屏拿到內(nèi)容可能會慢一點，但是再也不需要加載狀態(tài)，再見，菊花圖,再見，骨架屏。

同時借助嵌套路由，當我們鼠標 Hover 到某個鏈接準備點擊切換某個子路由時，Remix 提供了預獲取(Prefetch)功能，可以提前并行獲取子路由文檔和各種資源，包括 CSS、圖片、相關(guān)數(shù)據(jù)等，這樣當我們實際點擊這個鏈接切換子路由時，頁面可以立即呈現(xiàn)出來：

完善的錯誤處理

我們的網(wǎng)站經(jīng)常會遇到問題，使用其他框架編寫時，網(wǎng)站遇到問題可能用戶就需要重新刷新網(wǎng)站，而對于 Remix 來說，基于嵌套路由的理念，則無需重新刷新，只需要在對應的錯誤的子路由展示錯誤信息，而頁面的其他部分仍然可以正常工作：

比如我們上圖的右下角子路由出現(xiàn)了問題，那么這塊會展示出問題時的錯誤頁面，而其他頁面部分仍然展示正常的信息。

正因為錯誤經(jīng)常發(fā)生，且處理錯誤異常困難，包含客戶端、服務端的各種錯誤，包含預期的、非預期的錯誤等，所以 Remix 內(nèi)建了完善的錯誤處理機制，提供了類似 React 的 ErrorBoundary 的理念。

在 Remix 中，每個路由函數(shù)對應一個 ErrorBoundary 函數(shù)：

export default function RouteFunction() {}
export function ErrorBoundary({ error }) {
console.error(error);
return (
<div>
<h2>Oh snap!</h2>
<p>
There was a problem loading this invoice
</p>
</div>
);
}

ErrorBoundary 函數(shù)代表處理那些來自 loader 和 action，客戶端或服務端的非預期的錯誤，當出現(xiàn)這些非預期的錯誤時，就會激活這個函數(shù)，顯示對應函數(shù)的表示錯誤信息的 UI。

同時每個路由函數(shù)對應著一個 CatchBoundary 函數(shù)：

import { useCatch } from "remix";
export function CatchBoundary() {
let caught = useCatch();
return (
<div>
<h1>Caught</h1>
<p>Status: {caught.status}</p>
<pre>
<code>{JSON.stringify(caught.data, null, 2)}</code>
</pre>
</div>
);
}

CatchBoundary 函數(shù)對應著預期的錯誤，即你在 loader、action 函數(shù)中，在客戶端或服務端，手動拋出的 Response 錯誤，這些錯誤的路徑是可預期的，在 CatchBoundary 中，通過 useCatch 鉤子獲取這些拋出的 Response 錯誤，然后展示對于的錯誤信息的 UI。

當我們沒有在子路由中添加 ErrorBoundary 或 CatchBoundary 函數(shù)時，一旦遇到錯誤，這些錯誤就會向更上一級的路由冒泡，直至最頂層的路由頁面，所以你只最好在最頂層的路由文件里聲明一個 ErrorBoundary 和 CatchBoundary 函數(shù)，用于捕獲所有可能的錯誤，然后在代碼審查( Code Review)時及時排查出來。

基于 Web 基礎技術(shù)

Remix 專注于用 Web 基礎技術(shù)，HTML/CSS + HTTP 等解決問題，同時提供了在 Web 全棧開發(fā)框架中所需要的所有狀態(tài)和所有基礎組件。

其中相關(guān)狀態(tài)包含：

// 加載數(shù)據(jù)的狀態(tài)
useLoaderData()
// 更新數(shù)據(jù)的狀態(tài)
useActionData()
// 提交表單等相關(guān)狀態(tài)
useFormAction()
useSubmit()
// 統(tǒng)一的加載狀態(tài)
useTransition()
// 錯誤抓取狀態(tài)等
useCatch()

以及 Web 網(wǎng)站組成的基礎組件：

<Meta> 用于動態(tài)的設置網(wǎng)頁的元信息，方便 SEO
<Script> 用于告知 Remix 是否需要在加載網(wǎng)頁時導入相關(guān) JS，因為大部分情況下 Remix 編寫的頁面無需 JS 也能正常工作
<Form> 用于替代原生的 <form> 方便在客戶端和服務端進行表單操作，接管提交時的相應功能，使用 Fetch API 發(fā)起請求等，以及處理多次重復提交的競爭狀態(tài)等

同時在路由函數(shù)所在文件里，可以通過聲明 link 、meta 、links 、headers 等函數(shù)來聲明對應的功能：

links 變量函數(shù)：表示此頁面需要加載的資源，如 CSS、圖片等

import type { LinksFunction } from "remix";
import stylesHref from "../styles/something.css";
export let links: LinksFunction = () => {
return [
// add a favicon
{
rel: "icon",
href: "/favicon.png",
type: "image/png"
},
// add an external stylesheet
{
rel: "stylesheet",
href: "https://example.com/some/styles.css",
crossOrigin: "true"
},
// add a local stylesheet, remix will fingerprint the file name for
// production caching
{ rel: "stylesheet", href: stylesHref },
// prefetch an image into the browser cache that the user is likely to see
// as they interact with this page, perhaps they click a button to reveal in
// a summary/details element
{
rel: "prefetch",
as: "image",
href: "/img/bunny.jpg"
},
// only prefetch it if they're on a bigger screen
{
rel: "prefetch",
as: "image",
href: "/img/bunny.jpg",
media: "(min-width: 1000px)"
}
];
};

links 函數(shù)：聲明需要 Prefetch 的頁面，當用戶點擊之前就加載好資源

export function links() {
return [{ page: "/posts/public" }];
}

meta 函數(shù)：與組件類似，聲明頁面需要的元信息

import type { MetaFunction } from "remix";
export let meta: MetaFunction = () => {
return {
title: "Josie's Shake Shack", // <title>Josie's Shake Shack</title>
description: "Delicious shakes", // <meta name="description" content="Delicious shakes">
"og:image": "https://josiesshakeshack.com/logo.jpg" // <meta property="og:image" content="https://josiesshakeshack.com/logo.jpg">
};
};