React中派生变量是什么？如何使用及优化代码可读性？

什么是派生变量？ #

派生变量是完全从现有组件状态（state）、属性（props）或其他变量计算得出的值，不需要单独存储为组件状态。它的核心特点是：值由其他数据决定，不存在独立的数据源。比如从用户列表中过滤出的活跃用户、购物车商品的总价、根据滚动位置判断的页面状态等，都属于派生变量。

如何使用派生变量？ #

根据计算逻辑的复杂度和使用场景，有几种常见的使用方式：

1. 渲染阶段直接计算 #

如果计算逻辑简单、性能开销小，可以直接在组件函数内部、JSX渲染前完成计算。这种方式最直观，适合简单场景：

function Cart({ items }) {
  // 派生变量：计算购物车总价
  const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  
  return (
    <div className="cart">
      <h2>我的购物车</h2>
      {items.map(item => (
        <div key={item.id} className="cart-item">
          {item.name} × {item.quantity} ：${item.price * item.quantity}
        </div>
      ))}
      <div className="cart-total">总价：${total}</div>
    </div>
  );
}

2. 用useMemo缓存计算结果 #

如果计算逻辑复杂（比如过滤/排序大列表），或者依赖的变量会频繁更新，使用useMemo可以缓存计算结果，避免每次渲染都重复执行昂贵的计算：

import { useMemo } from 'react';

function UserList({ users, filterKeyword }) {
  // 缓存派生的过滤后用户列表，仅当users或filterKeyword变化时重新计算
  const filteredUsers = useMemo(() => {
    return users.filter(user => 
      user.name.toLowerCase().includes(filterKeyword.toLowerCase())
    );
  }, [users, filterKeyword]);

  return (
    <ul className="user-list">
      {filteredUsers.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

3. 封装为自定义Hook复用逻辑 #

如果多个组件需要用到相同的派生逻辑，可以把计算逻辑封装成自定义Hook，实现代码复用：

import { useState, useEffect } from 'react';

// 自定义Hook：计算滚动位置相关的派生变量
function useScrollState() {
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // 派生变量：判断是否滚动过顶部导航栏
  const isNavFixed = scrollY > 80;

  return { scrollY, isNavFixed };
}

// 在组件中使用
function Navbar() {
  const { isNavFixed } = useScrollState();

  return (
    <nav style={{ position: isNavFixed ? 'fixed' : 'relative', top: 0 }}>
      网站导航
    </nav>
  );
}

派生变量能否简化代码、提升可读性？ #

绝对可以，主要体现在以下几点：

• 消除冗余状态：不需要将计算后的值单独存为state，避免了“原始数据更新后，派生状态未同步”的bug，减少了状态管理的复杂度。
• 逻辑集中清晰：计算逻辑和使用逻辑紧密关联，或者封装在Hook中，其他开发者能快速理解变量的来源和含义，比如filteredUsers一看就知道是过滤后的用户列表，比在JSX中嵌入一堆计算逻辑更直观。
• 降低维护成本：当需要修改计算规则时，只需要修改一处逻辑即可，不用在多个地方同步更新状态。
• 提升性能（可选）：结合useMemo可以避免不必要的重复计算，优化组件渲染性能。

内容的提问来源于stack exchange，提问作者Eli Sailer-Haugland