Сохранение значения переменной в компоненте функции

Question

Итак, в компоненте класса 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, есть ли способы установки переменных в компонентах функций, которые не сохраняют свое значение после размонтирования?

Answer 1

В функциональных компонентах это достигается с помощью useRef

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

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

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

Для получения дополнительной информации, см. Документацию API , плюс этот раздел часто задаваемых вопросов