在React中将三元运算符替换为useMemo函数是否合理？

这种替换有合理性，但你的写法存在依赖项遗漏的问题，得修正后才能安全使用，具体分析如下：

为什么合理？ #

原代码里，每次组件渲染时，不管判断条件和参数有没有变化，都会执行generateFunctionOne或generateFunctionTwo中的某一个。如果这两个函数涉及高开销计算（比如复杂数据转换、大量循环处理），用useMemo缓存计算结果，就能避免每次渲染都重复执行这些耗时操作，只有当依赖的变量变化时才重新计算，能有效提升组件性能。

存在的问题 #

你的useMemo依赖数组漏了两个关键变量：

• isItemOne：它是决定执行哪个函数的判断条件，一旦它的值变化，计算结果必然要更新
• location：它是generateFunctionOne的入参，参数变了，函数返回值也会变

没把这两个变量加入依赖数组的话，就算它们发生变化，useMemo还是会返回之前缓存的旧结果，导致ChildComponent的myProp值不更新，出现逻辑bug。

修正后的正确写法 #

const isItemOne = item.type === 'Item one';

const setValue = useMemo(() => {
  if (isItemOne) {
    return generateFunctionOne(itemOne.id, location);
  }
  return generateFunctionTwo(itemTwo.url);
}, [isItemOne, itemOne.id, location, itemTwo.url]);

return (
  <ChildComponent myProp={setValue} />
);

额外注意点 #

如果generateFunctionOne和generateFunctionTwo是定义在组件内部的普通函数（不是组件外部的纯函数），那每次组件渲染时这两个函数都会被重新创建，会导致useMemo频繁重新计算。这种情况下，你需要用useCallback把这两个函数包裹起来，或者把它们移到组件外部，同时也要把它们加入useMemo的依赖数组中。

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