示例用法

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

先决条件

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

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

示例 React SDK 实现

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

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

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

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

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

示例 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;