React 组件和 Hook 必须是幂等的

React 中的一个核心概念是保持纯粹。一个纯组件或 Hook 应该是：幂等的 ——每次使用相同的输入（组件输入的 props、state、context 以及 Hook 输入的参数）运行它，你总是得到相同的结果。

组件必须始终根据其输入（props、state、和 context）返回相同的输出。这被称为“幂等性”。幂等性是函数式编程中经常使用的一个术语，它指的是只要你使用相同的输入运行代码， 得到的结果总是一样的。

这意味着，为了遵循这一规则，所有 在渲染期间 执行的代码也必须是幂等的。例如，以下这行代码就不是幂等的（因此，包含这行代码的组件也不是幂等的）：

function Clock() { const time = new Date(); // 🔴 错误的：总是返回不同的结果！ return <span>{time.toLocaleString()}</span>}

new Date() 函数不是幂等的，因为每次调用时返回的结果都不同，它总是返回调用时刻的日期和时间。当你渲染上面的组件时，屏幕上显示的时间将会停留在组件被渲染的那一刻的时间。类似地，像 Math.random() 这样的函数也不是幂等的，因为即使输入相同，它们每次调用也都会返回不同的结果。

这并不意味着你完全不能使用像 new Date() 这样非幂等的函数，你只需要避免 在渲染过程 中使用它们即可。在这种情况下，我们可以使用一个 Effect 来将最新的日期与这个组件进行“同步”：

import { useState, useEffect } from 'react'; function useTime() { // 1. 跟踪当前日期的状态。`useState` 接受一个初始化函数作为其 // 初始状态。它只在调用 Hook 时运行一次，因此只有调用 Hook 时的 // 当前日期才被首先设置。 const [time, setTime] = useState(() => new Date()); useEffect(() => { // 2. 使用 `setInterval` 每秒更新当前日期。 const id = setInterval(() => { setTime(new Date()); // ✅ 正确的：非幂等代码不再在渲染中运行。 }, 1000); // 3. 返回一个清理函数，这样我们就不会忘记清理 `setInterval` 定时器，导致内存泄漏。 return () => clearInterval(id); }, []); return time;} export default function Clock() { const time = useTime(); return <span>{time.toLocaleString()}</span>;}

通过将非幂等的 new Date() 调用包装在一个 Effect 中，就可以将这个计算移动到 渲染之外。

如果你不需要将某些外部状态与 React 同步，只需要在响应用户交互时更新，你可以考虑使用一个 事件处理函数。