时间戳

首页 > 解决方案 > 在函数组件中存储变量值

javascript - 在函数组件中存储变量值

问题描述

因此，在 React 类组件中，我可以非常轻松地添加一个属性：

export default class Thing extends Component {
    constructor(props){
        super(props)

        this.hasRunQuery = false
    }

    handleClick = () => {
        this.hasRunQuery = true
    }

    render(){
        return (
            <button onClick={this.handleClick}>
                Click 
            </button>
        )
    }

当它卸载/重新安装时，这个变量当然会被重新设置（因为它是类的一个新实例）。功能组件似乎没有这种奢侈：

let hasRunQuery = false

export default () => {
    handleSubmit = () => {
        hasRunQuery = true
    }

    return (
        <button onClick={handleSubmit}>
            Click
        </button>
    )
}

如果上述组件卸载并重新安装，hasRunQuery则仍然如此。如果这个组件有 10 个实例，它们会以某种方式共享同一个变量。

除了在 中存储任何和所有属性之外useState，是否有任何方法可以在函数组件中设置变量，一旦卸载就不会保留其值？

标签： javascriptreactjsreact-hooks

解决方案

在功能组件中，这是通过useRef

export default () => {
    const hasRunQuery = useRef(false)

    const handleSubmit = () => {
        hasRunQuery.current = true
    }

    return (
        <button onClick={handleSubmit}>
            Click
        </button>
    )
}

有关更多信息，请参阅 api 文档，以及常见问题解答的这一部分

推荐阅读