vue-hooks-api

KO | EN

gitlite — search

#nodejs #python #docker #javascript #typescript #vscode #vscode-extension #game #android #react-native #golang #cli

★ 23 Open GitHub ↗

在 Vue3 中实现 React 原生 Hooks（useState、useEffect）进而深入理解 React Hooks 的本质原理

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vue-hooks-api
Experimental React hooks implementation in Vue3

更多详细介绍请阅读我的掘金文章[《在 Vue3 中实现 React 原生 Hooks（useState、useEffect）进而深入理解 React Hooks 的本质原理》](https://juejin.cn/post/7121363865840910372/)

### install

```
yarn add vue-hooks-api
```

### React-style Hooks

```javascript
import { useState, useReducer, useEffect, useLayoutEffect } from "vue-hooks-api";

const FunctionalComponent = (props, context) => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useReducer((x) => x + 1, 1);
  const [count3, setCount3] = useReducer((x) => x + 1, 2);

useEffect(() => {
    console.log("useEffect", count2);
  }, [count2]);

useLayoutEffect(() => {
    console.log("useLayoutEffect", count2);
  }, [count2]);

return (
    <>
      <button onClick={() => setCount1(2)} {...props}>
        count1:{count1}
      </button>
      <button onClick={() => setCount2()} {...props}>
        count2:{count2}
      </button>
      <button onClick={() => setCount3()} {...props}>
        count3:{count3}
      </button>
    </>
  );
};

export default FunctionalComponent;
```

vue-hooks-api

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README