如果图片值得一千个单词，那么一个交互式演示必须值得...一百万？ 您喜欢通过流行语滚动以了解应用程序的目的吗？可能不是。而且我不在乎为我的最新激情项目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 =（）=> { 返回 （ ） }