如何记忆自定义React钩子

import React, { useState, useEffect, useMemo } from 'react';

// 定义自定义钩子函数
function useCustomHook(initialValue) {
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    // 处理副作用操作
    console.log('Component mounted or updated');

    // 清除副作用操作
    return () => {
      console.log('Component unmounted');
    };
  }, []);

  const customFunction = useMemo(() => {
    // 缓存计算结果或函数引用
    return someCalculations(value);
  }, [value]);

  return [value, setValue, customFunction];
}

// 使用自定义钩子函数
function MyComponent() {
  const [state, setState, customFunction] = useCustomHook('initial value');

  const handleClick = () => {
    setState('new value');
  };

  return (
    <div>
      <p>State: {state}</p>
      <button onClick={handleClick}>Update State</button>
      <p>Custom Function Result: {customFunction}</p>
    </div>
  );
}

// 优势：自定义React钩子可以帮助开发者重复使用逻辑和状态，提高代码的可复用性和可维护性。
// 应用场景：自定义React钩子适用于需要在多个组件中共享逻辑或状态的情况。
// 推荐的腾讯云相关产品：腾讯云的云服务器（CVM）和云函数（SCF）可以为React应用提供可靠的托管环境和弹性的计算资源。
// 腾讯云产品介绍链接地址：https://cloud.tencent.com/product/cvm、https://cloud.tencent.com/product/scf