rerumaccusamus/website/docs/guides/tutorials/c10-model/10.3-use-model.md

The meta-framework suite designed from scratch for frontend-focused modern web development.

---
title: 使用 Model
---

上一小节中，我们实现了 Model，已经把 AllContacts 组件中原有的 UI 无关业务逻辑解耦出来。

这一小节中，我们使用这个 Model 直接把 AllContacts 组件重新还原出来，实现变得更简洁清晰：

```js title="src/contacts/components/AllContacts/index.tsx"
import { useEffect } from 'react';
import { useLocalModel } from '@modern-js/runtime/model';
import { List } from 'antd';
import Item from '../Item';
import contacts from '../../models/contacts';

const AllContacts = () => {
  const [{ items, error, pending }, actions] = useLocalModel(contacts);

  useEffect(() => {
    if (!items.length && !error && !pending) {
      actions.load();
    }
  });
  return (
    (items.length && (
      <List
        dataSource={items}
        renderItem={info => <Item key={info.name} info={info} />}
      />
    )) || (
      <div className="p-4 items-center border-gray-200 border-b border-t custom-text-gray">
        Pending...
      </div>
    )
  );
};

export default AllContacts;
```

以上代码跟上一章节中 `AllContacts` 组件的代码等价。

`useLocalModel` 是 Modern.js 提供的 hooks API，可以使用 Model，在组件中提供 Model 中定义的 state，或通过 actions 调用 Model 中定义的 side effect 与 action，从而改变 Model 的 state。

Modern.js 的 Model 能够这样使用的原因是 Model 是基于 FP 的，不像 OOP 的 Model 那样自身持有和封装了状态，对外部提供方法访问和修改自身内部的状态。

Model 是业务逻辑，是计算过程，本身不创建也不持有状态，只有在被组件用 hooks API 使用后，才在指定的地方（比如这个例子里，是组件内部的 state）创建状态。

执行 `pnpm run dev`，可以看到跟上一章节一样的效果。

---

> 本小节的代码可以在[这里查看](https://github.com/modern-js-dev/modern-js-examples/tree/main/tutorials/c10/hello-modern-3)。