React函数式组件如何存储props派生的重计算值以避免重复执行运算

结论 #

优先选择useMemo实现该需求，这是最适配当前场景的方案，两种实现的差异如下：

useMemo方案的优势 #

• 代码简洁语义明确：useMemo的设计初衷就是缓存同步的昂贵计算结果，仅依赖项变化时重新计算，代码仅需一行即可完成，可读性极强：

  const resultFromHeavyCalculation = useMemo(() => heavyCalculator(prop3), [prop3])
  

• 无额外渲染开销：计算逻辑在组件渲染阶段同步执行，不需要等待渲染完成后再更新状态，不会触发额外的重渲染，性能更优。
• 无需额外处理初始值：首屏渲染即可直接拿到正确的计算结果，不会出现初始值为空/错误的问题。

不推荐useState + useEffect方案的原因 #

• 会触发额外重渲染：useEffect的执行时机是在组件渲染完成后，此时计算完结果调用setState会触发组件二次渲染，平白增加性能开销。
• 代码冗余：需要额外维护state变量、state初始值、effect监听逻辑，代码量更大，且语义不清晰，其他维护者无法直接判断state的更新逻辑。
• 首屏会出现不符合预期的渲染：如果不给state设置正确的初始值，首屏渲染会先展示初始值，等effect执行完才会更新为正确结果，出现闪屏问题。

注意：仅当你的计算逻辑是异步操作时，才需要使用useState + useEffect的方案，你当前场景的heavyCalculator是同步纯函数，完全不需要使用该方案。

内容的提问来源于stack exchange，提问作者Eden Katabi