如何在ReactJS中的函数组件内部声明变量

问题描述

我有一个变量“ 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) => {
  ....
}

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

解决方法

反应文档建议使用useRef来保持任意可变的值。因此，您可以这样做：

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

// ...

// update ref
myValRef.current = false;

,

您要使用解决方案1。

代码

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

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

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