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

Я использую mobx-react / mobx-react-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, я могу хранить наблюдаемые значения:

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

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

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

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

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


reactjs javascript mobx-react
person Nomada    schedule 13.06.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

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

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

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

eg:

import { useRef } from 'react';

const idToDelete = useRef("");

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

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

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

person johnny peter    schedule 13.06.2019