詳解如何在React函數(shù)式組件中使用MobX

更新時(shí)間：2024年01月05日 11:43:44 作者：慕仲卿

MobX 是一個(gè)簡(jiǎn)潔的狀態(tài)管理庫(kù),它通過(guò)透明的函數(shù)響應(yīng)式編程（TFRP）使得狀態(tài)管理變得簡(jiǎn)單和可擴(kuò)展,下面就跟隨小編一起來(lái)了解一下如何在React函數(shù)式組件中使用MobX吧

MobX 是一個(gè)簡(jiǎn)潔的狀態(tài)管理庫(kù)，它通過(guò)透明的函數(shù)響應(yīng)式編程（TFRP）使得狀態(tài)管理變得簡(jiǎn)單和可擴(kuò)展。在 React 函數(shù)式組件中使用 MobX 可以讓我們更輕松地管理組件狀態(tài)。這篇文章將介紹如何在 React 函數(shù)式組件中結(jié)合使用 MobX 和 mobx-react 包提供的 observer 函數(shù)以及 Provider和 useContext。

安裝

首先，需要確保 mobx 和 mobx-react 已經(jīng)添加到項(xiàng)目依賴(lài)中。

npm install mobx mobx-react

定義你的 Store

創(chuàng)建一個(gè) store 來(lái)存儲(chǔ)應(yīng)用狀態(tài)。

import { makeAutoObservable } from 'mobx';

class TodoStore {
  todos = [];

  constructor() {
    makeAutoObservable(this);
  }

  addTodo(todo) {
    this.todos.push(todo);
  }

  get todoCount() {
    return this.todos.length;
  }
}

export const todoStore = new TodoStore();

使用 Provider 和 useContext 提供和使用 Store

通過(guò) Provider 可以將 store 傳遞到 React 組件樹(shù)中。然后，使用 React 的 useContext 鉤子函數(shù)將 store 注入到函數(shù)式組件中。

創(chuàng)建一個(gè) context：

import { createContext } from 'react';
import { todoStore } from './TodoStore';

export const StoreContext = createContext(todoStore);

使用 Provider 將 store 提供給組件：

import React from 'react';
import ReactDOM from 'react-dom';
import { StoreContext } from './store';
import App from './App';
import { todoStore } from './TodoStore';

ReactDOM.render(
  <StoreContext.Provider value={todoStore}>
    <App />
  </StoreContext.Provider>,
  document.getElementById('root')
);

在函數(shù)式組件中使用 Store

在函數(shù)式組件中，可以通過(guò) useContext 鉤子和 observer 函數(shù)來(lái)使用 store 和響應(yīng)其變化。

import React, { useState, useContext } from 'react';
import { observer } from 'mobx-react';
import { StoreContext } from './store';

const TodoList = observer(() => {
  const store = useContext(StoreContext);
  const [newTodo, setNewTodo] = useState('');

  const handleInputChange = (e) => {
    setNewTodo(e.target.value);
  };

  const handleFormSubmit = (e) => {
    e.preventDefault();
    store.addTodo(newTodo);
    setNewTodo('');
  };

  return (
    <div>
      <form onSubmit={handleFormSubmit}>
        <input
          type="text"
          value={newTodo}
          onChange={handleInputChange}
        />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {store.todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <div>Total Todos: {store.todoCount}</div>
    </div>
  );
});

export default TodoList;

在上述代碼中，TodoList 組件通過(guò) useContext 獲取到 todoStore，通過(guò) observer 函數(shù)包裹組件以確保組件能響應(yīng)狀態(tài)變化。每當(dāng)狀態(tài)更新時(shí)（如添加了一個(gè) todo），TodoList 組件會(huì)重新渲染以反映最新的狀態(tài)。

通過(guò)使用 MobX、Provider 和 React 的 Context API，我們可以在函數(shù)式組件中便利地管理和使用狀態(tài)。

到此這篇關(guān)于詳解如何在React函數(shù)式組件中使用MobX的文章就介紹到這了,更多相關(guān)React MobX內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: