乐趣区

关于react.js:如何在-PC-Web-页面中使用特性开关发布功能包含代码教程

jiezi

这是一篇简略的个性开关应用实际教程，次要是展现在 PC Web 页面中是如何应用个性开关来管制产品性能对用户展现的开启与敞开，咱们先理解一下个性开关以及为什么要应用个性开关。

什么是个性开关？

个性开关（Feature flag）是软件开发中的一种技术实际，用于控制系统中特定性能的开启和敞开。它容许开发团队在运行时动静地切换不同的性能，而无需批改、构建和部署新的软件版本。

为什么要应用个性开关？

– 逐渐公布性能： 通过应用性能开关，你能够逐渐公布新性能，而不是一次性公布给所有用户。

– 升高公布危险 ：性能开关容许您在应用程序中疾速启用或禁用特定性能，而无需进行从新编译和公布。

– 指标定制和个性化： 通过针对不同用户或用户群体启用或禁用特定性能，您能够依据其需要和偏好提供定制和个性化的体验

– A/B 测试和数据驱动决策： 性能开关使您可能在不同用户之间进行 A/B 测试，比拟不同性能公布后用户反馈数据。

– 灰度公布和回滚： 通过将性能仅对一小部分用户启用，您能够进行灰度公布，逐渐扩大范围。

<p align=center>  —————– 上面是在网页中应用个性开关教程 ——————-   </p>

1、首先拜访 https://featureprobe.io/，应用你的邮箱登录，无需邮箱验证和明码。

2、登录胜利之后咱们会为您创立一个默认我的项目和环境，点击环境卡片进入开关列表，而后创立一个新的开关，开关名称为「展现学习 React 的链接」、标识为「Show\_Learn\_React」。开关创立的时候须要填写一些必填字段：

  • 名称：是一个简短且描述性的词或短语，用于示意该性能开关所管制的性能或个性。
  • 标识: 开关的 ID，是开关的惟一标识，不可反复。
  • 应用了客户端 SDK：是否在客户端（浏览器、Android 或者 iOS）上应用 FeatureProbe。本案例中须要在浏览器端应用，此处抉择应用。
  • 返回类型：代码中可能读取到的返回值的类型，可选 boolean、string、number 和 json 四种类型。
  • 分组：决定了能从开关返回中读取到的返回信息。
  • 当开关未失效：指定开关失效状态为未失效时的返回值是哪个分组的值。

<!—->

3、开关创立实现后，在开关列表点击开关名称进入开关详情。点击开关「开关名」右上角连贯 SDK 按钮，咱们会在此环节提醒你如何将 SDK 集成至您本人的应用程序中。

4、接下来你须要筹备一个 Web 应用程序。你能够不应用任何 Javascript 框架抉择原生的 html 和 js，能够应用 Create React App 来创立一个 React 应用程序，也能够应用 Vue CLI 创立一个 Vue.js 程序。为了不便演示，咱们以 React 工程为例：

第一步：应用 Create React App 创立一个名为 react-demo 的 React 工程。
npx create-react-app react-demo && cd react-demo
第二步：装置 FeatureProbe 的 JavaScript SDK。
npm install featureprobe-client-sdk-js --save
第三步：通过 npm start 命令启动应用程序，在浏览器中拜访 http://localhost:3000/ 能够看到页面的展现成果如下：

接下来咱们通过 FeatureProbe 管制该页面的展现，通过设置 BoolValue 的值来管制上述页面 Logo 展现与暗藏。

第四步：在 App.js 中引入 FeatureProbe SDK 并初始化，其中 clientSdk 须要回到 FeatureProbe 平台上复制。
import {FeatureProbe, FPUser} from "featureprobe-client-sdk-js";
const user = new FPUser();
const fp = new FeatureProbe({
    remoteUrl: "https://featureprobe.io/server",
    clientSdkKey: "client-xxxx",  // 替换这个值
    user,
});
fp.start();
第五步：调用 SDK 提供的 BoolValue 办法获取开关 Show\_Learn\_React 的返回值，而后将返回值保留在值为 isHide 的 state 变量中。
const [isHide, saveHideStatus] = useState(false);
fp.on("ready", function() {const result = fp.boolValue("Show_Learn_React", false);
  saveHideStatus(result);
});
第六步：批改 js 中的代码，通过 isHide 变量来管制页面元素的显示和暗藏。
 <div className="App">
      <header className="App-header">
        {
          !isHide && (<img src={logo} className="App-logo" alt="logo" />
          )
        }
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>            
        <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
      </header>
    </div>
第七步：回到 FeatureProbe 平台，将 Show_Learn_React 开关的状态变更为失效，而后从新公布。

从新刷新浏览器的 http://localhost:3000/ 页面，能够看到 Demo 页面上的 Logo 曾经不展现了。如果想要开启这个 Logo，在平台中设置开关状态敞开或者更改 Show 状态公布即可失效。

下面只是一个简略的页面元素展现与敞开的成果，理论业务状况能够在开关配置里配置相干的规定，包含百分比、地区、性别等信息，依据业务所需去配置规定信息。

附 App.js 残缺的代码 

import {useEffect, useState} from 'react';
import {FeatureProbe, FPUser} from "featureprobe-client-sdk-js";
import logo from './logo.svg';
import './App.css';

function App() {const [isHide, saveHideStatus] = useState(false);
  useEffect(() => {const user = new FPUser();
    const fp = new FeatureProbe({
      remoteUrl: "https://featureprobe.io/server",
      clientSdkKey: "client-56a9054145cfebc20bb9b572083401c201db27ee",  // 替换这个值
      user,
    });
    fp.start();
    fp.on("ready", function() {const value = fp.boolValue("Show_Learn_React", false);
      saveHideStatus(value);
    });
  }, []);
  return (
    <div className="App">
      <header className="App-header">
        {
          !isHide && (<img src={logo} className="App-logo" alt="logo" />
          )
        }
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>            
        <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
      </header>
    </div>
  );
}
export default App;

对于 FeatureProbe

FeatureProbe 团队始终致力于个性治理技术的开发实际，通过个性治理能够更无效地治理和追踪个性的全生命周期，能够实现更好的我的项目管制和更高的交付效率。咱们的指标是通过个性治理技术优化产品公布流程，实现更灵便、可控的版本迭代和性能公布。分享个性治理技术的实际成绩，让更多人受害于个性治理技术。

获取更多对于 FeatureProbe 的最新动静，能够拜访以下地址关注咱们！

GitHub: https://github.com/FeatureProbe/FeatureProbe

体验环境: https://featureprobe.io/

文档地址：https://docs.featureprobe.io/zh-CN/

退出移动版