使用mobX全功能组件

Question

我刚刚学习了react和react-native 3个月，我对函数组件非常熟悉，从一切开始，因为从第一步开始，我已经在函数中写了一个“hello world”，现在，我仍然坚持函数，因为，我读了一些博客，并且通过

hooks

，学习课程是可选的，所以我决定专注于功能组件。但是当我开始学习MobX时，我感到有点困惑和挣扎，尤其是

store

：

class TodoStore {
    todos: Todo[] = []

    constructor() {
        makeObservable(this, {
            todos: observable,
            unfinishedTodoCount: computed,
            addTodo: action
        })
    }

    get unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.done).length
    }

    addTodo(todo: Todo) {
        this.todos.push(todo)
    }
}

一个愚蠢的老问题，但是

constructor()

如何在功能组件中使用？这是

state

吗？但是如何应用 mobX，如何将上面的类转换为函数，或者我们可以对所有 mobX 概念使用函数吗？

请帮忙，非常感谢

Answer 1

没有动态状态的函数式编程只是一个大函数，对于相同的参数返回相同的值。 在 React 中，您的状态确实存储在 React 实例本身中，每次您使用

setState

React 都会保存该值以供将来渲染。它为你保存状态。

对于 MobX，您必须创建可观察对象的实例并向您的组件提供对其的访问权限，以便他们可以更改它/与其交互。

最佳实践是从类中创建一个对象实例，并通过上下文 API 将该实例提供给您的组件。 （如果您不知道如何使用它，请阅读它）

您可以创建一个简单的 JavaScript 对象并使用

makeObservable(obj)

使其可观察，但同样如此。最佳实践是创建一个类并在构造函数中调用

makeObservable(this)

。

这是一个简单的类 Store 的示例：

class AgeStore {
  @observable age: number = 12;

  constructor() {
    makeObservable(this);
  }

  @action
  grow() {
    this.age++;
  }
}

这就是初始化 React 应用程序的方式（您应该将其拆分为多个文件）：

const ageStore = new AgeStore();
const AppContext = createContext(null);

export function useAgeStore() {
  return useContext(AppContext);
}

ReactDOM.render(
  <AppContext.Provider value={ageStore}>
    <App />,
  </AppContext.Provider>
  document.getElementById('app'),
);

这就是你的功能组件应该如何使用商店：

export const DemoComp: React.FC = observer(function DemoComp() {
  const ageStore = useAgeStore();

  return <div>
    <div>The current Age is:{ageStore.age}</div>
    <button onClick={ageStore.grow()}>Grow</button>
  </div>;
});