Match-id-2d85e7b702d4272d993947bdb2536d54112a3111

libs/horizon/src/renderer/hooks/UseReducerHook.ts

@@ -1,20 +1,18 @@
 import type { Hook, Reducer, Trigger, Update } from './HookType';
-import {
+import { createHook, getCurrentHook, throwNotInFuncError } from './BaseHook';
-  createHook,
+import { launchUpdateFromVNode } from '../TreeBuilder';
-  getCurrentHook,
-  throwNotInFuncError
-} from './BaseHook';
-import {
-  launchUpdateFromVNode
-} from '../TreeBuilder';
 import { isSame } from '../utils/compare';
 import { setStateChange } from '../render/FunctionComponent';
 import { getHookStage, HookStage } from './HookStage';
 import type { VNode } from '../Types';
-import {getProcessingVNode} from '../GlobalVar';
+import { getProcessingVNode } from '../GlobalVar';
 
-export function useReducerImpl<S, P, A>(reducer: (S, A) =>
+export function useReducerImpl<S, P, A>(
-  S, initArg: P, init?: (P) => S, isUseState?: boolean): [S, Trigger<A>] | void {
+  reducer: (S, A) => S,
+  initArg: P,
+  init?: (P) => S,
+  isUseState?: boolean
+): [S, Trigger<A>] | void {
   const stage = getHookStage();
   if (stage === null) {
     throwNotInFuncError();
@@ -53,16 +51,19 @@ function insertUpdate<S, A>(action: A, hook: Hook<S, A>): Update<S, A> {
 }
 
 // setState, setReducer触发函数
-export function TriggerAction<S, A, T>(vNode: VNode, hook: Hook<S, A>, action: A) {
+export function TriggerAction<S, A>(vNode: VNode, hook: Hook<S, A>, isUseState: boolean, action: A): void {
   const newUpdate = insertUpdate(action, hook);
 
   // 判断是否需要刷新
-  if (!vNode.shouldUpdate) {
+  if (!vNode.shouldUpdate && isUseState) {
-    const reducerObj = hook.state as Reducer<S, A>;
+    const { stateValue, reducer } = hook.state as Reducer<S, A>;
-    const { stateValue, reducer } = reducerObj;
 
+    if (reducer === null) {
+      return;
+    }
     // 在进入render阶段前reducer没有变化，可以复用state值，提升性能
     newUpdate.state = reducer(stateValue, action);
+
     // 标记为已经计算过，不需要重新计算了
     newUpdate.didCalculated = true;
 
@@ -87,16 +88,17 @@ export function useReducerForInit<S, A>(reducer, initArg, init, isUseState?: boo
   }
 
   const hook = createHook();
+  const trigger = TriggerAction.bind(null, getProcessingVNode(), hook, isUseState);
   // 为hook.state赋值{状态值, 触发函数, reducer, updates更新数组, 是否是useState}
   hook.state = {
     stateValue: stateValue,
-    trigger: TriggerAction.bind(null, getProcessingVNode(), hook),
+    trigger,
     reducer,
     updates: null,
-    isUseState
+    isUseState,
   } as Reducer<S, A>;
 
-  return [hook.state.stateValue, hook.state.trigger];
+  return [hook.state.stateValue, trigger];
 }
 
 // 更新hook.state
@@ -136,5 +138,3 @@ function calculateNewState<S, A>(currentHookUpdates: Array<Update<S, A>>, curren
 
   return state;
 }
-
-

scripts/__tests__/ComponentTest/HookTest/UseReducer.test.js

@@ -13,25 +13,25 @@ describe('useReducer Hook Test', () => {
             return {
               ...intlCar,
               logo: 'ford',
-              price: 76
+              price: 76,
             };
           case 'bmw':
             return {
               ...intlCar,
               logo: 'bmw',
-              price: 100
+              price: 100,
             };
           case 'benz':
             return {
               ...intlCar,
               logo: 'benz',
-              price: 80
+              price: 80,
             };
           default:
             return {
               ...intlCar,
               logo: 'audi',
-              price: 88
+              price: 88,
             };
         }
       };
@@ -56,4 +56,34 @@ describe('useReducer Hook Test', () => {
     expect(container.querySelector('p').innerHTML).toBe('audi');
     expect(container.querySelector('#senP').innerHTML).toBe('88');
   });
+
+  it('dispatch只触发一次', () => {
+    let nextId = 1;
+    const reducer = () => {
+      return { data: nextId++ };
+    };
+    const btnRef = Horizon.createRef();
+    const Main = () => {
+      const [{ data }, dispatch] = useReducer(reducer, { data: 0 });
+      const dispatchLogging = () => {
+        console.log('dispatch is called once');
+        dispatch();
+      };
+
+      return (
+        <div>
+          <button ref={btnRef} onClick={() => dispatchLogging()}>
+            increment
+          </button>
+          <div>{data}</div>
+        </div>
+      );
+    };
+
+    Horizon.render(<Main />, container);
+    Horizon.act(() => {
+      btnRef.current.click();
+    });
+    expect(nextId).toBe(2);
+  });
 });