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

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《立即吸引用户：在 React SPA 中嵌入交互式演示》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

如果一张图片胜过千言万语，那么一个交互式演示的价值……岂止百万？

您是否喜欢通过冗长的说明文字来了解应用程序的功能？可能不会。我不想为我的最新项目 Wanna 撰写过多的赘述。因此，我寻求了一种更具吸引力的解决方案：将我的应用程序嵌入到登录页面中，供用户直接体验！

实现

借助 React 的可组合性，我们几乎可以简单地渲染根应用程序组件并结束：

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

但是，您可能会遇到一些问题：

1. 演示应用程序的导航会跳转到真实应用程序。
2. 演示应用程序会检索真实数据，这可能导致失败或无法有效地展示其功能。
3. 用户可能不清楚他们正在查看的是什么。

让我们逐一解决这些问题。我使用了 React Router v6 和 Apollo GraphQL，但无论您使用何种技术，这些概念都是通用的。

导航

为了将演示应用程序的导航与真实应用程序隔离开来，我们将其封装在另一个导航提供程序中：

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

export const interactiveDemo = () => {
    return (
+       // 解决嵌套 MemoryRouter 在 BrowserRouter 内的问题。
+       // https://github.com/remix-run/react-router/issues/7375
+       <UNSAFE_LocationContext.Provider value={null}>
+           <MemoryRouter initialEntries={['/app']}><App /></MemoryRouter>
+       </UNSAFE_LocationContext.Provider>
    )
}

请注意，我们使用了 MemoryRouter，以便在演示内部导航时浏览器保持在同一页面上。

数据

为了向演示应用程序提供模拟数据，我们在客户端应用程序内维护一个模拟的“后端”，并通过模拟客户端或服务器（取决于您的实现）为其提供服务。这最大限度地减少了对应用程序其余部分的影响，甚至允许我们使用演示进行手动测试——在快速迭代时非常方便。

我使用了 mock-apollo-client；对于 REST 或 tRPC，您可以使用类似 nock 的工具。这些工具通常用于自动化测试，但它们正是我们所需要的。

首先，我们创建一个模拟客户端，其请求处理程序以模仿真实后端的方式查询和修改演示数据：

import { InMemoryCache } from '@apollo/client'
import { createMockClient, createMockSubscription } from 'mock-apollo-client'
import { useMemo, useState } from 'react'
// 您的客户端发送到真实服务器的 GraphQL 文档
import getFriends from '../../gql/getFriends.gql'
import addFriend from '../../gql/addFriend.gql'

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

    // 缓存应该在客户端之间持久化
    const cache = useMemo(() => {
        // 应该与您提供给真实 Apollo 客户端的缓存配置相同
        return new InMemoryCache()
    }, [])

    // 每当数据更改时，我们都需要重新创建模拟客户端，
    // 因为它不支持重置请求处理程序。
    const mockClient = useMemo(() => {
        const client = createMockClient({ cache })

        client.setRequestHandler(getFriends, () => Promise.resolve({
            data: {
                friends: friends
            }
        }))
        client.setRequestHandler(addFriend, ({ variables: { 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 mockClient = useDemoClient()
    return (
+       <ApolloProvider client={mockClient}>
+           <UNSAFE_LocationContext.Provider value={null}>
+               <MemoryRouter initialEntries={['/app']}><App /></MemoryRouter>
+           </UNSAFE_LocationContext.Provider>
+       </ApolloProvider>
    )
}

如果您使用模拟服务器，则可以将其 URL 注入演示应用程序的真实客户端。

视觉效果

它有效！那么我们如何让用户清楚地知道他们正在查看交互式演示呢？

我更倾向于移动优先，因此我选择在一个手机框架内渲染演示。我使用了 devices.css，因为它提供了我认为外观最佳的设备（即最小边框以最大化演示空间）。但为了简单起见，这里我们将使用一个开箱即用支持 React 的库：react-device-frameset。

我们还可以使用缩放来缩小演示 UI，并将其很好地嵌套在页面的其余部分中。在 Wanna 中，当使用 <canvas> 和 visjs-html-nodes 绘制被邀请者图时，我必须反转并解释这种缩放，但在大多数情况下它“正常工作”。

+import { DeviceFrameset } from 'react-device-frameset'
+import 'react-device-frameset/styles/marvel-devices.min.css'

export const interactiveDemo = () => {
    const mockClient = useDemoClient()
    return (
+       <DeviceFrameset device="iPhone X" style={{ zoom: 0.8 }}>
+           <ApolloProvider client={mockClient}>
+               <UNSAFE_LocationContext.Provider value={null}>
+                   <MemoryRouter initialEntries={['/app']}><App /></MemoryRouter>
+               </UNSAFE_LocationContext.Provider>
+           </ApolloProvider>
+       </DeviceFrameset>
    )
}

最后，添加动画效果会有所帮助，这样它就不会显得像静态图像。例如，Wanna 会在活动的输入字段中不断地幽灵输入建议。

集成

现在我们有了 interactiveDemo 组件，我们将其渲染到登录页面中，就完成了！

export const Landing = () => {
    return (
        <div>
            {/* ... */}
+           <interactiveDemo />
            {/* ... */}
        </div>
    )
}

好了，本文到此结束，带大家了解了《立即吸引用户：在 React SPA 中嵌入交互式演示》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！