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

Question

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

使用类我可以定义一个不可观察的 idToDelete 来存储点击的项目 ID，使用可观察的打开一个模式，当用户点击 "Delete" 时，我知道要删除的项目。组件通过重新渲染"remembered" "remembered"

    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 钩子我可以存储可观察值：

All properties of the returned object will be made observable automatically

但我不想重新渲染只是因为我是 storing/changing id。

使用 React.React.createContext / useContext 对我来说似乎有点矫枉过正（它是一种私有值，在组件本身之外不相关）

是否有 "local storage" 方法来实现这一点？（没有可观察到的转换）

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

Answer 1

您可以使用 useRef 挂钩来保存值。对此值的更改不会触发 re-render，除非您覆盖它，否则该值将在渲染中保持不变。

也有详细解释here

Yes! The useRef() Hook isn’t just for DOM refs. The “ref” object is a generic container whose current property is mutable and can hold any value, similar to an instance property on a class.

例如：

import { useRef } from 'react';

const idToDelete = useRef("");

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

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

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

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

Best way to store non-observable data in a React Stateless Component (with Hooks)

javascript

reactjs

mobx-react