我们什么时候使用 rerender 变量，什么时候在 React 中使用常规变量？答案

【问题标题】：When do we use rerender variable and when do we use regular variable in React?我们什么时候使用 rerender 变量，什么时候在 React 中使用常规变量？
【发布时间】：2026-01-07 17:00:02
【问题描述】：

我们有 useState 和 useReducer，在更改由它们创建的变量后，组件会重新渲染。但是我们也可以使用 useRef 以及简单地使用 let 和 const 创建变量。我迷失了在什么情况下我们必须使用 useState 创建变量，useReducer 什么没有？据我了解，如果我们需要在 DOM 中显示变量，那么我们使用 useState 和 useReducer 进行计算，我们使用 useRef 还是只使用常规的 let 和 const？我说的对吗？

例如，如果我读取scrollY的值，我应该将它存储在由let创建的变量中，如果我存储输入值我应该使用useState？

export default function(){
    let scroll = useRef(0); // this ?
    let scroll = 0 // this ?
    let (scroll, changeScroll) = useState(0) or this // or this ?

    // scroll var
    useEffect(() => {
        window.addEventListener("scroll", () => {
            scroll = window.scrollY;
        })
        return () => {
            window.removeEventListener("scroll",() => {
                scroll = window.scrollY;
            });
        }
    }, [])

【问题讨论】：

如果我正确理解了这个问题，您基本上想知道何时使用标准变量（const，let）以及何时使用 React 钩子（useRef，useState）将信息存储在功能组件中？如果是这样，您应该阅读React Hooks Overview 和React Hooks API Reference，因为它们概述了何时使用每个不同的钩子。
关于您在问题中的假设，我想说它们不一定是正确的。任何类型的变量值都可以用作 JSX 的一部分并呈现到 DOM，并且可以以任何不同的方式来进行计算来存储变量。通过阅读我上面链接的文档，您会发现决策过程更多地基于“如何在组件生命周期中使用此值”。

标签： reactjs

【解决方案1】：

您应该将useState 用于表示组件状态的变量，例如文本字段的值、复选框是否被选中以及您希望在渲染之间保留的其他值。

const[text, setText]=useState('defaultText')
return (<input value={text} onChange={(e) => setText(e.target.value)} />)

对于您确实需要持久化的变量，您可以创建普通变量，每次渲染组件时它们都会重新初始化。

let temp = doSomeCalculations()
if(temp>1000)
    updateState()
doSomethingElseAndForgetAboutTemp()

scroll 在您的示例中应该是一个普通变量，因为它不代表组件的状态。如果您将窗口的滚动位置读入scroll，然后用户滚动离开，scroll 将没有任何意义，同样，如果您更新scroll，它不会对滚动位置做任何事情，所以它不会将其保持在该状态没有任何意义，您需要在每次滚动时读取当前值。

另一方面，useRef 不应该存储变量，而是让您能够直接与子组件交互，例如 input 或 checkbox，这使它看起来像是useState - 您可以直接读取和设置元素的值，而不是为输入值创建状态变量。但是，在大多数情况下，最好使用状态变量，因为它使您的代码更具可读性和可维护性。

const[myInput]=useRef()
return (<input ref={myInput} onChange={() => console.log(myInput.current.value)} />)

【讨论】：