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

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来访问数据。