如何在 Preact 中使用 useEffect？

Posted 2023-02-16

【中文标题】如何在 Preact 中使用 useEffect？

【英文标题】：How to use useEffect in Preact?

【发布时间】：2019-10-26 14:10:54

【问题描述】：

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

【问题讨论】：

Hooks 作为React 16.8 的一部分发布。 Preact 钩子处于测试阶段。 github.com/preactjs/preact/pull/1302.

preact 网站说它与 react 15.x 相当，但 useffect 看起来像它的 react 16 reactjs.org/docs/hooks-effect.html

【参考方案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>

【参考方案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';