基于布尔条件渲染对象数组的最优实现方案咨询

嘿，这个需求在React开发里真的挺常见的，咱们来拆解下你给出的两种方案，再聊聊不同场景下的最优选择：

方案1：通过useEffect过滤后存入状态 #

先修正下你代码里的小语法问题，正确写法如下：

const list: object[] = [....] // 来自其他数据源
const [renderList, setRenderList] = useState<object[]>([]) // 待渲染的数组

useEffect(() => {
    // 根据布尔条件过滤数组
    setRenderList(list.filter(el => el.something === condition)); 
}, [list, condition]) // 别忘了把condition也加入依赖项，否则条件变化时不会触发更新

renderList.map((el) => <RenderThis key={el.id} {...el} />);

优缺点分析 #

• 🌟 优点：过滤逻辑只会在list或condition发生变化时执行一次，不会在组件每次渲染都重复计算，性能更优，尤其是数据量较大的时候。
• ❌ 缺点：多维护了一个状态变量，增加了组件的状态管理成本；而且每次过滤后会触发状态更新，带来一次额外的组件重渲染。

方案2：渲染时直接过滤+条件渲染 #

这种方案不需要额外状态，直接在渲染阶段处理：

const list: object[] = [....] // 来自其他数据源

// 先过滤再映射，比在map里嵌套判断更清晰易读
list
  .filter(el => el.something === condition)
  .map((el) => <RenderThis key={el.id} {...el} />);

优缺点分析 #

• 🌟 优点：代码简洁直观，没有额外的状态和副作用逻辑，上手成本低，维护起来也简单。
• ❌ 缺点：每次组件渲染都会重新执行filter操作，如果list数据量大（比如几百上千条），或者组件本身会频繁重渲染，这部分重复计算会带来不必要的性能开销。

最优方案：分场景选择 #

其实没有绝对的“最优”，得看你的具体场景：

• 如果list数据量小（几十条以内），或者组件渲染频率不高，方案2是首选——这点性能开销完全可以忽略，代码简洁才是王道。
• 如果list数据量大，或者组件会频繁重渲染，推荐用useMemo缓存过滤结果，这比方案1更优雅：

const renderList = useMemo(() => {
  return list.filter(el => el.something === condition);
}, [list, condition]);

renderList.map((el) => <RenderThis key={el.id} {...el} />);

这个方案既避免了方案1的额外状态更新，又能像方案1一样只在依赖变化时重新过滤，完美平衡了性能和代码简洁性。

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