mobx-react中useLocalStore介绍

在mobx-react中，useLocalStore是一个React Hook函数，它允许我们在函数式组件中使用局部的mobx store。使用useLocalStore创建的局部store只能在当前组件中使用，而不能被其它组件所共享。它可以帮助我们在函数式组件中使用mobx，从而实现更好的状态管理。

使用useLocalStore时，我们需要传入一个函数，这个函数返回一个包含状态和行为的对象，就像创建普通的mobx store一样。然后，useLocalStore会根据这个函数创建一个新的mobx store，并将其与当前组件相关联。在组件的生命周期中，我们可以使用这个局部store来存储和更新组件状态，而不必将其维护在组件的state中。

例如，下面的例子演示了如何使用useLocalStore来创建一个计数器：

import { useLocalStore } from 'mobx-react';

const Counter = () => {
  const store = useLocalStore(() => ({
    count: 0,
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  }));

  return (
    <div>
      <h1>Count: {store.count}</h1>
      <button onClick={store.increment}>Increment</button>
      <button onClick={store.decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

在这个例子中，我们创建了一个局部的mobx store，其中包含了count状态和increment、decrement行为。然后，我们在组件中使用这个store来展示计数器，并通过按钮来增加或减少计数器的值。每次点击按钮时，函数组件将重新渲染，并且store中的状态将自动更新。