规则：purity

ReactAPI 参考：ESLint 插件

purity

验证组件/hooks 是纯函数，检查它们是否调用了已知的不纯函数。

规则详情 {/rule-details/}

React 组件必须是纯函数——给定相同的 props，它们应始终返回相同的 JSX。当组件在渲染期间使用 Math.random() 或 Date.now() 等函数时，每次都会产生不同的输出，从而破坏 React 的假设，并导致水合不匹配、记忆化错误和不可预测的行为等 bug。

常见违规 {/common-violations/}

通常，任何对相同输入返回不同值的 API 都违反此规则。常见示例包括：

Math.random()
Date.now() / new Date()
crypto.randomUUID()
performance.now()

无效用法 {/invalid/}

本规则的错误代码示例：

js 复制代码

// ❌ Math.random() in render
function Component() {
  const id = Math.random(); // Different every render
  return <div key={id}>Content</div>;
}

// ❌ Date.now() for values
function Component() {
  const timestamp = Date.now(); // Changes every render
  return <div>Created at: {timestamp}</div>;
}

有效用法 {/valid/}

本规则的正确代码示例：

js 复制代码

// ✅ Stable IDs from initial state
function Component() {
  const [id] = useState(() => crypto.randomUUID());
  return <div key={id}>Content</div>;
}

故障排除 {/troubleshooting/}

我需要显示当前时间 {/current-time/}

在渲染期间调用 Date.now() 会使组件不纯：

js 复制代码

// ❌ Wrong: Time changes every render
function Clock() {
  return <div>Current time: {Date.now()}</div>;
}

相反，请将不纯函数移到渲染之外：

js 复制代码

function Clock() {
  const [time, setTime] = useState(() => Date.now());

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(Date.now());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <div>Current time: {time}</div>;
}

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。