如果圖片值得一千個單詞，那麼一個交互式演示必須值得...一百萬？ 您喜歡通過流行語滾動以了解應用程序的目的嗎？可能不是。而且我不在乎為我的最新激情項目Wanna寫所有這些泡沫。因此，我追求了一個更有趣的解決方案：將我的應用程序嵌入其自己的著陸頁中供用戶探索！ [2

這個GIF具有263幀，所以我想它值263,000個單詞

執行

感謝React的合成性，我們可以

只需渲染我們的root App組件並將其稱為一天：

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

演示應用程序的導航將導航真實的應用

演示應用程序將檢索真實數據，該數據可能會失敗或不顯示它
對於用戶所看的

的內容可能並不明顯

export const InteractiveDemo = () => {
    return (
        
    )
}

讓我們解決這些問題。 Wanna使用React路由器V6和Apollo GraphQl，但是這些概念都適用於技術。

導航

要將演示應用程序的導航與真實應用程序分開，我們將其包裝在另一個導航提供商中：
}> ） }
注意我們使用了一個內存曲線，因此演示內部導航時，瀏覽器保留在同一頁面上。
數據

為了向演示應用提供假數據，我們使用usestate在客戶端應用程序中維護一個假的“後端”，並通過模擬客戶端或服務器（取決於實現）。它對其餘的APP代碼的侵入性最少，甚至讓我們使用演示進行手動測試 - 快速迭代時非常方便。

我使用了Mock-apollo-client;對於休息或TRPC，您可以使用諸如Nock之類的東西。它們是用於自動測試的，但正是我們在這裡需要的。

首先，我們創建了一個模擬客戶端，其請求處理查詢並突變演示數據，以模仿真正的後端：

= usestate [{ __Typename：“用戶”， ID：1， 名稱：'nick'， ]] //緩存應持續到客戶端 const cache = usememo（（）=> { //應與您提供給真正的Apollo客戶端的緩存配置相同 返回新的inmemorycache（） }，[]） //我們需要在數據更改時重新創建模擬客戶端 //因為它不支持重置請求處理程序。 const oighclient = usememo（（）=> { const client = createMockclient（{cache}） client.setrequesthandler（get_friends，（）=> promise.resolve（{{ 數據： { 朋友：朋友 } }））） client.setRequesthandler（add_friend，（{user}）=> { setFriends（（（prev）=> prev.concat（[[user]））） 返回Promise.sroove（{ 數據： { 添加朋友：用戶 } }）） }）） 返回客戶端 }， [朋友們]） 返回模擬者 }

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

然後，就像我們對導航所做的一樣，我們與模擬客戶端一起將演示包裝在新的提供商中：

}> ） }

如果您使用模擬服務器，則將其URL注入Demo App的真實客戶端。

視覺效果

有用！現在，我們如何使用戶顯而易見他們正在查看交互式演示？

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
}

最後，有一個動畫有幫助，因此顯然不是靜態圖像。例如，想在活動輸入字段中不斷提出的幽靈類型建議。

一體化

export const InteractiveDemo = () => {
    return (
        
    )
}

現在我們擁有InteractiveMo組件，我們將其渲染到我們的著陸頁中，我們完成了！

導出const landing =（）=> { 返回 （ ） }