Javascript 如何在术前使用useEffect？

我看到一些帖子，人们提到

useffect

，甚至给出了一些很好的例子，但我找不到任何真正的文档。此外，我还使用了

node\u modules/preact

dir，在整个代码库中没有提到

useffect

。这是一个单独的模块吗？或者我得到了错误的preact版本（8.4.2）？请解释并给出完整的工作示例。

挂钩是作为

React 16.8

的一部分发布的。从第10版开始，Preact钩子就处于可用状态。您可以通过

npm安装将Preact更新到最新的beta版来访问它们preact@10.0.0-beta.2

用法

import { useState } from 'preact/hooks'

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

从'preact/hooks'导入{useState}
导出功能演示（道具）{
const[count，setCount]=useState（0）
返回setCount（c=>c+1）}>{count}
}

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

Preact类组件可以直接访问，但不能

因此，

useffect（）

充当所有生命周期方法的集合

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

在类组件中可以通过

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 });
     });
  }
}

从'preact'导入{h，Component}；
从“/style.scss”导入*作为样式；
从“../../../utils/ajax”导入{get}；
从“../types”导入{ExampleDataObject}；
接口组件NameProps{
id：编号；
}
接口组件名称状态{
数据：ExampleDataObject；
}
导出类ComponentName扩展组件{
公共呈现（{id}:ComponentNameProps，{data}:ComponentNameState）{
返回(
{JSON.stringify（数据）}
);
}
公共组件didmount（）：void{
获取（`/getData？id=${id}`）。然后（（d）=>{
this.setState（{data:d}）；
});
}
}

在功能部件中可以实现相同的效果：

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>
     );
}

从'preact'导入{h，FunctionalComponent}；
从“/style.scss”导入*作为样式；
从'preact/hooks'导入{useState，useffect}；
从“../../../utils/ajax”导入{get}；
从“../types”导入{ExampleDataObject}；
接口示例道具{
id：编号；
}
导出常量示例：FunctionalComponent=（{id}）=>{
const[data，setData]=useState；
useffect（（）=>{
get（`/getData？id=${id}`）
。然后（（d）=>{
setData（d）；
});
}，[id]）；
返回(
{data！==未定义&&(
JSON.stringify（数据）
)};
);
}

提醒：（适用于使用VSCode的人-应该是所有人都知道的）：
VSCode通常会为您执行导入行（即使用QuickFix helper），但它通常会将useState/useffect的导入行弄错（它会将/src添加到末尾，这不起作用）。因此，请记住仔细检查这两个项目的导入

错误：

从'preact/hooks/src'导入{useState，useffect}

正确：

从'preact/hooks'导入{useState，useffect}
钩子是作为
React 16.8
的一部分发布的。预作用挂钩处于测试阶段。preact网站称其与react 15.x相当，但useffect看起来像react 16