React如何实现可触发重渲染且实时获取最新值的单一变量

你需要的逻辑没有内置的单个原生Hook支持，本质原因是React的设计中两个API的定位完全不同：

• useState返回的状态是单次渲染的快照，闭包中捕获的值永远对应渲染时的版本，天然保证渲染一致性，值变化会触发重渲染，但无法在异步/独立函数中直接拿到最新值
• useRef存储的是脱离渲染周期的可变值，读写.current永远能拿到最新内容，但值变化不会触发重渲染

最简便的方式是把你现在写的重复逻辑封装为自定义Hook，一次封装后所有组件都可以直接复用，完全消除冗余代码。

封装版本1：兼容Ref使用习惯 #

import { useState, useRef, useCallback } from 'react';

function useLatestState(initialValue) {
  const [renderValue, setRenderValue] = useState(initialValue);
  const latestRef = useRef(initialValue);

  const setValue = useCallback((newVal) => {
    // 兼容原生useState的函数式更新写法
    const finalVal = typeof newVal === 'function' ? newVal(latestRef.current) : newVal;
    latestRef.current = finalVal;
    setRenderValue(finalVal);
  }, []);

  latestRef.value = renderValue;
  return [latestRef, setValue];
}

用法 #

const [value, setValue] = useLatestState("hello world");

// 渲染场景直接读.value，更新会自动触发重渲染，和原生useState表现一致
// JSX示例：<div>{value.value}</div>

// 独立函数/异步逻辑中读.current，永远拿到最新值
const logValue = () => console.log(value.current);

封装版本2：完全对齐useState使用习惯 #

如果你不想额外记.value/.current的区别，可以封装成和原生useState几乎一致的用法，单独暴露获取最新值的方法：

import { useState, useRef, useCallback } from 'react';

function useLatestState(initialValue) {
  const [state, setState] = useState(initialValue);
  const ref = useRef(initialValue);

  const setValue = useCallback((newVal) => {
    const finalVal = typeof newVal === 'function' ? newVal(ref.current) : newVal;
    ref.current = finalVal;
    setState(finalVal);
  }, []);

  const getLatest = useCallback(() => ref.current, []);
  return [state, setValue, getLatest];
}

用法 #

const [value, setValue, getValue] = useLatestState("hello world");

// 渲染场景直接用value，和原生useState完全一致
// JSX示例：<div>{value}</div>

// 独立函数中调用getValue()拿最新值
const logValue = () => console.log(getValue());

注意：不要在渲染过程中读取ref.current作为渲染依据，它是可变的，不会触发重渲染，渲染场景永远使用绑定渲染周期的值即可。

内容的提问来源于stack exchange，提问作者Ignace Vau