如何在反應項目中為某些功能添加功能標志

Question

我們有一個使用 azure devops 部署在 azure 中的反應項目。 最近，我們計划在我們現有的 React 項目中實施一個新概念。 因為，完成這個概念需要將近 3 個月的時間，我們希望實現一些標記機會，以便我們的代碼可以與生產代碼庫集成，但不會提供給客戶使用。我們還將進行一些 A/B 測試MVP 完成后，與我們的一位試點客戶一起。 因此，在這種情況下，在我們的項目中啟用某些功能標志的最佳方式是什么。 有沒有人對此有想法。 任何想法都將受到高度贊賞。

Answer 1

由於您想要實現的概念的規模，我建議使用支持 React 的 Feature Flag 工具，例如LaunchDarkly或DevCycle 。 這兩種解決方案都允許您將代碼集成到生產環境中，同時在您准備好之前將它們隱藏起來，不讓客戶使用。

例如，實現功能標志的一種方法是使用DevCycle 的 React SDK ，它看起來像這樣：

import { useVariable } from '@devcycle/devcycle-react-sdk'

const App = () => {
    const variableKey = 'show-new-feature'
    const defaultValue = 'false'
    const featureVariable = useVariable(variableKey, defaultValue)

    return (
        <div>
           { featureVariable ? <div>Flag on!</div> : <div>Flag off</div>
        </div>
    )
}

上面代碼中的'show-new-feature'是在devcycle.com上創建的變量。 它在代碼中被引用，因此您可以從 DevCycle 上的功能管理儀表板遠程切換標志。

至於 A/B 測試，您也可以使用功能管理工具。 通過選擇誰接收啟用標志和誰接收禁用標志，您可以為不同的用戶集提供不同的功能變體。 DevCycle 在這里有關於它的文檔。

Answer 2

另一個使用FeatureGuard的例子如下：

export const Demo: FC = () => {
  const [featureGuards, setFeatureGuards] = useState<IFeatureGuards>();
  const [on, setOn] = useState<boolean>(false);

  const init = async () => {
    const fg = await featureguards({
      apiKey: FEATUREGUARDS_API_KEY
    });
    setFeatureGuards(fg);
    setOn(await fg?.isOn('MY_FEATURE'));
  };

  useEffect(() => {
    init();
  }, []);
  if (!featureGuards) {
    return <CircularProgress />;
  }
  return (
    <Box>
        <FormControlLabel disabled control={<Switch />} label="On" checked={on} />
    </Box>
  );
};