如何使用观察者来包装反应自定义钩子？

发布于 2025-01-14 11:29:47 字数 534 浏览 2 评论 0原文

在我的项目中，我创建了一个自定义反应钩子，需要使用存储的可观察状态来存储 useEffect 的依赖项：

我的示例自定义钩子：

const useFoo = (() => {
   const { count } = store;
   useEffect (() => {
      //do something here   
   },[count])
})

通常我们必须包装observer()组件以使其重新渲染，但observer()不接受包装自定义钩。我已经在这个问题但这并没有明确回答我。

所以任何人都可以给我一个解决方案来做到这一点。我意识到自定义钩子应该与数据隔离以便可重用，但就我而言，如果我有这个问题的解决方案，我将节省大量时间来重构代码。多谢

原文

In my project, I create a custom react hook that needs to use observable state in store for dependencies of useEffect:

My example custom hook:

const useFoo = (() => {
   const { count } = store;
   useEffect (() => {
      //do something here   
   },[count])
})

Normally we must wrap observer() the component to make it rerender but observer() does not accept wrap custom hook. I have already referred to another question in this question but this isn't clearly answered to me.

So Anyone can give me a solution to do this. I realize custom hook should be isolated from data to be reusable but in my case, I will save a lot of time to refactor code if I have solution for this problem. Thanks a lot

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无远思近则忧 2025-01-21 11:29:47

您在 useFoo 中取消引用的可观察数据将由使用它的 observer 组件获取，因此您的 observer 组件使用 useFoo< /code> 将按预期重新渲染。

示例

const { useEffect } = React;
const { observable } = mobx;
const { observer } = mobxReact;

const store = observable({
  count: 0,
  increment() {
    store.count++;
  }
});

const useFoo = () => {
  const { count } = store;

  useEffect(() => {
    console.log(count);
  }, [count]);
};

const App = observer(() => {
  useFoo();

  return <button onClick={store.increment}>Click me</button>;
});

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx/6.4.2/mobx.umd.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx-react-lite/3.3.0/mobxreactlite.umd.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx-react/7.3.0/mobxreact.umd.production.min.js"></script>

<div id="root"></div>

The observable data you dereference in useFoo will be picked up by the observer components that use it, so your observer components using useFoo will re-render as expected.

Example

const { useEffect } = React;
const { observable } = mobx;
const { observer } = mobxReact;

const store = observable({
  count: 0,
  increment() {
    store.count++;
  }
});

const useFoo = () => {
  const { count } = store;

  useEffect(() => {
    console.log(count);
  }, [count]);
};

const App = observer(() => {
  useFoo();

  return <button onClick={store.increment}>Click me</button>;
});

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx/6.4.2/mobx.umd.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx-react-lite/3.3.0/mobxreactlite.umd.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx-react/7.3.0/mobxreact.umd.production.min.js"></script>

<div id="root"></div>

回复收藏 0 原文

~没有更多了~