如何在 ReactJS 的功能组件中声明变量答案

【问题标题】：How to declare a variable inside a functionnal component in ReactJS如何在 ReactJS 的功能组件中声明变量
【发布时间】：2021-01-30 03:06:45
【问题描述】：

我有一个变量“myVar”（不是状态）

const myComponent = () => {
  const [myState, setMyState] = useState(true)
  const myVar = false

  return <button onClick={() => {myVar = true} >Click here</button>

}

正如它所写的，当重新渲染组件时，myVar 被重新初始化......我想让变量保持其先前的值。我怎样才能得到这种行为？

我找到的解决方案是：

解决方案1：在组件之外初始化变量（但不在组件范围内）

let myVar = 'initial value';
const myComponent = () => {
  ....
  // myVar is updated sometimes when some functions run
}

解决方案 2：声明一个组件道具（但公开）

const myComponent = ({myVar = true) => {
  ....
}

解决此问题的推荐方法是什么？

【问题讨论】：

这个很抽象。如果你用实际的语言表达问题会有所帮助。
“这样，没关系 ℹ️，但 myVar 是全局的：当我回到这条路线时，它不会重新初始化”——这不是让它成为全局的全部意义吗？所以它没有重新初始化？
@Damien 您希望myVar 何时重新初始化？我很难理解这一点
感谢您的提问。实际上，我只想在加载组件时初始化变量

标签： javascript reactjs react-hooks constants state

【解决方案1】：

React 文档建议使用 useRef 来保留任意可变值。所以，你可以这样做：

// set ref
const myValRef = React.useRef(true);

// ...

// update ref
myValRef.current = false;

【讨论】：

【解决方案2】：

您想使用解决方案 #1。

代码

let myVar = 'initial value';
const myComponent = () => {
  ....
  // myVar is updated sometimes when some functions run
}

将在渲染之间保留变量myVar。

第二个解决方案不起作用。作为道具的变量不会保持渲染之间的状态。

【讨论】：