使用useMemo在渲染期间更新React Hooks状态

Question

在渲染状态下设置状态时，是否可以使用useMemo just 来避免额外的引用相等性检查代码/变量？

示例：useMemo和setState在从此rare documented use case拍摄的渲染期间：

function ScrollView({row}) {
  let [isScrolling, setIsScrolling] = useState(false);

  const lessCodeThanCheckingPrevRow = useMemo(
    () => {
      // Row changed since last render. Update isScrolling.
      setIsScrolling(true); // let's assume the simplest case where prevState isn't needed here
    },
    [row]
  );

  return `Scrolling down: ${isScrolling}`;
}

上面的方法大大减少了代码和额外的var，仅用于相等性检查，所以为什么文档暗示必须手动进行引用相等性检查？

Answer 1

对于我来说，这似乎是一种减少样板的好方法。我创建了一个codeandbox来验证其行为。

const UnitUnderTest = ({prop}) => {
  let [someState, setSomeState] = useState(false);

  const lessCodeThanCheckingPrevRow = useMemo(
    () => setSomeState(current => !current), 
    [prop],
  );

  useEffect(() => console.log('update finished'), [prop])

  console.log('run component');

  return `State: ${someState}`;
}

const App = () => {
  const [prop, setProp] = useState(false);
  const handleClick = () => setProp(current => !current);

  return (
    <div>
      <button onClick={handleClick} >change prop</button>
      <UnitUnderTest prop={prop} />
    </div>
  )
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

单击按钮以更改传递给组件的道具时的输出：

> run component 
> run component 
> update finished 

您可以看到该组件在更新周期完成之前已经运行了两次。这等效于getDerivedStateFromProps的行为。

我猜想为什么文档提出稍微不同的技术背后没有更深的思考。从某种意义上说，这也是手动检查，但是很简洁。 +1这个想法。

Answer 2

为此行为使用useEffect挂钩。 useMemo用于存储一个值，该值可能不必在每个渲染器上都发生变化，从而避免对该值进行无用的重新计算