如果一張圖片值一千個(gè)字，那麼一個(gè)互動(dòng)式示範(fàn)一定值......一百萬？

您喜歡滾動(dòng)瀏覽流行語來了解應(yīng)用程式的用途嗎？可能不會(huì)。我並不想為我最新的熱情項(xiàng)目《Wanna》寫那麼多廢話。因此，我尋求了一個(gè)更有趣的解決方案：將我的應(yīng)用程式嵌套在自己的登陸頁面中，供用戶探索！

執(zhí)行

感謝 React 的可組合性，我們幾乎簡(jiǎn)單地渲染我們的根 App 元件並收工：

export const InteractiveDemo = () => {
    return (
        <App />
    )
}

但是，您會(huì)遇到一些問題：

1. 演示應(yīng)用程式的導(dǎo)航將導(dǎo)航到真實(shí)應(yīng)用程式
2. 演示應(yīng)用程式將檢索真實(shí)數(shù)據(jù)，這可能會(huì)失敗或無法很好地展示它
3. 使用者可能不清楚他們正在看什麼

讓我們來解決這些問題。想要使用 React Router v6 和 Apollo GraphQL，但無論技術(shù)如何，這些概念都適用。

導(dǎo)航

為了將演示應(yīng)用程式的導(dǎo)航與真實(shí)應(yīng)用程式分開，我們將其包裝在另一個(gè)導(dǎo)航提供者中：

+import { MemoryRouter, UNSAFE_LocationContext } from 'react-router'

export const InteractiveDemo = () => {
    return (
+       // Hack to nest MemoryRouter inside BrowserRouter.
+       // https://github.com/remix-run/react-router/issues/7375
+       <UNSAFE_LocationContext.Provider value={null}>
+           <MemoryRouter initialEntries={['/app']}>
                <App />
+           </MemoryRouter>
+       </UNSAFE_LocationContext.Provider>
    )
}

請(qǐng)注意，我們使用 MemoryRouter，以便在示範(fàn)內(nèi)部導(dǎo)覽時(shí)瀏覽器保持在同一頁上。

數(shù)據(jù)

為了向演示應(yīng)用程式提供虛假數(shù)據(jù)，我們使用 useState 在客戶端應(yīng)用程式內(nèi)維護(hù)一個(gè)虛假的“後端”，並透過模擬客戶端或伺服器（取決於實(shí)作）為其提供服務(wù)。它對(duì)應(yīng)用程式程式碼的其餘部分影響最小，甚至允許我們使用演示進(jìn)行手動(dòng)測(cè)試 - 在快速迭代時(shí)非常方便。

我使用了mock-apollo-client；對(duì)於 REST 或 tRPC，您可以使用類似 nock 的東西。它們用於自動(dòng)化測(cè)試，但正是我們所需要的。

首先，我們建立一個(gè)模擬客戶端，其請(qǐng)求處理程序以模仿真實(shí)後端的方式查詢和改變演示資料：

import { InMemoryCache } from '@apollo/client'
import { createMockClient, createMockSubscription } from 'mock-apollo-client'
import { useMemo, useState } from 'react'
// GraphQL documents that our client sends to the real server
import GET_FRIENDS from '../../gql/getFriends.gql'
import ADD_FRIEND from '../../gql/addFriend.gql'

// Simplified example
export const useDemoClient = () => {
    const [friends, setFriends] = useState[{
        __typename: 'User',
        id: 1,
        name: 'Nick',
    }]

    // Cache should persist across clients
    const cache = useMemo(() => { 
        // Should be the same cache configuration you provide to your real Apollo client
        return new InMemoryCache() 
    }, [])

    // We need to recreate the mock client whenever the data changes
    // because it doesn't support resetting request handlers.
    const mockClient = useMemo(() => {
        const client = createMockClient({ cache })

        client.setRequestHandler(GET_FRIENDS, () => Promise.resolve({
            data: {
                friends: friends
            }
        }))
        client.setRequestHandler(ADD_FRIEND, ({ user }) => {
            setFriends((prev) => prev.concat([user]))
            return Promise.resolve({
                data: {
                    addFriend: user
                }
            })
        })

        return client
    }, [friends])

    return mockClient
}

然後就像我們對(duì)導(dǎo)航所做的那樣，我們使用模擬客戶端將演示包裝在新的提供者中：

+import { ApolloProvider } from '@apollo/client'

export const InteractiveDemo = () => {
+   const demoClient = useDemoClient()
    return (
+       <ApolloProvider client={demoClient}> 
            <UNSAFE_LocationContext.Provider value={null}>
                <MemoryRouter initialEntries={['/app']}>
                    <App />
                </MemoryRouter>
            </UNSAFE_LocationContext.Provider>
+       </ApolloProvider>
    )
}

如果您使用模擬伺服器，則可以將其 URL 注入演示應(yīng)用程式的真實(shí)用戶端。

視覺效果

它有效！現(xiàn)在我們?nèi)绾巫層脩羟宄刂浪麄冋谟^看互動(dòng)式簡(jiǎn)報(bào)？

想要行動(dòng)優(yōu)先，所以我選擇在手機(jī)框架內(nèi)渲染示範(fàn)。我使用 devices.css 因?yàn)樗峁┝宋艺J(rèn)為看起來最好的設(shè)備（即最小邊框以最大化演示空間）。但為了簡(jiǎn)單起見，這裡我們將使用一個(gè)支援 React 開箱即用的函式庫：react-device-frameset。

我們也可以使用縮放來縮小演示 UI，並將其很好地嵌套在頁面的其餘部分中。在 Wanna 中，當(dāng)使用 時(shí)，我必須反轉(zhuǎn)並解釋這種縮放。使用 visjs-html-nodes 繪製被邀請(qǐng)者圖，但大多數(shù)情況下它「正常工作」。

export const InteractiveDemo = () => {
    return (
        <App />
    )
}

以上是立即吸引用戶：在 React SPA 中嵌入互動(dòng)式演示的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！