Merge branch 'resource'

BetaSu · Aug 16, 2023 · bb1cedd · bb1cedd
2 parents f45fdff + 5745b07
commit bb1cedd
Show file tree

Hide file tree

Showing 27 changed files with 862 additions and 58 deletions.
diff --git a/demos/performance/Context.tsx b/demos/performance/Context.tsx
@@ -0,0 +1,35 @@
+import { useState, useContext, createContext, memo } from 'react';
+
+const ctx = createContext(0);
+
+export default function App() {
+	const [num, update] = useState(0);
+	console.log('App render ', num);
+	return (
+		<ctx.Provider value={num}>
+			<div
+				onClick={() => {
+					update(1);
+				}}
+			>
+				<Cpn />
+			</div>
+		</ctx.Provider>
+	);
+}
+
+const Cpn = memo(function () {
+	console.log('Cpn render');
+	return (
+		<div>
+			<Child />
+		</div>
+	);
+});
+
+function Child() {
+	console.log('Child render');
+	const val = useContext(ctx);
+
+	return <div>ctx: {val}</div>;
+}
diff --git a/demos/performance/Hook.tsx b/demos/performance/Hook.tsx
@@ -0,0 +1,29 @@
+import { useState, memo, useCallback } from 'react';
+
+export default function App() {
+	const [num, update] = useState(0);
+	console.log('App render ', num);
+
+	const addOne = useCallback(() => update((num) => num + 1), []);
+
+	return (
+		<div>
+			<Cpn onClick={addOne} />
+			{num}
+		</div>
+	);
+}
+
+const Cpn = memo(function ({ onClick }) {
+	console.log('Cpn render');
+	return (
+		<div onClick={() => onClick()}>
+			<Child />
+		</div>
+	);
+});
+
+function Child() {
+	console.log('Child render');
+	return <p>i am child</p>;
+}
diff --git a/demos/performance/Principle_demo1.tsx b/demos/performance/Principle_demo1.tsx
@@ -0,0 +1,19 @@
+import { useState, useContext, createContext, memo } from 'react';
+
+export default function App() {
+	const [num, update] = useState(0);
+	console.log('App render ', num);
+
+	return (
+		<div>
+			<button onClick={() => update(num + 1)}>+ 1</button>
+			<p>num is: {num}</p>
+			<ExpensiveSubtree />
+		</div>
+	);
+}
+
+function ExpensiveSubtree() {
+	console.log('ExpensiveSubtree render');
+	return <p>i am child</p>;
+}
diff --git a/demos/performance/Principle_demo2.tsx b/demos/performance/Principle_demo2.tsx
@@ -0,0 +1,26 @@
+import { useState, useContext, createContext, memo } from 'react';
+
+export default function App() {
+	const [num, update] = useState(0);
+	console.log('App render ', num);
+
+	return (
+		<div onClick={() => update(num + 100)}>
+			<button
+				onClick={(e) => {
+					e.stopPropagation();
+					update(num + 1);
+				}}
+			>
+				+ 1
+			</button>
+			<p>num is: {num}</p>
+			<ExpensiveSubtree />
+		</div>
+	);
+}
+
+function ExpensiveSubtree() {
+	console.log('ExpensiveSubtree render');
+	return <p>i am child</p>;
+}
diff --git a/demos/performance/Simple.tsx b/demos/performance/Simple.tsx
@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+export default function App() {
+	const [num, update] = useState(0);
+	console.log('App render ', num);
+	return (
+		<div
+			onClick={() => {
+				update(1);
+			}}
+		>
+			<Cpn />
+		</div>
+	);
+}
+
+function Cpn() {
+	console.log('cpn render');
+	return <div>cpn</div>;
+}
diff --git a/demos/performance/index.html b/demos/performance/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>性能优化demo</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="main.tsx"></script>
+</body>
+
+</html>
diff --git a/demos/performance/main.tsx b/demos/performance/main.tsx
@@ -0,0 +1,12 @@
+import { useState } from 'react';
+import ReactDOM from 'react-dom/client';
+
+// import App from './Simple';
+import App from './Context';
+// import App from './Hook';
+// import App from './Principle_demo1';
+// import App from './Principle_demo2';
+// import App from './memo';
+// import App from './useMemo';
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);
diff --git a/demos/performance/memo.tsx b/demos/performance/memo.tsx
@@ -0,0 +1,27 @@
+import { useState, memo } from 'react';
+
+export default function App() {
+	const [num, update] = useState(0);
+	console.log('App render ', num);
+	return (
+		<div onClick={() => update(num + 1)}>
+			<Cpn num={num} name={'cpn1'} />
+			<Cpn num={0} name={'cpn2'} />
+		</div>
+	);
+}
+
+const Cpn = memo(function ({ num, name }) {
+	console.log('render ', name);
+	return (
+		<div>
+			{name}: {num}
+			<Child />
+		</div>
+	);
+});
+
+function Child() {
+	console.log('Child render');
+	return <p>i am child</p>;
+}
diff --git a/demos/performance/useMemo.tsx b/demos/performance/useMemo.tsx
@@ -0,0 +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>
+			{Cpn}
+		</div>
+	);
+}
+
+function ExpensiveSubtree() {
+	console.log('ExpensiveSubtree render');
+	return <p>i am child</p>;
+}
diff --git a/demos/performance/vite-env.d.ts b/demos/performance/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
 	"main": "index.js",
 	"scripts": {
 		"build:dev": "rm -rf dist && rollup --config scripts/rollup/dev.config.js",
-		"demo": "vite serve demos/suspense-use --config scripts/vite/vite.config.js --force",
+		"demo": "vite serve demos/performance --config scripts/vite/vite.config.js --force",
 		"lint": "eslint --ext .ts,.jsx,.tsx --fix --quiet ./packages",
 		"test": "jest --config scripts/jest/jest.config.js"
 	},