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中的第二个参数与一系列依赖项一起传递。

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

1 个答案: