ReactJS 动态模板(例如用于 A/B 测试 Web 应用程序)

Question

在 ReactJS 中拥有动态模板的最佳方式是什么，以便相同的布局组件可以根据某些 JSON 响应加载不同的模板(可以在本示例中进行模拟)？

Answer 1

有多种方法可以处理这个问题:

由于您使用的是react-router，您的路由可以包含包含a/b测试参数的信息，因此将为不同的A/B测试呈现不同的模板。

render((
  <Router>
    <Route path="/" component={App}>
      <Route path="/pricing-strategy-optimistic/products" component={OptimisticPricingPage}/>
      <Route path="/pricing-strategy-normative/products" component={NormativePricingPage}/>
      <Route path="*" component={NoMatch}/>
    </Route>
  </Router>
), document.body)

您的App组件将负责根据A/B测试确定要重定向到的路由，并相应地重定向到相关的嵌套路由。

但是，如果用户在社交网站上共享页面的 URL，则处理起来会有点棘手。可能不希望在 URL 中留下指示不同用户在各种上下文中呈现不同内容的指示。

出于这个原因，我通常不喜欢依赖 URL 进行 A/B 测试，而且如果测试经常更改，它会破坏书签。查询参数缓解了这个问题，但上述问题仍然存在。我更喜欢 url 作为标识页面的明确标识符 - 无论嵌入实体的具体细节如何变化。

另一个缺点是，不向用户显示的组件也会加载到页面中。如果应用程序很小，这通常不是问题，但对于较大的网站，这可能是优化的潜在范围。

可以说更好的策略是使用 webpack definePlugin通过 A/B 测试特定变量，这些变量将在构建时在代码中替换，创建多个构建，为同一组路由呈现不同的组件。

例如，如果您的代码包含:

if(PRICING_STRATEGY == 'optimistic')
    console.log('optimistic')
if(PRICING_STRATEGY == 'normative')
    console.log('normative')

将 PRICING_STRATEGY 定义为“乐观”的 Webpack 构建会将上述内容编译为:

if('optimistic' == 'optimistic')
    console.log('optimistic')
if('optimistic' == 'normative') 
  console.log('normative')

像 uglifyjs 这样的压缩器可以检测死代码并将上面的代码减少为:

console.log('optimistic')

这种方法当然必须通过一些额外的服务器端逻辑来增强，以确定将哪个 Assets 交付给用户。