Блог

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

  const prevCountRef = useRef();
  useEffect(() => {
    prevCountRef.current = count;  });
  const prevCount = prevCountRef.current;
  return <h1>Now: {count}, before: {prevCount}</h1>;
}
 

В приведенном выше фрагменте из React Hoks FAQS useRef используется для сохранения количества. Однако всякий раз, когда вызывается render, не prevCount будет ли установлено значение current count , поскольку useEffect оно будет вызываться при каждом рендеринге, так чем же отличаются count и prevCount ?

Это потому useEffect , что функция обратного вызова будет вызвана после завершения rendering time работы Counter компонента of. и именно поэтому 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 в консоли