React Hooks中如何响应主状态同步派生状态？实现可靠性咨询

• 存在不必要的状态冗余：length 完全是 arr 的直接派生值，根本不需要单独作为独立的state存储，平白增加了状态同步的成本
• 存在隐蔽的逻辑bug：
  • useEffect默认在组件挂载完成后会执行一次，会把初始正确的length值从5直接改成6，和预期显示的初始值不符
  • 同步逻辑写死了setLength(length + 1)，没有直接关联arr的实际值，如果后续对arr的操作不是末尾追加元素（比如删除元素、替换为其他长度的数组），length的显示值会和arr的实际长度完全脱节
• 有不必要的性能开销：arr变更后会触发第一次渲染，等useEffect执行触发setLength后又会触发第二次渲染，一次主状态变更要多跑一次完整的渲染流程
• 不符合Hooks的规范要求：
  • useEffect内部引用了响应式的length变量，但是没有把它加入依赖数组，会触发Lint警告，后续代码迭代时很容易出现逻辑偏差
  • clickHandler里直接捕获了外层的arr值，如果后续把这个回调传递给子组件、或者连续快速触发多次点击，很可能拿到旧的arr值导致更新错误

最优实现：直接计算派生值（零额外依赖、零同步成本） #

按照React的设计原则，所有能从现有state、props直接推导出来的值，都不应该单独存成独立state，从根源上避免状态同步问题。
这种场景下根本不需要用useEffect，也不需要给派生值单独声明state，直接在组件渲染时基于主状态计算就行：

import { useState } from 'react';
export default function App() {
  const [arr, setArr] = useState([1, 2, 3, 4, 5]);
  // 直接基于主状态计算派生值，不存在同步不同步的问题
  const length = arr.length;

  const clickHandler = () => {
    // 更新state时用函数式写法，拿到最新的旧状态值，避免闭包陷阱
    setArr(prev => [...prev, prev.length + 1])
  };

  return (
    <div className="App">
      <h2>{length}</h2>
      <button onClick={clickHandler}>click</button>
    </div>
  );
}

派生计算逻辑较重时的优化：用useMemo缓存结果 #

如果派生值的计算不是简单取属性，而是需要遍历、复杂运算的高开销逻辑，可以用useMemo把计算结果缓存起来，只有主状态arr变更时才重新计算，避免每次组件渲染都重复跑计算逻辑：

import { useState, useMemo } from 'react';
export default function App() {
  const [arr, setArr] = useState([1, 2, 3, 4, 5]);
  const length = useMemo(() => {
    // 这里可以放任意复杂的基于arr的计算逻辑
    return arr.length;
  }, [arr]); // 仅当arr变化时重新计算

  const clickHandler = () => {
    setArr(prev => [...prev, prev.length + 1])
  };

  return (
    <div className="App">
      <h2>{length}</h2>
      <button onClick={clickHandler}>click</button>
    </div>
  );
}

只有当派生值无法直接从主状态同步计算得到——比如需要走异步请求拿到结果、需要接收其他来源的状态交互、用户可以手动修改这个派生值的时候，才需要用useEffect做同步。这种场景下的同步逻辑必须直接基于主状态计算新值，不能拿上一次的派生值做累加，否则很容易出现状态漂移：

// 正确的effect同步写法（如果必须要存独立state的场景）
useEffect(() => {
  // 直接基于主状态计算新的派生值，不要依赖旧的派生state做累加
  setLength(arr.length)
}, [arr])

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