React子组件是否必须为有状态组件？仅消费父级状态时该如何选择？

你提到的两种写法表面看运行结果相似，但有状态写法属于完全不必要的冗余实现，存在多个明显缺陷：

• 额外性能开销：useState会在React内部维护状态副本，useEffect需要在组件渲染完成后异步调度执行，相比无状态写法直接在渲染流程同步计算，会多占用内存、增加不必要的运行时开销。
• 易出依赖遗漏Bug：你给出的有状态示例本身就存在问题：isPro也会影响name、price的计算结果，但没有被加入useEffect的依赖数组，当父组件传入的isPro变化时，有状态组件的显示内容不会更新，无状态写法完全不存在这个问题，每次重渲染都会自动使用最新的prop计算结果，天然和父组件状态保持同步。
• 代码冗余可维护性差：相同的计算逻辑，有状态写法需要多写近一倍的模板代码，后续修改计算规则时既要调整计算逻辑，还要同步维护依赖数组，维护成本更高。

如果你的计算逻辑复杂度很高，每次重渲染重复计算会造成性能损耗，也不需要用useState+useEffect的组合，只需要用useMemo缓存计算结果即可，示例如下：

const ServicesCard = ({ service, onClick, isPro = false }) => {
  const { name, price, prefix, suffix } = useMemo(() => {
    const name = isPro && service.pro?._id ? service.pro.pro_name : service.name;
    let price = isPro && service.pro?._id ? service.pro.total : service.total;
    let prefix;
    let suffix;

    if (service.hasPages) {
      prefix = 'from';
    }
    if (service.uid === 'abcdef') {
      prefix = '';
      price = `${price} per page`;
      suffix = '($5 minimum)';
    }
    if (service.uid === 'qwerty') {
      suffix = "+ gov't fees";
    }
    return { name, price, prefix, suffix }
  }, [service, isPro])

  return (
    <div className={styles.servicesCard} onClick={onClick}>
      <h1 className={styles.header}>{name}</h1>
      <p className={styles.pricing}>
        <span className={styles.prefix}>{prefix}</span>
        <span className={styles.price}>{`$${price}`}</span>
        <span className={styles.suffix}>{suffix}</span>
      </p>
    </div>
  );
};

综上，只要子组件没有自己独立的、不受父组件控制的状态需求，就完全不需要引入useState、useEffect这类状态API，遵循单向数据流原则直接消费prop是最合理的实现方案。

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