使用效果

useEffectOnce 是React中的自定义钩子,旨在模仿 componentDidMount 财务报告和审定财务报表 componentWillUnmount 类组分中的生命周期方法. 这是经过修改的版本 useEffect 它只在组件上架时运行一次.

特征

• 一次执行 : 钩子在组件初始渲染时执行提供的效果函数一次.
• 清理能力 : 它支持一个可选的清除函数,从效果中返回,当组件卸载时会叫它.
• SSR 兼容性 : 作为延伸 useEffect,它与服务器侧渲染环境自然相容.

安装

选择并安装适合您项目需要的单个钩子, 或安装整个收藏, 用于全套公用事业 .

只安装当前钩

npm install @custom-react-hooks/use-effect-once

或者说

yarn add @custom-react-hooks/use-effect-once

安装全部钩

npm install @custom-react-hooks/all

或者说

yarn add @custom-react-hooks/all

导入虎克

这个 useEffectOnce 钩必须使用下列命名的导入方式导入:

已命名的导入 :

import { useEffectOnce } from '@custom-react-hooks/use-effect-once';

这种方法确保了钩子无缝地融入到您的项目中,在您如何使用我们的包时保持一致性和可预测性.

使用量

import React from 'react';
import { useEffectOnce } from '@custom-react-hooks/all';

const EffectOnceComponent = () => {
  const [fibonacciSequence, setFibonacciSequence] = useState([]);

  const calculateFibonacci = (n) => {
    let sequence = [0, 1];
    for (let i = 2; i < n; i++) {
      sequence[i] = sequence[i - 1] + sequence[i - 2];
    }
    return sequence.slice(0, n);
  };

  useEffectOnce(() => {
    const sequence = calculateFibonacci(5);
    setFibonacciSequence(sequence);
  });

  return (
    <div>
      <p>First {5} numbers in the Fibonacci sequence:</p>
      <ul>
        {fibonacciSequence.map((number, index) => (
          <li key={index}>{number}</li>
        ))}
      </ul>
    </div>
  );
};

export default EffectOnceComponent;

在这个例子中, useEffectOnce 用于在 MyComponent。 。 。 .

API 参考

参数

• effect: 当组件挂起时将执行一次的函数。 此函数可选择返回清理函数, 当组件卸载时执行该函数 .

使用大小写

• 初始设置: 执行初始数据获取或设置收听器等设置操作.
• 一次性计算:计算值仅在组件生命周期内需要一次.
• 单个 API 呼叫: 当一个组件首次被提供时, 发出一个 API 呼叫 .
• 非经常性订阅: 订阅只应初始化一次的服务或事件收听器.

捐款

对加强工作的贡献 useEffectOnce 总是欢迎。 随意向存放处提交问题或提出请求以作进一步改进.