react函数式组件怎么使用dva的module

在使用 React 的函数式组件中使用 dva 的 module，首先需要确保你的项目已经安装并配置了 dva。以下是一般步骤：

1. 引入 dva 实例：在你的函数式组件中，首先需要从 dva 中引入 `useModel` 这个 Hook。这个 Hook 允许你在函数式组件中使用 dva 的 model。

import React from 'react';
import { useModel } from 'dva';

function MyComponent(props) {
  // 使用 useModel Hook 来使用 dva 的 model
  const [state, dispatch] = useModel('myModel');
  // state 是 model 中的 state 部分，dispatch 是派发 action 的方法
}

2. 使用模型中的状态和派发器：在函数式组件中，你可以像使用 React 的 `useState` 和 `useEffect` 一样，使用从 `useModel` 得到的 `state` 和 `dispatch`。`state` 是模型中的状态部分，而 `dispatch` 可以派发 action 到 model 中。

3. 连接模型：通常，你可能还需要连接 model 中的 `subscriptions` 部分（用于订阅数据源，例如 WebSocket 或者监听全局事件等）。这通常在组件加载时通过 `useEffect` 钩子来处理。

import React, { useEffect } from 'react';
import { useModel } from 'dva';

function MyComponent(props) {
  const [state, dispatch] = useModel('myModel');
  
  // 组件加载时订阅数据，类似于 componentDidMount 钩子
  useEffect(() => {
    const subscription = app-model.subscribe(() => {
      // 可以在这里根据需要重新获取数据等操作
    });

    // 组件卸载时取消订阅
    return () => {
      subscription.unsubscribe();
    };
  }, []);
}

4. 使用模型中的副作用：在某些情况下，你可能需要在 model 中进行副作用处理，比如获取数据。这时候可以在组件的 `useEffect` 钩子中派发一个 action 来实现这一点。

import React, { useEffect } from 'react';
import { useModel } from 'dva';

function MyComponent(props) {
  const [state, dispatch] = useModel('myModel');
  
  useEffect(() => {
    // 假设有一个异步获取数据的 action 名为 'fetchData'
    dispatch({ type: 'myModel/fetchData' });
  }, [dispatch]);
}