Лучший способ хранить ненаблюдаемые данные в компоненте React Stateless (с хуками) - PullRequest
Новая
       26

Лучший способ хранить ненаблюдаемые данные в компоненте React Stateless (с хуками)

0 голосов
/ 13 июня 2019

Я использую mobx-реагировать / mobx-реагировать-lite для управления состоянием

Используя классы, я могу определить ненаблюдаемый idToDelete для хранения идентификатора элемента, по которому щелкнули, открыть модал, используя наблюдаемый, и когдапользователь нажимает «Удалить», я знаю элемент для удаления.Идентификатор «запоминается» компонентом при повторном рендеринге 

    class Greeting extends React.Component {
      idToDelete = null;

      confirmDelete = id => {
        this.idToDelete = id;
        openConfirm = true;
      }

      closeModal = () => {
        openConfirm = true;
        this.idToDelete = null;
      }

      @observable
      openConfirm = false;
      render() {
        // List of items with delete button
        <button onClick=this.confirmDelete(id)>Delete</button>

        // Confirm Delete Modal

      }
    }

Но в компоненте без состояния идентификатор становится нулевым (значение инициализации) при каждом повторном рендеринге.

Используя useLocalStore hook, я могу хранить наблюдаемые значения:

Все свойства возвращаемого объекта будут автоматически доступны для наблюдения

Но я не хочу повторнорендеринг только потому, что я храню / изменяю идентификатор.

Использование React.React.createContext / useContext мне кажется немного излишним (это своего рода личное значение, и оно не имеет отношения вне самого компонента)

Есть ли способ «локального хранилища» для этого?(без видимого преобразования)

Каковы лучшие практики для этой ситуации?

1 Ответ

1 голос
/ 13 июня 2019

Вы можете использовать хук useRef , чтобы сохранить значение. Изменение этого значения не вызовет повторную визуализацию, и значение останется неизменным для всех визуализаций, если вы не переопределите его.

Это также объяснено подробно здесь

Да! Хук useRef () предназначен не только для ссылок DOM. «Реф» объект является универсальный контейнер, текущее свойство которого является изменяемым и может содержать любой значение, аналогичное свойству экземпляра класса.

например: 

import { useRef } from 'react';

const idToDelete = useRef("");

confirmDelete = id => {
    idToDelete.current = id;
}

closeModal = () => {
    idToDelete.current = null;
}

Также учтите, что вам нужно использовать .current для доступа к данным.

...