Функция Counter () {const [количество, setCount] = useState (0); const prevCountRef = useRef (); useEffect (() => {prevCountRef.current = count;}); const prevCount = prevCountRef.current; ...

0
murtaza52 12 Янв 2021 в 18:45

1 ответ

Лучший ответ

Это потому, что функция обратного вызова useEffect будет вызываться после завершения rendering time компонента Counter. и поэтому prevCount всегда отстает на tick.

Следует учитывать, что изменение в React ref не вызовет повторного рендеринга в компоненте React, только change in state and props вызовет повторный рендеринг.

См. рабочий пример здесь: https://codesandbox.io /s/lucid-butterfly-y66tc?file=/src/App.js

export default function Counter() {
  const [count, setCount] = useState(0);

  const prevCountRef = useRef();
  useEffect(() => {
    prevCountRef.current = count;
    console.log('me socond')
  });
  console.log('me first')
  const prevCount = prevCountRef.current;
  return (
    <h1>
      Now: {count}, before: {prevCount}
      <div onClick={() => setCount((v) => v + 1)}>click me</div>
    </h1>
  );
}

Вы видите me first, затем me second в консоли

1
Taghi Khavari 12 Янв 2021 в 16:08