在ReactJS的功能组件中声明一个变量

如何解决在ReactJS的功能组件中声明一个变量

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

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

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

}

您知道，通过这种方式，如果其他状态发生变化，则将重新渲染组件，然后将重新初始化“ myVar” ...

下面，我找到了解决方法...

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

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

解决方案2：声明组件属性（但公开）

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

常规解决方案是什么？

解决方法

使用useRef挂钩。由引用存储的值在重新渲染期间不会重新初始化。更改引用存储的值不会触发重新渲染，因为这不是状态更改。

,

好，在类组件中，这可以通过 componentDidMount 和 componentDidUpdate 逻辑来解决。通过使用 useRef 和 useEffect 钩子，可以对功能组件执行相同的操作：

const myComponent = () => {
      const mounted = useRef();
    
    useEffect(() => {
        if (!mounted.current) {
           // do componentDidMount logic
            mounted.current = true;
            const myVar = false
        } else {
          // do componentDidUpdate logic
        }
      });
    }