立即吸引用戶：在 React SPA 中嵌入互動式演示

如果一張圖片值一千個字，那麼一個互動式示範一定值......一百萬？

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

這張 gif 有 263 幀，所以我猜它值 263,000 個字

執行

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

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

但是，您會遇到一些問題：

1. 演示應用程式的導航將導航到真實應用程式
2. 演示應用程式將檢索真實數據，這可能會失敗或無法很好地展示它
3. 使用者可能不清楚他們正在看什麼

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

導航

為了將演示應用程式的導航與真實應用程式分開，我們將其包裝在另一個導航提供者中：

+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>
    )
}

請注意，我們使用 MemoryRouter，以便在示範內部導覽時瀏覽器保持在同一頁上。

數據

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

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

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

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
}

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

+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 注入演示應用程式的真實用戶端。

視覺效果

它有效！現在我們如何讓用戶清楚地知道他們正在觀看互動式簡報？

想要行動優先，所以我選擇在手機框架內渲染示範。我使用 devices.css 因為它提供了我認為看起來最好的設備（即最小邊框以最大化演示空間）。但為了簡單起見，這裡我們將使用一個支援 React 開箱即用的函式庫：react-device-frameset。

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

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

以上是立即吸引用戶：在 React SPA 中嵌入互動式演示的詳細內容。更多資訊請關注PHP中文網其他相關文章！