如何在 Preact 中使用 useEffect？

Question

我看到有人提到useEffect 的帖子，甚至给出了一些很好的例子，但我找不到任何真正的文档。此外，我 grepped node_modules/preact dir 并且在整个代码库中没有提到 useEffect。这是一个单独的模块吗？或者我得到了错误版本的 preact (8.4.2)？请解释并给出一个完整的工作示例。

Answer 1

Hooks 作为React 16.8 的一部分发布。 Preact 钩子在版本 10 中位于 beta。您可以通过使用 npm install preact@10.0.0-beta.2 将 Preact 更新到最新的 beta 来访问它们

用法，

import { useState } from 'preact/hooks'

export function Demo(props) {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(c => c+1)}>{count}</button>
}

Answer 2

useEffect 主要是关于访问功能组件中的Lifecycle Methods。

Preact ClassComponents 可以直接访问Lifecycle methods，但FunctionalComponents 不能。

因此，useEffect() 将所有生命周期方法合二为一。

例如：_{（使用 Preact/Typescript 的完整示例）}

在 ClassComponent 中您可以通过 ComponentDidMount 生命周期方法加载数据：

import { h, Component } from 'preact';
import * as style from './style.scss';
import { get } from '../../../utils/ajax';
import { ExampleDataObject } from '../types';

interface ComponentNameProps {
  id: number;
}

interface ComponentNameState {
  data: ExampleDataObject;
}

export class ComponentName extends Component<ComponentNameProps, ComponentNameState> {
  public render ({ id }: ComponentNameProps, { data }: ComponentNameState) {
     return (
        <div class={style.container}>
          {JSON.stringify(data)}
        </div>
     );
  }
  public componentDidMount(): void {
     get(`/getData?id=${id}`).then((d) => {
        this.setState({ data: d });
     });
  }
}

在一个FunctionalComponent中，可以达到同样的效果：

import { h, FunctionalComponent } from 'preact';
import * as style from './style.scss';
import { useState, useEffect } from 'preact/hooks';
import { get } from '../../../utils/ajax';
import { ExampleDataObject } from '../types';

interface ExampleProps {
  id: number;
}

export const Example: FunctionalComponent<ExampleProps> = ({id}) => {
const [data, setData] = useState<ExampleDataObject | undefined>;
useEffect(() => {
  get<ExampleDataObject>(`/getData?id=${id}`)
     .then((d) => {
        setData(d);
     });
}, [id]);

     return (
        <div class={style.ExampleWrapper}>
          {data !== undefined && (
             JSON.stringify(data)
          )};
        </div>
     );
}

提醒：（对于那些使用 VSCode 的人 - 应该每个人都知道）：
VSCode 通常会为您执行导入行（即使用 Quick Fix 帮助程序） - 但它经常为 useState / useEffect 获取错误的导入行（它会将 /src 添加到末尾，这不会'不工作）。所以记得仔细检查这两个的导入。

错误：
import { useState, useEffect } from 'preact/hooks/src';

正确：
import { useState, useEffect } from 'preact/hooks';