Back to Details

feature-flags

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

React Feature Flags

React 功能标志

Flag Files

标志文件

FilePurpose
packages/shared/ReactFeatureFlags.js
Default flags (canary), 
__EXPERIMENTAL__
overrides
packages/shared/forks/ReactFeatureFlags.www.js
www channel, 
__VARIANT__
overrides
packages/shared/forks/ReactFeatureFlags.native-fb.js
React Native, 
__VARIANT__
overrides
packages/shared/forks/ReactFeatureFlags.test-renderer.js
Test renderer
文件用途
packages/shared/ReactFeatureFlags.js
默认标志（金丝雀版本），
__EXPERIMENTAL__
会覆盖默认值
packages/shared/forks/ReactFeatureFlags.www.js
www渠道，
__VARIANT__
会覆盖默认值
packages/shared/forks/ReactFeatureFlags.native-fb.js
React Native，
__VARIANT__
会覆盖默认值
packages/shared/forks/ReactFeatureFlags.test-renderer.js
测试渲染器

Gating Tests

测试门控

@gate
pragma (test-level)

@gate
编译指示（测试级别）

Use when the feature is completely unavailable without the flag:
javascript
// @gate enableViewTransition
it('supports view transitions', () => {
  // This test only runs when enableViewTransition is true
  // and is SKIPPED (not failed) when false
});
当功能在没有标志的情况下完全不可用时使用：
javascript
// @gate enableViewTransition
it('supports view transitions', () => {
  // 仅当enableViewTransition为true时运行此测试
  // 为false时会跳过（而非失败）
});

gate()
inline (assertion-level)

内联 
gate()
（断言级别）

Use when the feature exists but behavior differs based on flag:
javascript
it('renders component', async () => {
  await act(() => root.render(<App />));

  if (gate(flags => flags.enableNewBehavior)) {
    expect(container.textContent).toBe('new output');
  } else {
    expect(container.textContent).toBe('legacy output');
  }
});
当功能存在但行为会根据标志不同而变化时使用：
javascript
it('renders component', async () => {
  await act(() => root.render(<App />));

  if (gate(flags => flags.enableNewBehavior)) {
    expect(container.textContent).toBe('new output');
  } else {
    expect(container.textContent).toBe('legacy output');
  }
});

Adding a New Flag

添加新标志

  1. Add to 
    ReactFeatureFlags.js
    with default value
  2. Add to each fork file (
    *.www.js
    , 
    *.native-fb.js
    , etc.)
  3. If it should vary in www/RN, set to 
    __VARIANT__
    in the fork file
  4. Gate tests with 
    @gate flagName
    or inline 
    gate()
  1. 在
    ReactFeatureFlags.js
    中添加并设置默认值
  2. 添加到每个分支文件（
    *.www.js
    、
    *.native-fb.js
    等）
  3. 如果需要在www/React Native中有所不同，在分支文件中设置为
    __VARIANT__
  4. 使用
    @gate flagName
    或内联
    gate()
    对测试进行门控

Checking Flag States

检查标志状态

Use 
/flags
to view states across channels. See the 
flags
skill for full command options.
使用
/flags
查看各渠道的状态。查看
flags
技能获取完整命令选项。

__VARIANT__
Flags (GKs)

__VARIANT__
标志（门控器）

Flags set to 
__VARIANT__
simulate gatekeepers - tested twice (true and false):
bash
/test www <pattern>              # __VARIANT__ = true
/test www variant false <pattern> # __VARIANT__ = false
设置为
__VARIANT__
的标志模拟门控器 - 会测试两次（true和false）：
bash
/test www <pattern>              # __VARIANT__ = true
/test www variant false <pattern> # __VARIANT__ = false

Debugging Channel-Specific Failures

调试特定渠道的测试失败

  1. Run 
    /flags --diff <channel1> <channel2>
    to compare values
  2. Check 
    @gate
    conditions - test may be gated to specific channels
  3. Run 
    /test <channel> <pattern>
    to isolate the failure
  4. Verify flag exists in all fork files if newly added
  1. 运行
    /flags --diff <channel1> <channel2>
    比较值
  2. 检查
    @gate
    条件 - 测试可能被门控到特定渠道
  3. 运行
    /test <channel> <pattern>
    隔离失败场景
  4. 如果是新添加的标志，验证其存在于所有分支文件中

Common Mistakes

常见错误

  • Forgetting both variants - Always test 
    www
    AND 
    www variant false
    for 
    __VARIANT__
    flags
  • Using @gate for behavior differences - Use inline 
    gate()
    if both paths should run
  • Missing fork files - New flags must be added to ALL fork files, not just the main one
  • Wrong gate syntax - It's 
    gate(flags => flags.name)
    , not 
    gate('name')
  • 忘记测试两种变体 - 对于
    __VARIANT__
    标志，务必同时测试
    www
    和
    www variant false
  • 对行为差异使用@gate - 如果两种路径都需要运行，请使用内联
    gate()
  • 遗漏分支文件 - 新标志必须添加到所有分支文件，而不仅仅是主文件
  • 错误的gate语法 - 正确写法是
    gate(flags => flags.name)
    ，而非
    gate('name')