revert merge request
This commit is contained in:
parent
b587af88b5
commit
cb7063ad82
|
@ -14,7 +14,6 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import * as Inula from '../../../src/index';
|
import * as Inula from '../../../src/index';
|
||||||
const { useState } = Inula;
|
|
||||||
describe('FunctionComponent Test', () => {
|
describe('FunctionComponent Test', () => {
|
||||||
it('渲染无状态组件', () => {
|
it('渲染无状态组件', () => {
|
||||||
const App = props => {
|
const App = props => {
|
||||||
|
@ -90,39 +89,4 @@ describe('FunctionComponent Test', () => {
|
||||||
Inula.render(<App />, container);
|
Inula.render(<App />, container);
|
||||||
expect(container.querySelector('div').style['_values']['--max-segment-num']).toBe(10);
|
expect(container.querySelector('div').style['_values']['--max-segment-num']).toBe(10);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('函数组件渲染中重新发生setState不触发整个应用重新更新', () => {
|
|
||||||
function CountLabel({ count }) {
|
|
||||||
const [prevCount, setPrevCount] = useState(count);
|
|
||||||
const [trend, setTrend] = useState(null);
|
|
||||||
if (prevCount !== count) {
|
|
||||||
setPrevCount(count);
|
|
||||||
setTrend(count > prevCount ? 'increasing' : 'decreasing');
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<h1>{count}</h1>
|
|
||||||
<Child trend={trend} />
|
|
||||||
{trend && <p>The count is {trend}</p>}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
let count = 0;
|
|
||||||
function Child({ trend }) {
|
|
||||||
count++;
|
|
||||||
return <div>{trend}</div>;
|
|
||||||
}
|
|
||||||
|
|
||||||
let update;
|
|
||||||
function App() {
|
|
||||||
const [count, setCount] = useState(0);
|
|
||||||
update = setCount;
|
|
||||||
return <CountLabel count={count} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
Inula.render(<App />, container);
|
|
||||||
update(1);
|
|
||||||
expect(count).toBe(2);
|
|
||||||
})
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -18,19 +18,12 @@ import type { VNode } from '../Types';
|
||||||
import { getLastTimeHook, setLastTimeHook, setCurrentHook, getNextHook } from './BaseHook';
|
import { getLastTimeHook, setLastTimeHook, setCurrentHook, getNextHook } from './BaseHook';
|
||||||
import { HookStage, setHookStage } from './HookStage';
|
import { HookStage, setHookStage } from './HookStage';
|
||||||
|
|
||||||
const NESTED_UPDATE_LIMIT = 50;
|
|
||||||
// state updated in render phrase
|
|
||||||
let hasUpdatedInRender = false;
|
|
||||||
function resetGlobalVariable() {
|
function resetGlobalVariable() {
|
||||||
setHookStage(null);
|
setHookStage(null);
|
||||||
setLastTimeHook(null);
|
setLastTimeHook(null);
|
||||||
setCurrentHook(null);
|
setCurrentHook(null);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function markUpdatedInRender() {
|
|
||||||
hasUpdatedInRender = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// hook对外入口
|
// hook对外入口
|
||||||
export function runFunctionWithHooks<Props extends Record<string, any>, Arg>(
|
export function runFunctionWithHooks<Props extends Record<string, any>, Arg>(
|
||||||
funcComp: (props: Props, arg: Arg) => any,
|
funcComp: (props: Props, arg: Arg) => any,
|
||||||
|
@ -52,14 +45,8 @@ export function runFunctionWithHooks<Props extends Record<string, any>, Arg>(
|
||||||
setHookStage(HookStage.Update);
|
setHookStage(HookStage.Update);
|
||||||
}
|
}
|
||||||
|
|
||||||
let comp = funcComp(props, arg);
|
const comp = funcComp(props, arg);
|
||||||
|
|
||||||
if (hasUpdatedInRender) {
|
|
||||||
resetGlobalVariable();
|
|
||||||
processing.oldHooks = processing.hooks;
|
|
||||||
setHookStage(HookStage.Update);
|
|
||||||
comp = runFunctionAgain(funcComp, props, arg);
|
|
||||||
}
|
|
||||||
// 设置hook阶段为null,用于判断hook是否在函数组件中调用
|
// 设置hook阶段为null,用于判断hook是否在函数组件中调用
|
||||||
setHookStage(null);
|
setHookStage(null);
|
||||||
|
|
||||||
|
@ -76,22 +63,3 @@ export function runFunctionWithHooks<Props extends Record<string, any>, Arg>(
|
||||||
|
|
||||||
return comp;
|
return comp;
|
||||||
}
|
}
|
||||||
|
|
||||||
function runFunctionAgain<Props extends Record<string, any>, Arg>(
|
|
||||||
funcComp: (props: Props, arg: Arg) => any,
|
|
||||||
props: Props,
|
|
||||||
arg: Arg
|
|
||||||
) {
|
|
||||||
let reRenderTimes = 0;
|
|
||||||
let childElements;
|
|
||||||
while (hasUpdatedInRender) {
|
|
||||||
reRenderTimes++;
|
|
||||||
if (reRenderTimes > NESTED_UPDATE_LIMIT) {
|
|
||||||
throw new Error('Too many setState called in function component');
|
|
||||||
}
|
|
||||||
hasUpdatedInRender = false;
|
|
||||||
childElements = funcComp(props, arg);
|
|
||||||
}
|
|
||||||
|
|
||||||
return childElements;
|
|
||||||
}
|
|
||||||
|
|
|
@ -21,7 +21,6 @@ import { setStateChange } from '../render/FunctionComponent';
|
||||||
import { getHookStage, HookStage } from './HookStage';
|
import { getHookStage, HookStage } from './HookStage';
|
||||||
import type { VNode } from '../Types';
|
import type { VNode } from '../Types';
|
||||||
import { getProcessingVNode } from '../GlobalVar';
|
import { getProcessingVNode } from '../GlobalVar';
|
||||||
import { markUpdatedInRender } from './HookMain';
|
|
||||||
|
|
||||||
// 构造新的Update数组
|
// 构造新的Update数组
|
||||||
function insertUpdate<S, A>(action: A, hook: Hook<S, A>): Update<S, A> {
|
function insertUpdate<S, A>(action: A, hook: Hook<S, A>): Update<S, A> {
|
||||||
|
|
Loading…
Reference in New Issue