使用 React 在前端进行 AB 测试

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

¡Hola Frontender@！ ✨ 如果您已经进行了AB 测试，那么您就可以在实践中使用它，这是一种确定方法的方法，它是一种新的生产理念，不是一种常用的方法，它对谈判中的度量产生了影响，在定义中， te conviene conservarla o no。

引言

Trabajo 是 👨🏻‍💻 Desarrollador Frontend en Adevinta Spain，可快速生产 acaba 和百万用户。根据条件，在灾难中发生的后果将是不可想象的。

AB 测试需要一个平台来管理数据。 Para eso 存在各种选项，我们可以优化。目前为止，所有类似的内容都与 React 相关，但没有任何内容，请参阅 React 部分的文章。

Dicho esto，hablemos de ⚛️ React。我想通过前端的生动体验来了解前端的一些困难，同时也考虑到我们的首要解决方案，以及今天的使用方法。

第一个解决方案

Vamos a poner un ejemplo sencillo。想象一下，当你的按钮上的文本受到冲击时，它会受到其他文本的影响，从而使按钮变得更有吸引力。

En Optimizely configurarías algo como lo siguiente y obtendrías unos IDs。

Nuestro Primer enfoque fue diseñar un que le pasabas ender de cadavarie como un hijo, y te renderizaba automáticamente el que coría lavarie asignada al usuario .

<Experiment experimentId={123}>
  <button variationId={1116} defaultVariation>Comprar</button>
  <button variationId={1117}>¡Compra ya!</button>
</Experiment>

原始的变体是一个辅助骆驼的道具，defaultVariation它可以识别出叛逃者的身份。

对于大家来说，我们的声明和结果是一致的。

这是一种更重要的功能，但要符合更多的兴趣和多样化的实验，我们会邀请一些反射来限制我们对设计的体验。

⚠️ 限制 #1 – 本地 Probar 变体

最大的限制是当地可能发生的变化，但电影中没有 defaultVariation其他变化的补救措施。

<Experiment experimentId={123}>
  <button variationId={1116}>Comprar</button>
  <button variationId={1117} defaultVariation>¡Compra ya!</button>
</Experiment>

Los problemas de esto:

• Esa 不支持任何内容。
• 请提交错误的错误信息。
• 出于明确的动机，没有任何仿真可以真正激活真正的变化，也可以与生产过程中的不同之处相结合。

⚠️ Limitación #2 – 遥远区域和错误渲染

第二个限制是影响渲染效果的较远区域，因为所有组件都可以更改，包括 ID 结构和重复变量。

<div className="product-detail">
  <Experiment experimentId={123}>
    <button variationId={1116} defaultVariation>Comprar</button>
    <button variationId={1117}>¡Compra ya!</button>
  </Experiment>
  ...
  ...
  ...
  <Experiment experimentId={123}>
    <button variationId={1116} defaultVariation>Favorito</button>
    <button variationId={1117}>¡A favoritos!</button>
  </Experiment>
</div>

问题是：复制信息。

该问题是一个严重的问题，涉及不同的组件和储存库，涉及不同的实验。

⚠️ 限制 #3 – Desde componente padre a hijos

游戏中的第三个限制因素会影响到父亲的组件，因为它会影响到 pasar 道具，而这些道具则是实验存在的动机。

<Experiment>
  ...
  <ParentVariation />
    ↳ <DescendantA isExperiment /> 😱
      ↳ <DescendantB isExperiment /> 😱
        ↳ <DescendantC isExperiment /> 😱
          ↳ <DescendantD isExperiment /> 😱
            ↳ <DescendantE isExperiment /> 😱
              ↳ <DescendantF isExperiment /> 😱
                ↳ ...
</Experiment>

Problemas de pasar props:

• Puede ser costoso，sobretodo cuando hay muchos niveles en la jerarquía。
• 道具的组成部分不属于合约方。
• 但是，如果要做出不同的决定，要放弃实验的恢复是非常困难的，但我必须承认这一点。

⚠️ 限制 #4 – Fuera de la zona de render

最后，最后的限制是根据不同的情况进行渲染。

const Actions = () => {
  // ❌👇 Aquí no puedo saber en qué variante estoy
  const someData = getSomeData(/* ... */)
  const handleClick = () => { /* ... */ }

  return (
    <Experiment experimentId={123}>
      <button variationId={1116} defaultVariation>Comprar</button>
      <button variationId={1117}>¡Compra ya!</button>
    </Experiment>
  )
}

Yo no puedo llegar ahí con un componente。 ¿Qué es lo que sí puedo hacer?布埃诺，如果你是一个小东西，那么你可以在实验中使用道具来进行实验。

另外，它是一个复杂的组件和复杂的重构。

开发经验分析

问题

• ❌ 本地变量的缓慢生产。
• ❌ 重复信息的迫害，导致更多人住院。
• ❌ El cambio de contato no deseado enmis Componentes。

解决方案

• ✅ 定义本地 API 的具体变量。
• ✅ 减少实验的源泉。
• ✅ 按照鲁伊多的规定，我们将充分发挥其作用，以尽可能减少对基础设施的影响。

迭代

Queremos que nuestras herramientas nos ayuden y sabemos que una Misma solución no funciona para siempre, porque las cosas cambian.因此，前面的分析，是对 las Herramientas 的主要处理过程。

🆕 可能变体的道具

为实验组件使用新的道具：forceVariationy forceActivation。大使支持​​我们接受的价值观：在变体中提供 ID 或在开始时将相应的顺序呈现为变体。

例如，如果“B”是第二个变体的一个参考，那么它的 ID 就完成了。

<Experiment experimentId={123} forceActivation="B">
  <button variationId={1116} defaultVariation>Comprar</button>
  <button variationId={1117}>¡Compra ya!</button>
</Experiment>

forceVariation两者之间的区别forceActivation是forceVariation一个特定变体的义务，它与缺陷的变体有关，大多数是在底漆渲染中。

在开始的时候，forceActivation要注意底漆渲染中的缺陷变体，并且与特定变体的第二个渲染类似。允许检测器出现问题之前无需进行优化配置实验。

一般来说，可以减少本地可能发生的变异的困难，如果错误的代码修改，则可能会很困难，但不会因为莫斯科的生产而受到影响。

🆕 实验背景

在所有实验的上下文中执行此操作，以实现实验的所有信息，包括与不同状态相关的布尔值。

<Experiment> 🚀
  ...
  <ParentVariation />
    ↳ <DescendantA />
      ↳ <DescendantB />
        ↳ <DescendantC />
          ↳ <DescendantD />
            ↳ <DescendantE />
              ↳ <DescendantF /> ← useExperiment() 😍
                ↳ ...
</Experiment>

这证明了 React 组件的自动上下文，并且可以让消费者useExperiment在新的钩子上使用 cualquier puntoscendiente de la jerarquía。

您可以通过各种组件进行实验。您不需要无休无止的道具，但需要通过中间媒介提供相关信息，以确保一切顺利。

🆕 Hook 实验起源

La zona prohibida fuera del render deja de ser prohibida, porque el hook gana la capacidad de actuar como origin y gestor del estado del Experimento si le pasas su configuración , algo que antes alone podía hacer el componente, y devuelve la Misma information que se recibía al consumir el contexto, con不同状态下的布尔值。

const Actions = () => {
  // 1️⃣👇 Creamos el experimento con el hook...
  const {isVariationB} = useExperiment({
    experimentId: 123,
    variations: [{id: 1116, isDefault: true}, 1117]
  })

  // 2️⃣👇 Y ya puedo saber aquí en qué variante estoy ✅
  const someData = getSomeData(/* ... */)
  const handleClick = () => { /* ... */ }

  return (
    <button>{isVariationB ? '¡Compra ya!' : 'Comprar'}</button>
  )
}

Además, si queremos seguir propaganda el contexto hacia abajo para tener ocasión de consumirlo, por definición los hooks no pueden hacerlo, pero Podemos envolver ender con el componente Experiment y obligarlo a actuar solamente de proedor pasándole alone la prop feed con lo que devuelve el hook de使用实验。我们的实际操作仅限于上下文证明，并且消费者可以使用下级实验信息。

感谢您的迭代，我们对渲染区域的实验进行了限制，并通过AB 测试获得了一个强大的等级。

结论

一天中，我们将进行很多有关AB 测试的最佳内容和实际内容。但是，如果没有任何文章，请多多关注其他内容！

También，这是重要的，因为要实现进步，更重要的是，要与前面的解决方案完全兼容。

¡Eso es todo！我们致力于开源、文档和测试。您将被邀请前往一个风景如画的地方，并享受一个舒适的环境。 🙌🏻