如果道具被改变了，我可以用什么方法给出初始值，以避免反模式效果

Question

我使用反应钩。如果道具被改变了，有什么方法可以获得初始值？我想避免反模式效应。

场景1：在构建DOM之前。

据我所知，就这些目的而言，这是一份备忘录。如果有其他选项，您可以选择显示它们。

情景2：在DOM之后

在这个变体中，useLayoutEffect，useEffect。如果有其他选项，您可以选择显示它们。

import React, { useState, useMemo, useLayoutEffect, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";
const X = () => {
  const [x, setX] = useState(0);
  return (
    <div>
      <div>
        <Y x={x} />
      </div>
      <div onClick={() => setX(x + 1)}>{"go"}</div>
    </div>
  );
};

function Y({ x }) {
  const [y, setY] = useState(x);

  /*useMemo(() => {
    console.log("");
    setY(x);
  }, [x]);*/
  /*useEffect(() => {
    console.log("");
    setY(x);
  }, [x]);*/
  /*useLayoutEffect(() => {
    console.log("");
    setY(x);
  }, [x]);*/
  console.log(y);
  return <div className="App">{console.log(y, "DOM")}</div>;
}

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

我认为使用所有这些挂钩不是一个好的做法。但我看不到其他解决办法。也许还有第三种不使用挂钩的选择？

Answer 1

“获取初始值”是什么意思？如果只想存储传递给该组件的第一个值，可以使用useRef（）

function Y ({ x }) {
  const initial = useRef(x)
  const y = initial.current

  return <div>the inital value was {y} and the current value is {x}</div>
}

如果你想得到以前的值，你可以这样做：

function Y ({ x }) {
  const previous = useRef(null)

  const y = previous.current
  // A component coud rerender all the time
  // so only change the previous value when x changes
  useEffect(() => { previous.current = x }, [x])

  return <div>the previous value was {y} and the current value is {x}</div>
}

Answer 2

在您的示例中，是否需要将状态存储在Y中？为什么不直接参考道具x？

当道具x更改时，如果您希望更新y中的y状态，则可以使用依赖于x的useffect。

useEffect(() => {
  setY(x);
}, [x]);

在这种情况下，您不会使用usemo，因为您没有计算并返回值。