React中处理sortBy变更的最佳实践探讨

假设有一个用于选择排序字段的下拉列表，我们已定义状态数据：

const [data, setData] = useState([]);

现有四种处理sortBy变更的方式：

• 方式1：在下拉变更事件处理函数中排序data：

  const handleChange = (ev) => {
  
  }
  

  当下拉选择变更时，对data进行相应排序。
• 方式2：使用useEffect监听data和sortBy状态变更，在回调中重排data：

  useEffect(() => {
  
  }, [data, sortBy]);
  

  将sortBy设为状态，其变更会触发useEffect执行排序。
• 方式3：在handleChange或useEffect中排序数据后存入新状态sortedData：

  const [sortedData, setSortedData] = useState([]);
  

  执行setSortedData(newSortedData);更新排序后数据。
• 方式4：使用useMemo计算sortedData用于渲染：

  const sortedData = useMemo(function() { }, [data, sortBy]);
  

疑问：

1. 方式1是否过于命令式，不符合React声明式风格？
2. 方式2将命令式逻辑放入useEffect是否更贴合React最佳实践？

解答 #

方式1：确实偏命令式，违背React声明式思路 #

React的核心是声明式描述UI与状态的映射关系——你只需要告诉React“当前状态是什么，UI该对应呈现什么”，而非命令式地一步步操控数据变更再更新UI。

方式1的问题在于：

• 把排序动作直接绑定在事件回调里，属于命令式地触发数据修改，没有将“排序规则（sortBy）”作为独立状态管理，逻辑耦合度高；
• 如果直接修改原data状态（哪怕是排序后用setData更新），会覆盖原始数据源，后续如果需要恢复原始排序会很麻烦；
• 完全偏离了React“状态驱动UI”的设计理念，更像是传统DOM操作的思路。

方式2：用useEffect处理排序并非最佳实践 #

useEffect的设计初衷是处理副作用，比如发起请求、操作DOM、订阅事件这类和渲染无关的外部逻辑。而排序属于衍生状态计算——基于现有data和sortBy推导出来的结果，不属于副作用范畴。

把排序逻辑放进useEffect的弊端：

• 需要额外维护sortedData状态，手动同步衍生状态容易出现不同步问题（比如遗漏依赖、依赖更新时机偏差）；
• 代码逻辑不直观，其他人看代码时需要追踪useEffect的触发时机，增加了理解成本；
• 不符合React对衍生状态的处理规范，属于误用useEffect的场景。

更推荐的方案：方式4（useMemo） #

对于排序这种纯计算的衍生数据，useMemo是最贴合React声明式风格的选择：

• 你只需要声明“当data或sortBy变化时，按照指定规则计算排序后的数组”，React会自动缓存计算结果，避免不必要的重复排序；
• 无需额外维护状态，所有逻辑集中在衍生计算中，代码简洁且易维护；
• 完全符合React“状态驱动UI”的理念：你描述“基于当前数据源和排序规则应该得到什么结果”，而非命令式地执行排序动作。

方式3虽然也将排序结果存入独立状态，但同样存在手动同步衍生状态的问题，仅当需要修改排序后的结果（而非单纯基于原数据推导）时，才适合使用这种方式。

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