虽然这个 hook 的存在感确实低，但是多状态的组件用这个来替代 useState 确实不错

const initialState = { s1: 1, s2: 1, s3: 1 };function reducer(state, action) {switch (action.type) {case 'update':return { s1: state.s1 + 1, s2: state.s2 + 1, s3: state.s3 + 1 };default:return state;}
}const [reducerState, dispatch] = useReducer(reducer, initialState);
const reducerDispatch = () => {setTimeout(() => {dispatch({ type: 'update' });});
};

具体的用法不展开了，用起来和 redux 差别不大

状态直接用 Ref 声明，需要更新的时候调用更新的函数（不推荐）

// S4 不参与渲染
const [s4, setS4] = useState(1);
// update 就是 useReducer 的 dispatch，调用就更更新页面，比定义一个不渲染的 state 好多了
const [, update] = useReducer((c) => c + 1, 0);
const state1Ref = useRef(1);
const state2Ref = useRef(1);const unRefSetState = () => {// 优先更新 ref 的值state1Ref.current += 1;state2Ref.current += 1;setS4((i) => i + 1);
};const unRefSetState = () => {// 优先更新 ref 的值state1Ref.current += 1;state2Ref.current += 1;update();
};
state1Ref: {state1Ref.current} state2Ref: {state2Ref.current}
;

这样做，把真正渲染的 state 放到了 ref 里面，这样有个好处，就是函数里面不用声明这个 state 的依赖了，但是坏处非常多，更新的时候必须说动调用 update，同时把 ref 用来渲染也比较奇怪

自定义 Hook

自定义 Hook 如果在组件中使用，任何自定义 Hook 中的状态改变，都会引起组件重新渲染，包括组件中没用到的，但是定义在自定义 Hook 中的状态

简单的例子，下面的自定义 hook，有 id 和 data 两个状态， id 甚至都没有导出，但是 id 改变的时候，还是会导致引用这个 Hook 的组件重新渲染

// 一个简单的自定义 Hook，用来请求数据
const useDate = () => {const [id, setid] = useState(0);const [data, setData] = useState(null);useEffect(() => {fetch('请求数据的 URL').then((r) => r.json()).then((r) => {// 组件重新渲染setid((i) => i + 1);// 组件再次重新渲染setData(r);});}, []);return data;
};// 在组件中使用，即使只导出了 data，但是 id 变化，同时也会导致组件重新渲染，所以组件在获取到数据的时候，组件会重新渲染两次
const data = useDate();

测试代码

// use-data.ts
const useDate = () => {const [id, setid] = useState(0);const [data, setData] = useState(null);useEffect(() => {fetch('数据请求地址').then((r) => r.json()).then((r) => {setid((i) => i + 1);setData(r);});}, []);return data;
};import { useEffect, useReducer, useRef, useState } from 'react';
import useDate from './use-data';const initialState = { s1: 1, s2: 1, s3: 1 };function reducer(state, action) {switch (action.type) {case 'update':return { s1: state.s1 + 1, s2: state.s2 + 1, s3: state.s3 + 1 };default:return state;}
}const TestHook = () => {const renderTimeRef = useRef(0);const [s1, setS1] = useState(1);const [s2, setS2] = useState(1);const [s3, setS3] = useState(1);const [s4, setS4] = useState(1);const [, update] = useReducer((c) => c + 1, 0);const state1Ref = useRef(1);const state2Ref = useRef(1);const data = useDate();const [state, setState] = useState({ s1: 1, s2: 1, s3: 1 });const [reducerState, dispatch] = useReducer(reducer, initialState);const containerRef = useRef(null);const reactEventCallback = () => {setS1((i) => i + 1);setS2((i) => i + 1);setS3((i) => i + 1);};const timerCallback = () => {setTimeout(() => {setS1((i) => i + 1);setS2((i) => i + 1);setS3((i) => i + 1);});};const asyncCallback = () => {Promise.resolve().then(() => {setS1((i) => i + 1);setS2((i) => i + 1);setS3((i) => i + 1);});};const unuseState = () => {setS4((i) => i + 1);};const unRefSetState = () => {state1Ref.current += 1;state2Ref.current += 1;setS4((i) => i + 1);};const unRefReducer = () => {state1Ref.current += 1;state2Ref.current += 1;update();};const sameState = () => {setS1((i) => i);setS2((i) => i);setS3((i) => i);console.log(renderTimeRef.current);};const mergeObjectSetState = () => {setTimeout(() => {setState((prevState) => {const { s1: prevS1, s2: prevS2, s3: prevS3 } = prevState;return { ...prevState, s1: prevS1 + 1, s2: prevS2 + 1, s3: prevS3 + 1 };});});};const reducerDispatch = () => {setTimeout(() => {dispatch({ type: 'update' });});};useEffect(() => {const handler = () => {setS1((i) => i + 1);setS2((i) => i + 1);setS3((i) => i + 1);};containerRef.current?.addEventListener('click', handler);return () => containerRef.current?.removeEventListener('click', handler);}, []);console.log('render Time Hook', ++renderTimeRef.current);console.log('data', data);return (
React EventTimer CallbackAsync CallbackNative EventUnuse StateSame StateMerge State Into an ObjectReducer DispatchuseRef As State With useStateuseRef As State With useReducer
S1: {s1} S2: {s2} S3: {s3}
Merge Object S1: {state.s1} S2: {state.s2} S3: {state.s3}
reducerState Object S1: {reducerState.s1} S2: {reducerState.s2} S3:{' '}{reducerState.s3}
state1Ref: {state1Ref.current} state2Ref: {state2Ref.current}
);
};export default TestHook;