Skip to main content

自定义 Hooks

📘 useSetState​

useSetState 是一个增强版的 useState Hook，支持：

  • 设置对象状态时自动进行合并（包括 深合并（示例5） 和 浅合并 类比于 this.setState）
  • 状态更新后支持回调函数（拿到更新后的值）
  • 支持第三个参数可同步获取 设置后的最新值

✨ 导入方式​

import { useSetState } from '@itera-web/hooks-setstate';

🧪 使用示例​

1. 📚 简单对象合并​

const [form, setForm] = useSetState({ name: '', age: 0 });

setForm({ name: '张三' });
// form = { name: '张三', age: 0 }

2. 📚 函数式更新 + 回调​

setForm(
  (prev) => ({ age: prev.age + 1 }),
  (nextState) => {
    console.log('加1后的年龄:', nextState.age);
  },
);

3. 📚 非对象状态支持（如字符串）​

const [text, setText] = useSetState('');
setText('Hello World');
// text = 'Hello World'

4. 📚 第三个参数获取实时最新值​

const [textValue, setTextValue, getTextValue] = useSetState('');
setTextValue(123);

//能够同步获取到设置完毕的值
const currText = getTextValue();

5. 📚 对象深合并​

const [state, setState, getState] = useSetState({
  name: 'Alice',
  age: 25,
  address: { city: 'New York', zip: '10001' },
  hobbies: ['reading'],
});

setState(
  { address: { city: 'Los Angeles' } },
  (newState) => {
    console.log('深合并后的状态:', newState);
  },
  true, // isDeep = true，触发深合并
);

🧩 类型定义​

type SetStateAction<S> = S | ((prevState: S) => S);
type Dispatch<A> = (value: A, callback?: Function) => void;

📚 参数​

参数名类型说明
initialStateT初始状态值

📚 返回值​

变量名类型说明
stateT当前状态值
setState(value: T | ((prev: T) => T), callback?: Function) => void更新状态并可选回调

⚙️ 功能特性​

📚 支持对象状态合并（浅合并）​

setState({ age: 18 });
setState({ name: 'Tom' });
// => 最终 state = { age: 18, name: 'Tom' }

📚 支持回调函数获取最新 state​

setState({ name: 'Lucy' }, (newState) => {
  console.log('更新后的状态:', newState);
});

📌 注意事项​

  • 若传入的是对象，默认会进行浅合并；
  • 如果传入非对象（如字符串、数字、数组等），将直接替换原状态；
  • 回调函数将在状态更新后立即执行，等效于 useEffect 的触发顺序；
  • 内部通过 useRef 存储回调函数，避免闭包陷阱。

✅ 适用场景​

  • 表单管理（多字段合并）
  • 页面状态切片维护
  • 替代 useReducer 的轻量对象状态合并需求
  • 状态更新后需要获取最新值（如滚动 s、动画、接口请求）

⚡ useElectron​

useElectron 是一个自定义 React Hook，帮助你在 Electron 渲染进程中获取主进程提供的 Electron API。它通过 window.require('electron') 获取 Electron 的模块，仅在 Electron 环境下生效，适合 React 应用中条件性使用 Electron 功能。

📥 导入方式​

import useElectron from '@/hooks/useElectron';

✅ 使用示例​

📚 示例 1：访问 ipcRenderer​

const electron = useElectron();

useEffect(() => {
  if (electron) {
    electron.ipcRenderer.send('event-name', { data: 123 });
  }
}, []);

📚 示例 2：条件渲染与容错处理​

const electron = useElectron();

return <div>{electron ? "当前在 Electron 中运行" : "非 Electron 环境"}</div>;

🧩 返回值​

返回值名类型说明
electron`Electronnull`Electron 模块对象，如果当前不在 Electron 环境中则为 null

📌 注意事项​

  • 本 Hook 只能在 Electron 渲染进程（带有 Node 环境）中使用；
  • 在浏览器中运行（如 Vite 开发时），electron 为 null，请注意做非空判断；
  • 不支持在严格禁用 nodeIntegration 的环境中运行（除非通过 preload.js 暴露接口）；
  • 如果你使用了 contextIsolation: true，应通过 window.electronAPI 注入而非 window.require。

🚀 适用场景​

  • 在 React 组件中安全地访问 Electron 的 ipcRenderer、remote、shell 等 API；
  • 区分 Web 与 Electron 环境，做功能降级或条件渲染；
  • 封装 Electron 逻辑时的基础模块判断工具。