use-ab-test:with使用React Hooks对框架进行不可怀疑的AB和Canary测试

  • O5_143133
    了解作者
  • 143.2KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-14 03:19
    上传日期
:test_tube: use-ab-test test-使用React Hooks对框架进行无限制的A / B和Canary测试 和正Swift变得越来越流行。 该软件包试图通过提供适当的随机变体选择,为用户存储所选变体的简单预设以及与您选择使用的任何分析软件集成的轻松自定义来简化React中的这些过程。 该实现是非常轻量级的,仅压缩了2.17kb ,没有任何依赖关系,并且性能足够强大,可以根据需要在单个页面上运行许多实验。 安装 yarn add use-ab-test 用法示例 变体被配置为对象的数组,其percentage属性总计为100 。 value属性是从挂钩返回的,它们不需要序列化,因此您可以使用component , callback或您可以想象的其他任何东西 :dizzy: import useABtest , { ExperimentProvider , PRESETS } from 'use-
use-ab-test-master.zip
  • use-ab-test-master
  • rollup.config.js
    86B
  • jest.setup.js
    670B
  • yarn.lock
    286.9KB
  • .eslintrc.js
    129B
  • src
  • presets
  • localStorage.test.js
    2.1KB
  • sessionStorage.js
    182B
  • mapping.js
    254B
  • mapping.test.js
    498B
  • createPreset.js
    487B
  • localStorage.js
    178B
  • sessionStorage.test.js
    2.1KB
  • validateVariants.test.js
    985B
  • random.test.js
    1.7KB
  • random.js
    729B
  • context
  • ExperimentProvider.js
    1.6KB
  • initialProps.test.js
    558B
  • ExperimentContext.js
    130B
  • initialProps.js
    345B
  • hook
  • useABtest.test.js
    3.9KB
  • useExperimentContext.js
    152B
  • useABtest.js
    2.2KB
  • __snapshots__
  • validateVariants.test.js.snap
    303B
  • const.js
    132B
  • validateVariants.js
    271B
  • index.js
    213B
  • fixtures
  • messages.js
    205B
  • twenties.js
    515B
  • fiftyFifty.js
    246B
  • canary.js
    246B
  • babel.config.js
    99B
  • scripts
  • generateBadges.js
    428B
  • repeatTests.sh
    49B
  • generateBadges.sh
    160B
  • LICENSE
    34.3KB
  • jest.config.js
    238B
  • README.md
    6.8KB
  • test-utils
  • index.js
    583B
  • .gitignore
    26B
  • package.json
    1.4KB
  • badges
  • badge-branches.svg
    1.2KB
  • badge-functions.svg
    1.2KB
  • badge-lines.svg
    1.1KB
  • badge-statements.svg
    1.2KB
内容介绍
![badge-branches.svg](./badges/badge-branches.svg) ![badge-functions.svg](./badges/badge-functions.svg) ![badge-lines.svg](./badges/badge-lines.svg) ![badge-statements.svg](./badges/badge-statements.svg) # 🧪 `use-ab-test` - Unopinionated, framework-agnostic A/B and Canary testing with React Hooks [A/B testing](https://en.wikipedia.org/wiki/A/B_testing) and [Canary releases](https://en.wikipedia.org/wiki/Feature_toggle#Canary_release) are quickly becoming more and more popular. This package attempts to simplify these processes in React by providing suitably random variant selection, simple presets for memorising selected variants for users, and easy customisation for integrating with whatever analytics software you choose to use. The implementation is very lightweight coming in at just **2.17kb** gzipped with no dependencies, and performance is strong enough to run many experiments on a single page if desired. ## Installation ``` yarn add use-ab-test ``` ## Example Usage Variants are configured as an array of objects with `percentage` properties adding up to `100`. `value` properties are returned from the hook, and they don't need to be serialised so you can use a **component**, **callback** or anything else you can imagine 💫 ```jsx import useABtest, { ExperimentProvider, PRESETS } from 'use-ab-test'; const variants = [ { value: 'Normal Message', percentage: 50 }, { value: 'New Awesome Message!', percentage: 50 } ]; const Message = () => { // Message text has a 50/50 chance of being either // 'Normal Message' or 'New Awesome Message!' const messageText = useABtest('message-test', variants); return <div>{messageText}</div> }; const App = () => { const onVariantSelect = ({ value, variantIndex, experimentId, variants }) => console.log(`Selected ${value} at index ${variantIndex} for ${experimentId}`); return ( // Using the `LOCAL_STORAGE` preset means this user's message variant // will be saved indefinitely and won't change on reload / rerender <ExperimentProvider preset={PRESETS.LOCAL_STORAGE} onVariantSelect={onVariantSelect}> <Message /> </ExperimentProvider> ); }; ``` ### Saving selected segments In this example, we use a selector to get the `user.id` from Redux, and reference it when saving the selected value so we can analyse how this user reacted to their selected variant. This can most easily be achieved by creating a wrapper for `ExperimentProvider` so it can consume the value from the Redux context. ```jsx import { useSelector } from 'react-redux'; import useABtest, { ExperimentProvider, PRESETS } from 'use-ab-test'; const LoggingExperimentProvider = ({ children }) => { const userId = useSelector(state => state.user.id); const onVariantSelect = ({ value, variantIndex, experimentId }) => { post(`/api/${userId}/log`, { value, variantIndex, experimentId }).then(() => console.log('Finished saving!')); }; return ( <ExperimentProvider preset={PRESETS.LOCAL_STORAGE} onVariantSelect={onVariantSelect}> {children} </ExperimentProvider> ); } const App = () => ( <LoggingExperimentProvider> <Message /> </LoggingExperimentProvider> ); ``` ### Presets | Preset Name | Description | |-----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `LOCAL_STORAGE` | Store selected segments in `window.localStorage`. This won't expire until explicitly cleared. | | `SESSION` | Store selected segments in `window.sessionStorage`. This will expire at the end of the session (behaviour varies by browser so you should **almost always** prefer `LOCAL_STORAGE`, or a [Custom Preset](#Custom-Presets)). | ## Testing You may come across errors when testing due to `window.crypto` being undefined. The package provides a set of `/test-utils` exports to help with this. ```jsx import { setupWindowCrypto, teardownWindowCrypto } from 'use-ab-test/test-utils'; describe('some component', () => { beforeEach(() => setupWindowCrypto()); afterEach(() => teardownWindowCrypto()); }); ``` ## Advanced Usage ### Custom Presets `use-ab-test` exports a `createPreset` method for easily plugging in your preferred method of storage. The keys and values you need to store are provided to the supplied callbacks. Here's an example with [universal-cookie](https://github.com/reactivestack/cookies/tree/master/packages/universal-cookie) ```jsx import { ExperimentProvider, createPreset } from "use-ab-test"; import Cookies from 'universal-cookie'; const cookies = new Cookies(); const cookieStorage = createPreset({ set: (key, val) => cookies.set(key, val, { path: '/' }), get: (key) => cookies.get(key), }); const App = ({ children }) => ( <ExperimentProvider preset={cookieStorage}> {children} </ExperimentProvider> ); ``` ### Custom random implementation The default random implementation uses `window.crypto.getRandomValues()` and is random enough for all standard usage, but providing a new implementation for random is simple! Here's an example using `Math.random()` instead. ```jsx const App = ({ children }) => ( <ExperimentProvider preset={PRESETS.LOCAL_STORAGE} random={{ // Function to call to get random value handler: Math.random, // Lowest possible number returned from the function lowest: 0, // Highest possible number returned from the function highest: 1, }} > {children} </ExperimentProvider> ); ``` ### Custom keys / values By default when using any preset, the keys and values placed in storage are handled by the package. If you want to override this behaviour, you can create a preset object manually instead of using the `createPreset` helper function. ```jsx const customPreset = { // Save the selected variant saveVariant: ({ value, variantIndex, experimentId, variants }) => { saveVariantSomehow(experimentId, variantIndex); }, // Return selected variant, or `null` to make the selection again beforeVariantSelect: ({ value, variantIndex, experimentId, variants }) => { const selectedVariant = checkForSavedVariant(experimentId); return selectedVariant ?? null; }, }; const Wrapper = ({ children }) => ( <ExperimentProvider preset={customPreset}> {children} </ExperimentProvider> ) ```
评论
    相关推荐