feat: performance

Author: BetaSu

demos/performance/Context.tsx

@@ -1,4 +1,4 @@
-import { useState, useContext, createContext } from 'react';
+import { useState, useContext, createContext, memo } from 'react';
 
 const ctx = createContext(0);
 
@@ -18,14 +18,14 @@ export default function App() {
 	);
 }
 
-function Cpn() {
+const Cpn = memo(function () {
 	console.log('Cpn render');
 	return (
 		<div>
 			<Child />
 		</div>
 	);
-}
+});
 
 function Child() {
 	console.log('Child render');

demos/performance/Hook.tsx

@@ -1,12 +1,10 @@
-import { useState, useContext, createContext, memo } from 'react';
-
-const ctx = createContext(0);
+import { useState, memo, useCallback } from 'react';
 
 export default function App() {
 	const [num, update] = useState(0);
 	console.log('App render ', num);
 
-	const addOne = () => update((num) => num + 1);
+	const addOne = useCallback(() => update((num) => num + 1), []);
 
 	return (
 		<div>

demos/performance/Principle_demo1.tsx

@@ -8,12 +8,12 @@ export default function App() {
 		<div>
 			<button onClick={() => update(num + 1)}>+ 1</button>
 			<p>num is: {num}</p>
-			<ExpensiveChild />
+			<ExpensiveSubtree />
 		</div>
 	);
 }
 
-function ExpensiveChild() {
-	console.log('ExpensiveChild render');
+function ExpensiveSubtree() {
+	console.log('ExpensiveSubtree render');
 	return <p>i am child</p>;
 }

demos/performance/Principle_demo2.tsx

@@ -15,12 +15,12 @@ export default function App() {
 				+ 1
 			</button>
 			<p>num is: {num}</p>
-			<ExpensiveChild />
+			<ExpensiveSubtree />
 		</div>
 	);
 }
 
-function ExpensiveChild() {
-	console.log('ExpensiveChild render');
+function ExpensiveSubtree() {
+	console.log('ExpensiveSubtree render');
 	return <p>i am child</p>;
 }

demos/performance/main.tsx

@@ -2,11 +2,11 @@ import { useState } from 'react';
 import ReactDOM from 'react-dom/client';
 
 // import App from './Simple';
-// import App from './Context';
-// import App from './BailoutBoundary';
+import App from './Context';
 // import App from './Hook';
 // import App from './Principle_demo1';
 // import App from './Principle_demo2';
-import App from './Principle_demo3';
+// import App from './memo';
+// import App from './useMemo';
 
 ReactDOM.createRoot(document.getElementById('root')).render(<App />);

demos/performance/BailoutBoundary.tsx demos/performance/memo.tsxdemos/performance/BailoutBoundary.tsx renamed to demos/performance/memo.tsx

@@ -1,6 +1,4 @@
-import { useState, useContext, createContext } from 'react';
-
-const ctx = createContext(0);
+import { useState, memo } from 'react';
 
 export default function App() {
 	const [num, update] = useState(0);
@@ -13,15 +11,15 @@ export default function App() {
 	);
 }
 
-function Cpn({ num, name }) {
+const Cpn = memo(function ({ num, name }) {
 	console.log('render ', name);
 	return (
 		<div>
 			{name}: {num}
 			<Child />
 		</div>
 	);
-}
+});
 
 function Child() {
 	console.log('Child render');

demos/performance/Principle_demo3.tsx demos/performance/useMemo.tsxdemos/performance/Principle_demo3.tsx renamed to demos/performance/useMemo.tsx

@@ -1,18 +1,22 @@
 import { useState, useContext, createContext, useMemo } from 'react';
 
+// 方式1：App提取 bailout四要素
+// 方式2：ExpensiveSubtree用memo包裹
 export default function App() {
 	const [num, update] = useState(0);
 	console.log('App render ', num);
 
+	const Cpn = useMemo(() => <ExpensiveSubtree />, []);
+
 	return (
 		<div onClick={() => update(num + 100)}>
 			<p>num is: {num}</p>
-			<ExpensiveChild />
+			{Cpn}
 		</div>
 	);
 }
 
-function ExpensiveChild() {
-	console.log('ExpensiveChild render');
+function ExpensiveSubtree() {
+	console.log('ExpensiveSubtree render');
 	return <p>i am child</p>;
 }

packages/react-reconciler/src/beginWork.ts

@@ -7,8 +7,8 @@ import {
 	createFiberFromOffscreen,
 	OffscreenProps
 } from './fiber';
-import { renderWithHooks } from './fiberHooks';
-import { Lane } from './fiberLanes';
+import { bailoutHook, renderWithHooks } from './fiberHooks';
+import { Lane, NoLanes, includeSomeLanes } from './fiberLanes';
 import { processUpdateQueue, UpdateQueue } from './updateQueue';
 import {
 	ContextProvider,
@@ -17,6 +17,7 @@ import {
 	HostComponent,
 	HostRoot,
 	HostText,
+	MemoComponent,
 	OffscreenComponent,
 	SuspenseComponent
 } from './workTags';
@@ -27,11 +28,63 @@ import {
 	Placement,
 	ChildDeletion
 } from './fiberFlags';
-import { pushProvider } from './fiberContext';
+import {
+	prepareToReadContext,
+	propagateContextChange,
+	pushProvider
+} from './fiberContext';
 import { pushSuspenseHandler } from './suspenseContext';
+import { cloneChildFibers } from './childFibers';
+import { shallowEqual } from 'shared/shallowEquals';
+
+// 是否能命中bailout
+let didReceiveUpdate = false;
+
+export function markWipReceivedUpdate() {
+	didReceiveUpdate = true;
+}
 
 // 递归中的递阶段
 export const beginWork = (wip: FiberNode, renderLane: Lane) => {
+	// bailout策略
+	didReceiveUpdate = false;
+	const current = wip.alternate;
+
+	if (current !== null) {
+		const oldProps = current.memoizedProps;
+		const newProps = wip.pendingProps;
+		// 四要素～ props type
+		// {num: 0, name: 'cpn2'}
+		// {num: 0, name: 'cpn2'}
+		if (oldProps !== newProps || current.type !== wip.type) {
+			didReceiveUpdate = true;
+		} else {
+			// state context
+			const hasScheduledStateOrContext = checkScheduledUpdateOrContext(
+				current,
+				renderLane
+			);
+			if (!hasScheduledStateOrContext) {
+				// 四要素～ state context
+				// 命中bailout
+				didReceiveUpdate = false;
+
+				switch (wip.tag) {
+					case ContextProvider:
+						const newValue = wip.memoizedProps.value;
+						const context = wip.type._context;
+						pushProvider(context, newValue);
+						break;
+					// TODO Suspense
+				}
+
+				return bailouOnAlreadyFinishedWork(wip, renderLane);
+			}
+		}
+	}
+
+	wip.lanes = NoLanes;
+
 	// 比较，返回子fiberNode
 	switch (wip.tag) {
 		case HostRoot:
@@ -41,15 +94,17 @@ export const beginWork = (wip: FiberNode, renderLane: Lane) => {
 		case HostText:
 			return null;
 		case FunctionComponent:
-			return updateFunctionComponent(wip, renderLane);
+			return updateFunctionComponent(wip, wip.type, renderLane);
 		case Fragment:
 			return updateFragment(wip);
 		case ContextProvider:
-			return updateContextProvider(wip);
+			return updateContextProvider(wip, renderLane);
 		case SuspenseComponent:
 			return updateSuspenseComponent(wip);
 		case OffscreenComponent:
 			return updateOffscreenComponent(wip);
+		case MemoComponent:
+			return updateMemoComponent(wip, renderLane);
 		default:
 			if (__DEV__) {
 				console.warn('beginWork未实现的类型');
@@ -59,12 +114,80 @@ export const beginWork = (wip: FiberNode, renderLane: Lane) => {
 	return null;
 };
 
-function updateContextProvider(wip: FiberNode) {
+function updateMemoComponent(wip: FiberNode, renderLane: Lane) {
+	// bailout四要素
+	// props浅比较
+	const current = wip.alternate;
+	const nextProps = wip.pendingProps;
+	const Component = wip.type.type;
+
+	if (current !== null) {
+		const prevProps = current.memoizedProps;
+
+		// 浅比较props
+		if (shallowEqual(prevProps, nextProps) && current.ref === wip.ref) {
+			didReceiveUpdate = false;
+			wip.pendingProps = prevProps;
+
+			// state context
+			if (!checkScheduledUpdateOrContext(current, renderLane)) {
+				// 满足四要素
+				wip.lanes = current.lanes;
+				return bailouOnAlreadyFinishedWork(wip, renderLane);
+			}
+		}
+	}
+	return updateFunctionComponent(wip, Component, renderLane);
+}
+
+function bailouOnAlreadyFinishedWork(wip: FiberNode, renderLane: Lane) {
+	if (!includeSomeLanes(wip.childLanes, renderLane)) {
+		if (__DEV__) {
+			console.warn('bailout整棵子树', wip);
+		}
+		return null;
+	}
+
+	if (__DEV__) {
+		console.warn('bailout一个fiber', wip);
+	}
+	cloneChildFibers(wip);
+	return wip.child;
+}
+
+function checkScheduledUpdateOrContext(
+	current: FiberNode,
+	renderLane: Lane
+): boolean {
+	const updateLanes = current.lanes;
+
+	if (includeSomeLanes(updateLanes, renderLane)) {
+		return true;
+	}
+	return false;
+}
+
+function updateContextProvider(wip: FiberNode, renderLane: Lane) {
 	const providerType = wip.type;
 	const context = providerType._context;
 	const newProps = wip.pendingProps;
+	const oldProps = wip.memoizedProps;
+	const newValue = newProps.value;
+
+	pushProvider(context, newValue);
+
+	if (oldProps !== null) {
+		const oldValue = oldProps.value;
 
-	pushProvider(context, newProps.value);
+		if (
+			Object.is(oldValue, newValue) &&
+			oldProps.children === newProps.children
+		) {
+			return bailouOnAlreadyFinishedWork(wip, renderLane);
+		} else {
+			propagateContextChange(wip, context, renderLane);
+		}
+	}
 
 	const nextChildren = newProps.children;
 	reconcileChildren(wip, nextChildren);
@@ -77,8 +200,21 @@ function updateFragment(wip: FiberNode) {
 	return wip.child;
 }
 
-function updateFunctionComponent(wip: FiberNode, renderLane: Lane) {
-	const nextChildren = renderWithHooks(wip, renderLane);
+function updateFunctionComponent(
+	wip: FiberNode,
+	Component: FiberNode['type'],
+	renderLane: Lane
+) {
+	prepareToReadContext(wip, renderLane);
+	// render
+	const nextChildren = renderWithHooks(wip, Component, renderLane);
+
+	const current = wip.alternate;
+	if (current !== null && !didReceiveUpdate) {
+		bailoutHook(wip, renderLane);
+		return bailouOnAlreadyFinishedWork(wip, renderLane);
+	}
+
 	reconcileChildren(wip, nextChildren);
 	return wip.child;
 }
@@ -88,16 +224,24 @@ function updateHostRoot(wip: FiberNode, renderLane: Lane) {
 	const updateQueue = wip.updateQueue as UpdateQueue<Element>;
 	const pending = updateQueue.shared.pending;
 	updateQueue.shared.pending = null;
+
+	const prevChildren = wip.memoizedState;
+
 	const { memoizedState } = processUpdateQueue(baseState, pending, renderLane);
 	wip.memoizedState = memoizedState;
 
 	const current = wip.alternate;
 	// 考虑RootDidNotComplete的情况，需要复用memoizedState
 	if (current !== null) {
-		current.memoizedState = memoizedState;
+		if (!current.memoizedState) {
+			current.memoizedState = memoizedState;
+		}
 	}
 
 	const nextChildren = wip.memoizedState;
+	if (prevChildren === nextChildren) {
+		return bailouOnAlreadyFinishedWork(wip, renderLane);
+	}
 	reconcileChildren(wip, nextChildren);
 	return wip.child;
 }

packages/react-reconciler/src/childFibers.ts

@@ -333,3 +333,23 @@ function updateFragment(
 
 export const reconcileChildFibers = ChildReconciler(true);
 export const mountChildFibers = ChildReconciler(false);
+
+export function cloneChildFibers(wip: FiberNode) {
+	// child  sibling
+	if (wip.child === null) {
+		return;
+	}
+	let currentChild = wip.child;
+	let newChild = createWorkInProgress(currentChild, currentChild.pendingProps);
+	wip.child = newChild;
+	newChild.return = wip;
+
+	while (currentChild.sibling !== null) {
+		currentChild = currentChild.sibling;
+		newChild = newChild.sibling = createWorkInProgress(
+			newChild,
+			newChild.pendingProps
+		);
+		newChild.return = wip;
+	}
+}