了解功能标志：简单指南

首页 > 编程 > 了解功能标志：简单指南

了解功能标志：简单指南

发布于2024-11-02

Understanding Feature Flags: A Simple Guide

构建软件时，快速发布新功能而不破坏任何内容可能很棘手。功能标志使这变得更容易。在阅读了 Vercel 的功能标志 SDK 后，我认为进一步研究功能标志并解释它们是什么、它们如何工作以及如何自己构建一个功能标志会很有帮助。

什么是功能标志？

功能标志（也称为功能切换）允许开发人员打开或关闭功能，而无需更改代码或重新部署应用程序。这意味着您可以：

逐步发布功能：只让部分用户看到新功能，慢慢向所有人推出。
在生产环境中测试新功能：您可以为自己或一小群测试人员启用该功能，而不需要将其提供给所有用户。
快速回滚功能：如果新功能导致问题，您可以禁用它而无需重新部署。

使用功能标志，您可以控制用户何时可以访问功能，与部署代码的时间分开。

为什么要使用功能标志？

持续交付

功能标志帮助团队更频繁地发布代码。您可以将未完成的工作合并到主代码库中，将其隐藏在标志后面，然后在不影响用户的情况下进行部署。
A/B 测试

您可以使用不同的用户组测试某个功能的两个版本，看看哪个版本性能更好。这有助于基于真实数据改善用户体验。
受控部署

您可以向一小群用户发布一项功能，监控其性能，然后将其发布给其他所有人。
快速回滚

如果出现问题，关闭功能标志比恢复代码更改要快得多，有助于保持应用程序稳定。

将 Next.js 中的功能标志与 Vercel 的 Flags SDK 结合使用

flags.ts（服务器端）

import { unstable_flag as flag } from "@vercel/flags/next";

export const showBanner = flag({
  key: "banner",
  decide: () => false,
});

决定函数确定标志的值，该值可以从各种来源提供，例如：

环境变量
其他功能标志提供商
Vercel 的 Edge Config（数据配置存储）
数据库等

app/page.tsx

import { showBanner } from "../flags";

export default async function Page() {
  const banner = await showBanner();
  return (
    
      {banner ?  : null}
      {/* other components */}
    
  );
}

由于标志是函数，我们可以轻松地更改实现，而无需修改调用方的任何内容。这种灵活性使您的应用程序能够适应新的要求，而无需更改标志逻辑的核心结构。

如何构建您自己的功能标记系统

让我们构建一个简单的功能标记系统，您可以随着时间的推移对其进行改进。

第 1 步：创建用于检索功能标志的自定义挂钩

此步骤涉及创建一个自定义挂钩，该挂钩将允许您动态检索功能标志。您可以轻松地在 React 应用程序的任何部分重用此钩子来检查某个功能是否启用或禁用。

import { useState, useEffect } from 'react';

export const useFeatureFlag = (key: string): boolean => {
  const [isEnabled, setIsEnabled] = useState(false);

  useEffect(() => {
    const fetchFeatureFlag = async () => {
      try {
        const response = await fetch(`http://localhost:3001/api/feature-flags/${key}`);
        if (response.ok) {
          const data = await response.json();
          setIsEnabled(data.is_enabled);
        }
      } catch (error) {
        console.error('Failed to fetch feature flag:', error);
      }
    };

    fetchFeatureFlag();
  }, [key]);

  return isEnabled;
};

第2步：反应组件

接下来，创建一个组件，该组件使用自定义挂钩根据该标志是启用还是禁用来呈现不同的功能。这将使您的应用程序能够在新旧功能之间无缝切换，而不会对用户体验造成任何干扰。

import React from 'react';
import { useFeatureFlag } from './useFeatureFlag';

const FeatureFlaggedComponent: React.FC = () => {
  const isNewFeatureEnabled = useFeatureFlag('new-feature');

  return (
    
      Feature Flag Example
      {isNewFeatureEnabled ? (
        
          New Feature
          This is the new feature enabled by the feature flag.
        
      ) : (
        
          Old Feature
          This is the old feature displayed when the new feature is disabled.
        
      )}
    
  );
};

export default FeatureFlaggedComponent;