Question

我遇到了一些人提到height:100vh的帖子，甚至给出了一些很好的例子，但是我找不到任何真实的文档。另外，我grep useEffect目录，并且在整个代码库中都没有提到node_modules/preact。这是一个单独的模块吗？还是我弄错了版本（8.4.2）？请解释并给出完整的工作示例。

Answer 1

挂钩被释放为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主要是关于访问FunctionalComponent中的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';

如何在Preact中使用useEffect？

2 个答案: