通过useEffect响应用户触发的状态变更是否为React不良实践？

这种用useEffect响应用户触发的状态变更，不算绝对的“不良实践”，但确实是可以优化的写法——你这里的maxHeight属于衍生状态：它完全可以通过collapsed和contentRef直接计算出来，没必要单独用状态存储再通过useEffect同步。这种同步逻辑不仅多了一层状态维护，还可能在某些场景下（比如contentRef内容动态变化时）出现状态不一致的问题。

优化方案1：去掉useEffect，直接计算衍生值 #

不需要在Collapsible组件里维护maxHeight状态，直接在渲染时实时计算对应的样式：

// Collapsible组件内部
import { useMemo, useRef } from 'react';

function Collapsible({ collapsed, children, className }) {
  const contentRef = useRef(null);
  
  // 实时计算maxHeight样式
  const maxHeightStyle = useMemo(() => {
    if (collapsed) {
      return { maxHeight: '0px' };
    }
    return contentRef.current ? { maxHeight: `${contentRef.current.scrollHeight}px` } : {};
  }, [collapsed]);

  return (
    <div
      ref={contentRef}
      style={maxHeightStyle}
      className={`${className} overflow-hidden transition-max-height duration-300`}
    >
      {children}
    </div>
  );
}

这种写法省去了useEffect的同步逻辑，也避免了状态不一致的风险，样式始终和最新的collapsed状态、内容高度保持同步。

优化方案2：封装useCollapsible钩子，与组件绑定 #

如果你担心逻辑分离，其实可以把钩子作为组件的内部依赖，而非完全独立。钩子专门封装折叠的核心计算逻辑，组件负责渲染和样式整合：

// useCollapsible.js
import { useMemo } from 'react';

export function useCollapsible(collapsed, contentRef) {
  const maxHeight = useMemo(() => {
    if (collapsed) return '0px';
    return contentRef.current ? `${contentRef.current.scrollHeight}px` : 'auto';
  }, [collapsed, contentRef.current]);

  return { maxHeight };
}

// Collapsible组件内部
import { useRef } from 'react';
import { useCollapsible } from './useCollapsible';

function Collapsible({ collapsed, children, className }) {
  const contentRef = useRef(null);
  const { maxHeight } = useCollapsible(collapsed, contentRef);

  return (
    <div
      ref={contentRef}
      style={{ maxHeight }}
      className={`${className} overflow-hidden transition-max-height duration-300`}
    >
      {children}
    </div>
  );
}

这不是“逻辑分离”，而是合理拆分职责：钩子负责处理折叠的核心计算，组件负责渲染层的整合，逻辑依然和组件强关联，同时还提升了代码的可复用性。

总结 #

你的原始写法能实现功能，但存在优化空间。优先选择直接计算衍生值的方案，既简洁又可靠；如果需要在多个组件复用折叠逻辑，用钩子封装是更专业的做法，并不会导致逻辑与组件脱节，反而让代码结构更清晰。

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