Reactjs 在React中何时使用RERERENDER变量，何时使用正则变量？

我们在react中使用了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;
            });
        }
    }, [])

---

对于表示组件状态的变量，您应该使用

useState

，例如文本字段的值、是否选中复选框以及要在渲染之间保留的其他值

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

scroll

在您的示例中应该是一个普通变量，因为它不表示组件的状态。如果您将窗口的滚动位置读取到

滚动

，然后用户滚动离开，

滚动

将没有任何意义，同样，如果您更新

滚动

，它不会对滚动位置做任何操作，因此将其保持在该状态没有任何意义，每次出现滚动时，您都需要读取当前值

另一方面，

useRef

不应该存储变量，相反，它使您能够直接与子组件交互，例如

input

或

checkbox

，这使得它看起来像是

useState

的替代品-而不是为输入值创建状态变量，您可以直接读取和设置元素的值。然而，在大多数情况下，最好使用状态变量，因为它使您的代码更具可读性和可维护性

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

const[myInput]=useRef（）
返回（console.log（myInput.current.value）}/>

如果我正确理解了这个问题，您基本上想知道何时使用标准变量（

const

，

let

）以及何时使用React挂钩（

useRef

，

useState

）在函数组件中存储信息？如果是这样的话，你应该阅读和，因为它们概述了何时使用每个不同的钩子。关于你在问题中的假设，我认为它们不一定是正确的。任何类型的变量值都可以用作JSX的一部分并呈现给DOM，并且可以通过任何不同的方式来存储变量。通过阅读我上面链接的文档，您将看到决策过程更多地基于“如何在组件生命周期中使用此值”。

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