Skip to content

Commit

Permalink
docs:
Browse files Browse the repository at this point in the history
  • Loading branch information
lecepin committed Nov 7, 2023
1 parent f15df29 commit 0ed6fc6
Showing 1 changed file with 87 additions and 0 deletions.
87 changes: 87 additions & 0 deletions npm-lib/ahooks/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
- 项目仓库: https://github.com/alibaba/hooks

它是由阿里开源的 react hooks 库,前身是 umi-hooks。

目前 github star 12.7k,react hooks 库排名也在前列。

#### React Hooks

- React Hooks 是 react v16.8 的一个新特性,与 function components 关联使用。
- React class component 现在用的人应该很少了,react 官方也不推荐使用了。

hooks 的方式带来的明显的优势之一就是逻辑复用,它可以极大的提高开发效率。以前的 Class Component 中以 render Props 和 HOC 的方式进行复用,很繁琐,不灵活。

现在有了 hook 模式,就可以将需要复用的逻辑与 React 的几个基本 hooks api 结合起来,创建 useXXX ,这样 use 开头的自定义 hook。

小例子:

```jsx
import React, { useState } from "react";

const myPromiseTest = () =>
new Promise((res, rej) => {
setTimeout(() => {
res("lalala");
}, 1000);
});

export default function App() {
// const [loading, setLoading] = useState(false);
// const [data, setData] = useState('');
const { loading, data, run } = usePromise(myPromiseTest);

return (
<div>
{data}
{loading && <div>loading...</div>}
<button
onClick={() => {
run();
// setLoading(true);
// myPromiseTest()
// .then((res) => {
// setData(res);
// })
// .finally(() => {
// setLoading(false);
// });
}}
>
获取数据
</button>
</div>
);
}

const usePromise = (promiseFn) => {
const [loading, setLoading] = useState(false);
const [data, setData] = useState("");
const run = () => {
setLoading(true);
promiseFn()
.then((res) => {
setData(res);
})
.finally(() => {
setLoading(false);
});
};

return { loading, data, run };
};
```

#### ahooks

ahooks 就是将我们日常开发中常用的一些功能进行了封装,可以简单类比为 lodash 的 hooks 化。

当然 ahooks 提供的场景很多。目前有:

- useRequest
- Scene
- LifeCycle
- ​State
- ​Effect
- ​Dom
- ​Advanced
- ​Dev

0 comments on commit 0ed6fc6

Please sign in to comment.