From e275c108dc5af5a6d798cfa8cde358cd91826b05 Mon Sep 17 00:00:00 2001 From: * <8> Date: Fri, 5 Aug 2022 16:38:13 +0800 Subject: [PATCH] Match-id-2d85e7b702d4272d993947bdb2536d54112a3111 --- .../src/renderer/hooks/UseReducerHook.ts | 40 +++++++++---------- .../ComponentTest/HookTest/UseReducer.test.js | 38 ++++++++++++++++-- 2 files changed, 54 insertions(+), 24 deletions(-) diff --git a/libs/horizon/src/renderer/hooks/UseReducerHook.ts b/libs/horizon/src/renderer/hooks/UseReducerHook.ts index c40da904..9dd38319 100644 --- a/libs/horizon/src/renderer/hooks/UseReducerHook.ts +++ b/libs/horizon/src/renderer/hooks/UseReducerHook.ts @@ -1,20 +1,18 @@ import type { Hook, Reducer, Trigger, Update } from './HookType'; -import { - createHook, - getCurrentHook, - throwNotInFuncError -} from './BaseHook'; -import { - launchUpdateFromVNode -} from '../TreeBuilder'; +import { createHook, 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(reducer: (S, A) => - S, initArg: P, init?: (P) => S, isUseState?: boolean): [S, Trigger] | void { +export function useReducerImpl( + reducer: (S, A) => S, + initArg: P, + init?: (P) => S, + isUseState?: boolean +): [S, Trigger] | void { const stage = getHookStage(); if (stage === null) { throwNotInFuncError(); @@ -53,16 +51,19 @@ function insertUpdate(action: A, hook: Hook): Update { } // setState, setReducer触发函数 -export function TriggerAction(vNode: VNode, hook: Hook, action: A) { +export function TriggerAction(vNode: VNode, hook: Hook, isUseState: boolean, action: A): void { const newUpdate = insertUpdate(action, hook); // 判断是否需要刷新 - if (!vNode.shouldUpdate) { - const reducerObj = hook.state as Reducer; - const { stateValue, reducer } = reducerObj; + if (!vNode.shouldUpdate && isUseState) { + const { stateValue, reducer } = hook.state as Reducer; + if (reducer === null) { + return; + } // 在进入render阶段前reducer没有变化,可以复用state值,提升性能 newUpdate.state = reducer(stateValue, action); + // 标记为已经计算过,不需要重新计算了 newUpdate.didCalculated = true; @@ -87,16 +88,17 @@ export function useReducerForInit(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; - return [hook.state.stateValue, hook.state.trigger]; + return [hook.state.stateValue, trigger]; } // 更新hook.state @@ -136,5 +138,3 @@ function calculateNewState(currentHookUpdates: Array>, curren return state; } - - diff --git a/scripts/__tests__/ComponentTest/HookTest/UseReducer.test.js b/scripts/__tests__/ComponentTest/HookTest/UseReducer.test.js index 5923d9ad..5e7f0876 100644 --- a/scripts/__tests__/ComponentTest/HookTest/UseReducer.test.js +++ b/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 ( +
+ +
{data}
+
+ ); + }; + + Horizon.render(
, container); + Horizon.act(() => { + btnRef.current.click(); + }); + expect(nextId).toBe(2); + }); });