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似乎有点过大（这是私有值，与组件本身无关）

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

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

Answer 1

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

还详细说明了here

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

例如：

import { useRef } from 'react';

const idToDelete = useRef("");

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

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

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

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

1 个答案: