在React无状态组件中使用Hooks存储不可观察数据的最佳方法

Question

我正在使用mobx-react / mobx-react-lite进行状态管理

使用类，我可以定义一个不可观察的idToDelete来存储单击的项目ID，使用可观察的对象打开Modal，并且当用户单击“删除”时，我知道要删除的项目。 id通过重新渲染的组件被“记住”

    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

      }
    }

但是在无状态组件中，每次重新渲染时，id都将为null（初始化值）。

使用useLocalStore钩子，我可以存储可观察的值：

返回对象的所有属性将自动变为可观察

但是我不想仅仅因为我正在存储/更改ID而重新渲染。

对我来说，使用React.React.createContext / useContext似乎有点矫kill过正（这是私有值，与组件本身无关）

是否有“本地存储”方式来实现这一目标？ （没有可观察到的转换）

在这种情况下，最佳做法是什么？

Answer 1

您可以使用useRef钩子来保存值。 更改此值将不会触发重新渲染，并且该值在整个渲染中将保持不变，除非您覆盖它。

它也在这里详细解释

是! useRef（）挂钩不仅用于DOM引用。 “ ref”对象是一个通用容器，其当前属性是可变的，并且可以保存任何值，类似于类的实例属性。

例如：

import { useRef } from 'react';

const idToDelete = useRef("");

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

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

另外请注意，您需要使用.current来访问数据。