时间戳

首页 > 解决方案 > 在 React 无状态组件中存储不可观察数据的最佳方式（使用 Hooks）

javascript - 在 React 无状态组件中存储不可观察数据的最佳方式（使用 Hooks）

问题描述

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

使用类，我可以定义一个不可观察的 idToDelete 来存储单击的项目 ID，使用可观察的打开模态，当用户单击“删除”时，我知道要删除的项目。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 对我来说似乎有点矫枉过正（这是一种私有值，与组件本身无关）

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

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

标签： javascriptreactjsmobx-react

解决方案

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

它也在这里详细解释

是的！useRef() Hook 不仅适用于 DOM 引用。“ref”对象是一个通用容器，其当前属性是可变的并且可以保存任何值，类似于类上的实例属性。

例如：

import { useRef } from 'react';

const idToDelete = useRef("");

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

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

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

推荐阅读