如何在 Preact 中使用 useEffect？

Question

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

Answer 1

挂钩已作为 React 16.8 的一部分发布。从版本 10 开始，Preact 挂钩在 beta 中。您可以通过使用 npm install preact@10.0.0-beta.2

将 Preact 更新到最新的测试版来访问它们

用法，

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 主要是关于访问 FunctionalComponent 中的 Lifecycle Methods。

Preact ClassComponents 可以直接访问 Lifecycle methods, but 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 会经常为你做导入行 （即使用快速修复助手） - 但它经常会为 useState / useEffect 导入错误的行（它会添加 /src到最后，这是行不通的）。所以记得仔细检查这两个的导入。

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

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

如何在 Preact 中使用 useEffect？

How to use useEffect in Preact?

javascript

preact