我可以在 useEffect 之外声明一个变量吗？反应钩子

Question

我正在学习 React Hooks，实际上我正在使用 useEffect 方法。完全没问题，但是我收到了一些关于我的变量声明的警告。这是我写的一个例子：

import React, { useRef, useEffect } from 'react';

function App(){
  let containerRef = useRef(null);

  let myVariable;

  useEffect(){
    myVariable = containerRef.children[0];
  }

  return(
    <div className="container" ref={el => containerRef = el}>
        <h1>Hey, I'm Laurie </h1>
        <p> Nice to e-meet you!</p>
    </div>
  )
}

这只是我所做的一个简单且未完成的示例，用于使用 GSAP 为我的网站制作动画。我使用useRef访问 DOM 元素，我只找到了这个解决方案。但是我的控制台给我写了一些警告，我很迷茫。

我得到的警告：

React Hook useEffect 内部对myVariable变量的赋值将在每次渲染后丢失。要随着时间的推移保留该值，请将其存储在 useRef Hook 中，并将可变值保留在 '.current' 属性中。否则，您可以直接在 useEffect 中移动此变量。

有人可以帮我解决这个问题吗？

Answer 1

当你使用 Hook 时，基本上你是在告诉 React 你的组件需要在渲染后做一些事情。React 会记住你传递的函数，并在执行 DOM 更新后调用它。

更多细节

https://reactjs.org/docs/hooks-effect.html#example-using-hooks

关于警告： React 不记得您的myVariable。它将在每次渲染时重新创建。最好使用useState钩子在 useEffect 中设置值并在下一次渲染时记住它。

请记住，始终将 useEffect 中的第二个参数与依赖项数组一起传递。