Reactjs 使用其他挂钩时是否可靠？

建议使用refs访问state/props的先前值，甚至将其抽象为一个

useproval

customhook

文档中的示例（使用按钮修改）：

因此，我的问题是：

为什么添加状态更新会导致此示例中断

如果不相关的钩子导致它们更新，那么usePrevious/refs是可靠的解决方案吗

---

上一个值是上次渲染时的值计数，而不是其上一个值（如果有意义的话）

由于颜色更改时渲染之间的计数不会更改，因此计数等于该渲染上的previousCount

而是使用另一个useState跟踪lastCount，并在调用setCount时更新它

const[lastCount，setLastCount]=useState（0）；
{
让我们计数；
setCount（c=>{currentCount=c；返回c+1；}）；
setLastCount（currentCount）；
}
}>
添加

在您的示例中，如果您询问“此渲染是由计数更新引起的吗？”，则前面的值很有用。如果count等于previousCount，那么答案是否定的

function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);
  return <div>
      <h1>Now: {count}, before: {prevCount}</h1>
      <button onClick={() => setCount(c => c + 1)}>Add</button>
    </div>
}

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

export default function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);
  const [color, setColor] = useState("black");

  useEffect(() => {
    // This breaks the prev count counter: when displayed on screen, previous = count
    setColor(count % 2 ? "red" : "blue");
  }, [count]);

  return (
    <div>
      <h1>Now: {count}, before: {prevCount}</h1>
      <button style={{ color }} onClick={() => setCount(c => c + 1)}>
        Add
      </button>
    </div>
  );
}

...

  ...

  useEffect(() => {
    // This works: When displayed, previous = count - 1
    setColor("black");
  }, [count]);

  ...