扫一扫分享
react 的 Hooks api,但用于标准 Web 组件和lit-html或hyperHTML。
<html lang="en">
<my-counter></my-counter>
<script type="module">
import { html } from 'https://unpkg.com/lit-html/lit-html.js';
import { component, useState } from 'https://unpkg.com/haunted/haunted.js';
function Counter() {
const [count, setCount] = useState(0);
return html`
<div id="count">${count}</div>
<button type="button" @click=${() => setCount(count + 1)}>
Increment
</button>
`;
}
customElements.define('my-counter', component(Counter));
</script>
</html>
Haunted 支持与 React Hooks 相同的 API。希望通过这样做,您可以简单地通过在捆绑程序的配置中为包名称设置别名来重用 npm 上可用的钩子。
目前 Haunted 支持以下钩子:
useCallback
useContext
useController
useEffect
useLayoutEffect
useMemo
useReducer
useRef
useState
手机预览