react 中不应为可由现有 state 或 props 计算得出的值单独声明 state；直接在渲染过程中计算更高效、更可靠、更符合 react 最佳实践。
react 中不应为可由现有 state 或 props 计算得出的值单独声明 state；直接在渲染过程中计算更高效、更可靠、更符合 react 最佳实践。
在 React 开发中，一个常见误区是：当某个值依赖于其他 state 时，开发者倾向于用 useState 为其创建独立状态，并借助 useEffect 同步更新。例如：
const [number1, setNumber1] = useState(2);
const [number2, setNumber2] = useState(2);
// ❌ 不推荐：冗余状态 + 副作用同步
const [sum, setSum] = useState(4);
useEffect(() => {
setSum(number1 + number2);
}, [number1, number2]);这种写法不仅增加代码复杂度，还引入了潜在风险：sum 可能因 effect 执行时机、条件遗漏或竞态问题而与 number1/number2 不一致，且每次更新都会触发额外的渲染“级联”，降低性能。
✅ 正确做法是——将派生值作为普通变量，在组件函数体内直接计算：
适用于用户提出以下需求时：“构建赢回活动（win-back campaign）”、“重新激活已流失订阅者（re-engage lapsed subscribers）”、“执行重新授权 / 重新同意（re-permission / re-consent）清理”或“清理无效联系人列表（sunset my dead list）”；输出一个闭环式再激活方案——包括：流失用户群组（lapsed-cohort）定义、分阶段优惠阶梯（staged offer ladder）、重新授权（re-consent / re-p
const [number1, setNumber1] = useState(2);
const [number2, setNumber2] = useState(2);
// ✅ 推荐：纯计算，无副作用，始终最新、零开销
const sum = number1 + number2;
return (
<div>
<p>{number1} + {number2} = {sum}</p>
<button onClick={() => setNumber1(n => n + 1)}>+1 to number1</button>
</div>
);该方式完全符合 React 官方倡导的 “You Might Not Need an Effect” 和 “Choosing the State Structure” 原则：
? 最小化状态（Minimal State）：只将用户输入、服务器响应、随时间变化且无法推导的值放入 state；
? 避免冗余状态（Avoid Redundant State）：任何可通过已有 state/props 精确、同步、无副作用计算出的值，都不应成为独立 state；
? 提升可预测性与可维护性：消除状态不同步 bug，减少 effect 逻辑，使组件更易测试和推理。
⚠️ 注意事项：
- 若计算过程开销极大（如遍历万级数组、复杂 JSON 序列化），可结合 useMemo 缓存结果，但仍不属于“状态”，仅是性能优化；
- 不要将 useMemo 误用作“状态替代品”——它不保证重计算时机，也不参与 React 渲染依赖追踪的语义；
- 对于需要跨多个组件共享的派生逻辑，可封装为自定义 Hook（如 useSum(a, b)），内部仍采用直接计算。
总之：能算出来的，就别存起来；能实时算的，就别等 effect。 这不仅是性能选择，更是构建健壮、可演进 React 应用的核心思维习惯。
