示例用法

如何使用云眼灰度实验 React SDK 发送决策事件、做出标帜决策和实现 Track 方法的代码示例。

先决条件

在使用客户端评估标帜规则（包括 A/B 测试和标帜传递）之前，必须：

1. 安装 React SDK。
2. 初始化 React SDK。

示例 React SDK 实现

此示例演示了以下每个概念的基本用法：

1. 使用决策挂钩评估带有键的标帜。作为副作用，决策挂钩还会向云眼灰度实验发送决策事件，以记录当前用户已暴露于实验。product_sort

2. 有条件地执行特征代码。有以下几种选择：

   1. 获取启用标帜的状态，然后检查名为 的标帜上的配置变量。SDK 会评估标帜规则，并确定用户所处的标帜变体以及他们应该看到的排序方法变量。sort_method
   2. 获取标帜变体，然后运行“控制”或“处理”代码。

3. 使用事件跟踪跟踪名为 的事件。此转化事件衡量实验的影响。使用 Track 方法，购买会自动归因于我们做出决定的正在运行的 A/B 测试，SDK 通过可自定义的事件调度程序向 Eyeofcloud 功能实验发送网络请求，以便我们可以将其计入“结果”页面。purchased

示例 React SDK 实现

import React from 'react'; import { createInstance, EyeofcloudProvider, useDecision, withEyeofcloud, } from '@eyeofcloud/react-sdk' const eyeofcloud = createInstance({ sdkKey: '<Your_SDK_Key>', // TODO: Update to your SDK Key }) function Button(props) { const handleClick = () => { const { eyeofcloud } = props; eyeofcloud.track('purchased') }; return <button onClick={handleClick}>Purchase</button>; } const PurchaseButton = withEyeofcloud(Button) function ProductSort() { const [ decision ] = useDecision('product_sort'); const variationKey = decision.variationKey; const isEnabled = decision.enabled; const sortMethod = decision.variables['sort_method']; return ( <div> { /* If variation is null, display error */ } { variationKey === null && <div className="error">{ decision.reasons }</div> } { /* If feature is enabled, do something with the Sort Method variable */ } { isEnabled && <div>The Sort method is {sortMethod}</div> } { /* Show relevant component based on the variation key */ } { variationKey === 'control' && <div>Control Component</div> } { variationKey === 'treatment' && <div>Treatment Component</div> } { /* Show Purchase Button to track Purchase event */ } <PurchaseButton /> </div> ) } function App() { return ( <EyeofcloudProvider eyeofcloud={eyeofcloud} user={{ id: 'user123' }}> <ProductSort /> </EyeofcloudProvider> ); } export default App;