如何在React中实现功能标志功能标志是开发人员可以用来安全发布软件的强大机制。它们使开发团队能够在飞行中从软件系统中添

功能标志是开发人员可以用来安全发布软件的强大机制。它们使开发团队能够在飞行中从软件系统中添加或删除一个功能，而不需要通过部署进行任何代码修改。

对于开发人员来说，能够区分部署和发布是一项非常重要的技能。代码部署是一项技术任务，而向客户发布功能则更像是一项商业活动。通过先进的功能标志的使用，如果新功能出现任何问题，向一个客户子集发布功能可以大大减少爆炸的半径。

在这篇文章中，我们将研究如何在一个React应用中实现一个简单的功能标志，该应用从Algolia的非官方HN搜索API中获取故事。这个功能标志将被托管在Flagsmith上，用于显示和隐藏每个Hacker News故事的积分。

让我们开始吧!

前提条件

在我们深入学习代码之前，你应该准备好以下条件。

Node.js和npm在你的本地机器上工作，最好是最新的LTS版本
对React和JavaScript的工作知识

对功能标志或远程配置有一定的了解，但并不要求你能跟上。

是时候开始写代码了

建立一个克隆的Hacker News样本

为了用React创建一个基本的Hacker News首页，我们将首先用Create React App创建一个新的React应用。

为了使用CRA创建一个新的React应用，我们将运行以下命令。

npx create-react-app hn-react

这个命令在几分钟内就为我们创建了一个基本的React应用。当npx脚本执行完毕后，它看起来会像下面这样。

Successful React app creation with CRA

之后，我们可以用cd hn-react ，进入新创建的hn-react 文件夹。要运行开发服务器，请执行以下内容。

yarn start

该命令运行开发服务器，并打开默认浏览器，在 [http://localhost:3000](http://localhost:3000)，它将显示类似下面的内容。

好哇!我们的React应用骨架正在运行。接下来，我们将改变React应用以显示来自Hacker News的故事。

将Hacker News的故事添加到我们的示例应用程序中

为了改变React应用的模板以显示Hacker News的故事，我们将改变src/app.js ，使其看起来像下面这样。

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [stories, setStories] = useState([]);
  const [message, setMessage] = useState('loading...');
  useEffect(() => {
    async function fetchNewsStories () {
      try {
        const data = await (await fetch('https://hn.algolia.com/api/v1/search_by_date?tags=front_page')).json();
        setStories(data.hits)
        const message = data.hits.length ? '' : 'No stories found';
        setMessage(message);
      } catch (err) {
        console.log(`err: ${err.mesasge}`, err);
        setMessage('could not fetch stories');
      }
    }
    fetchNewsStories()
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <h2>Latest HN Stories</h2>
        {message}
        <div className="stories">
          {Array.isArray(stories) && stories.map(
            story => story.url && <h3><a href={story.url} target="_blank" rel="noreferrer">{story.title}</a> - by {story.author}</h3>
          )}
        </div>
      </header>
    </div>
  );
}

export default App;

我们在App.js文件中所做的主要改动是在钩子中调用Algolia提供的Hacker News API。 [useEffect](https://blog.logrocket.com/guide-to-react-useeffect-hook/)钩子，然后在组件中渲染从API中获取的故事。

我们利用useState 钩子来设置两个变量：stories 和message 。这两个都是在调用上述API的fetchNewsStories 异步函数中设置的。

如果在获取故事时出现任何错误，stories 数组默认被设置为empty ，并且消息被设置为 "无法获取故事"，首先被设置为 "加载"。如果故事被成功获取，那么消息将被设置为一个空字符串。

一个基本的循环被用于stories ，该变量带有一个地图来循环浏览故事。对于每个有URL的故事，它的标题、链接和作者都被打印成一个H3 元素。

同样地，我们也将改变src/App.css 中的样式，使之与下面相同。

.App-header {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: black;
}

h3 {
  padding-left: 0.5em;
}

.App-link {
  color: #61dafb;
}

我们已经删除了.App-header 的背景颜色，并将文本改为黑色。我们还删除了与标志动画相关的任何样式，因为标志已经被删除。

为了使文本更容易阅读，我们在H3 。如果我们用yarn start ，再次运行该应用程序，它将看起来像下面的内容。 [http://localhost:3000](http://localhost:3000):

Latest HN stories

祝贺你!你的调用非官方Hacker News API的基本React应用正在运行。为方便起见，这些代码修改可以作为拉动请求找到。

接下来，我们将在Flagsmith上设置一个功能标志来显示或隐藏积分。

在Flagsmith上设置功能标志

Flagsmith是一个了不起的功能标志服务，它也有一个开源版本，我们可以自己托管。在本教程中，我们将使用Flagsmith Cloud。

要想开始，请使用GitHub在app.flagsmith.com登录。

Flagsmith sign-in page

你会被要求用你的GitHub授权Flagsmith，如下所示。

GitHub authorize Flagsmith approval page

在屏幕的底部，你可以点击授权Flagsmith按钮。它可能会要求你提供GitHub密码，之后你会被转到Flagsmith用户界面。

你可以点击左侧Flagsmith标志下的**+按钮来创建一个新项目。我们可以将该项目命名为HN-react ，然后点击创建项目的**紫色按钮。

Flagsmith create project screen

因此，在创建项目后，Flagsmith将自动创建开发和生产环境。

之后，我们将创建我们的第一个特性标志。点击页面末尾的Create Your First Feature按钮即可。

Flagsmith create new feature page

我们将添加ID为show_story_points, ，确保默认启用，然后点击创建特性。

Flagsmith new feature settings page

随后，该功能标志就可以供我们使用了，就像这样。

Flagsmith flag project features page

下一步，我们将添加Flagsmith JavaScript SDK，并使用它来获得我们刚刚创建的功能标志在我们的React应用中运行。

安装并使用功能旗的JavaScript SDK

我们已经在Flagsmith的用户界面上创建了功能标志，现在我们将在我们的Hacker News克隆应用样本中使用它。要做到这一点，我们将通过运行从npm添加Flagsmith JavaScript SDK。

yarn add flagsmith

在package.json文件中添加Flagsmith客户端需要一点时间。在撰写本文时，它的版本是1.6.4 。

一旦我们安装了Flagsmith客户端，我们将再次修改src/App.js ，以纳入该客户端，并启用功能标志，以显示或隐藏每个Hacker News故事的积分。

首先，我们将在src/Apps.js 文件的第二行添加以下一行。

import flagsmith from 'flagsmith';

然后，我们将在第八行添加以下内容，以初始化showStoryPoints 变量。

const [showStoryPoints, setShowStoryPoints] = useState(false);

之后，我们将在第22行的fetchNewsStories 调用下方的useEffect 函数中添加以下代码。

flagsmith.init({
  environmentID:"DRLDV3g6nJGkh4KZfaSS5c",
  cacheFlags: true,
  enableAnalytics: true,
  onChange: (oldFlags, params) => {
    setShowStoryPoints(flagsmith.hasFeature('show_story_points'));
  }
});

在这个代码块中，标志被缓存在本地存储中，我们正在启用分析功能，并检查该功能在变化时是否可用。你必须从功能标志页的部分获得环境ID，如下图所示。

下一步是添加以下代码，你在第40行看到了通过故事的循环。

{Array.isArray(stories) && stories.map(
            story => story.url && <h3><a href={story.url} target="_blank" rel="noreferrer">{story.title}</a> - by {story.author} {showStoryPoints ? '- points '+ story.points : ''}</h3>
)}