帮助中心
React Web APP

可点击此处在Github中查看React 快速入门使用的Quick Demo源码

建立一个全新的React Web APP 项目

使用Create React App 中文文档建立一个空的React Web APP项目

npx create-react-app quick-demo
cd quick-demo

安装敏捷开关Js与React SDK

npm install ffc-js-client-side-sdk
npm install ffc-react-client-sdk

如果 npm install ffc-react-client-sdk 不成功,请尝试使用 yarn 安装,代码如下

yarn add ffc-react-client-sdk

初始化SDK

点击查阅 SDK 官方文档
点击查阅 SDK Github 开源文档

打开src文件夹中的index.js文件,导入 FfcProvider

import { asyncWithFfcProvider } from 'ffc-react-client-sdk'

此教程使用 asyncWithFfcProvider 方法初始化 SDK,将文件中的原有 ReactDOM.createRootroot.render 主代码替换成如下代码:

(async () => {
  const FfcProvider = await asyncWithFfcProvider({
    options: {
      anonymous: true,
      api: 'https://api.featureflag.co',
      secret: '{项目环境对应的秘钥}',
      bootstrap: []
    }
  });

  const root = ReactDOM.createRoot(document.getElementById('root'));

  root.render(
    <React.StrictMode>
      <FfcProvider>
        <App />
      </FfcProvider>
    </React.StrictMode>
  );
})();

回到敏捷开关后台,根据引导创建账户和第一个开关后。在"组织机构"页中的"项目"子板,找到对应的项目与环境的 secret 秘钥值,将其复制

回到代码 index.js 中,将刚刚复制的 secret 填入到 asyncWithFfcProvideroptions 中的 secret 的右侧

使用 SDK 的 feature flag 控制 Learn React

打开 src 文件夹中的 App.js文件,导入 withFfcConsumer

import { withFfcConsumer } from 'ffc-react-client-sdk';

并在文件下方,用withFfcConsumer包裹 APP function组件

export default withFfcConsumer()(App);

function APP 的入口处加入 { flags }

function App({ flags }) {
  return (
    <div className="App">
        ...
    </div>
  );
}

回到敏捷开关后台,找到之前建立的 feature flag,并复制其 key,如下图所示:

回到 src 文件夹中的 App.js文件,我们使用 Flags.{Key} 或 Flags['{Key}'] 来获得 feature flag 针对用户(这个教程中是随机用户)的返回值。
我们通过这种方法来控制 Learn React 是否可以做一个超链接。将原function APP的代码改为如下所示:

function App({ flags }) {
  const reactDemoFlag = flags.ReactDemoFlag   // 或使用 flags['ReactDemoFlag']
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        {
          reactDemoFlag === 'false' ?
            <div>
              Learn React
            </div>
            :
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
        }
      </header>
    </div>
  );
}

使用 UI 控制功能的发布、切换、回滚

使用 feature flag 控制 Learn React 的超链接能力。如下图所示,当我们将返回值切换为false时, 右侧的 Learn React 不具备超链接能力。

当我们将返回值切换为 true 时,右侧的 Learn React 具备了超链接能力,如下图所示

使用SDK初始化用户画像

回到index.js文件,我们在初始化Provider的代码处添加 user 信息,并将 anonymous 设为 false。如下所示,我们初始化了一个用户名为 "demo-user-20220530" 的用户画像信息。

const FfcProvider = await asyncWithFfcProvider({
    options: {
      anonymous: false,
      api: 'https://api.featureflag.co',
      secret: 'NDdmLWY2MTUtNCUyMDIyMDUyNTA0MzY1MV9fMTU5X18xODVfXzM4Nl9fZGVmYXVsdF9mOWQ1YQ==',
      bootstrap: [],
      user: {
        userName: 'demo-user-20220530',
        id: 'demo-user-20220530',
        customizedProperties: [
          {
            "name": "age",
            "value": '18'
          }
        ]
      }
    }
  });

除了这种初始化用户信息的方式外,我们还可以使用 .identify 方法,具体详情可以查看 SDK 详情。

千人千面的做灰度发布与回滚

初始化后,我们可以通过UI对 feature flag 做更复杂的控制。比如我们可以设置超链接模式的 Learn React 只对用户 "demo-user-20220530" 开放。设置如下所示:

或通过自定义规则设置,如下图所示:

我们通过设置 feature flag 中的 "用户目标", "自定义规则",可以实现千人千面的发布与回滚。通过使用百分比分配,可以实现渐进式发布与回滚。

总结

关于"目标用户"与"自定义规则"的配置方法,请点击查阅文档《功能管理》部分的《规则配置管理》,同时还可以查看《用户管理》中的《用户组》和《用户信息与属性》文档
关于"渐进式发布与回滚",请点击查阅文档《常用功能》中的《渐进式发布与回滚》

最后更新于 2022/06/02
未能解决您的问题?请联系在线客服
评价此篇文档
有帮助
没帮助
本篇目录