Skip to content

Commit bb1cedd

Browse files
BetaSuBetaSu
committed
Merge branch 'resource'
2 parents f45fdff + 5745b07 commit bb1cedd

27 files changed

+862
-58
lines changed

‎demos/performance/Context.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { useState, useContext, createContext, memo } from 'react';
2+
3+
const ctx = createContext(0);
4+
5+
export default function App() {
6+
const [num, update] = useState(0);
7+
console.log('App render ', num);
8+
return (
9+
<ctx.Provider value={num}>
10+
<div
11+
onClick={() => {
12+
update(1);
13+
}}
14+
>
15+
<Cpn />
16+
</div>
17+
</ctx.Provider>
18+
);
19+
}
20+
21+
const Cpn = memo(function () {
22+
console.log('Cpn render');
23+
return (
24+
<div>
25+
<Child />
26+
</div>
27+
);
28+
});
29+
30+
function Child() {
31+
console.log('Child render');
32+
const val = useContext(ctx);
33+
34+
return <div>ctx: {val}</div>;
35+
}

‎demos/performance/Hook.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { useState, memo, useCallback } from 'react';
2+
3+
export default function App() {
4+
const [num, update] = useState(0);
5+
console.log('App render ', num);
6+
7+
const addOne = useCallback(() => update((num) => num + 1), []);
8+
9+
return (
10+
<div>
11+
<Cpn onClick={addOne} />
12+
{num}
13+
</div>
14+
);
15+
}
16+
17+
const Cpn = memo(function ({ onClick }) {
18+
console.log('Cpn render');
19+
return (
20+
<div onClick={() => onClick()}>
21+
<Child />
22+
</div>
23+
);
24+
});
25+
26+
function Child() {
27+
console.log('Child render');
28+
return <p>i am child</p>;
29+
}

‎demos/performance/Principle_demo1.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { useState, useContext, createContext, memo } from 'react';
2+
3+
export default function App() {
4+
const [num, update] = useState(0);
5+
console.log('App render ', num);
6+
7+
return (
8+
<div>
9+
<button onClick={() => update(num + 1)}>+ 1</button>
10+
<p>num is: {num}</p>
11+
<ExpensiveSubtree />
12+
</div>
13+
);
14+
}
15+
16+
function ExpensiveSubtree() {
17+
console.log('ExpensiveSubtree render');
18+
return <p>i am child</p>;
19+
}

‎demos/performance/Principle_demo2.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { useState, useContext, createContext, memo } from 'react';
2+
3+
export default function App() {
4+
const [num, update] = useState(0);
5+
console.log('App render ', num);
6+
7+
return (
8+
<div onClick={() => update(num + 100)}>
9+
<button
10+
onClick={(e) => {
11+
e.stopPropagation();
12+
update(num + 1);
13+
}}
14+
>
15+
+ 1
16+
</button>
17+
<p>num is: {num}</p>
18+
<ExpensiveSubtree />
19+
</div>
20+
);
21+
}
22+
23+
function ExpensiveSubtree() {
24+
console.log('ExpensiveSubtree render');
25+
return <p>i am child</p>;
26+
}

‎demos/performance/Simple.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { useState } from 'react';
2+
3+
export default function App() {
4+
const [num, update] = useState(0);
5+
console.log('App render ', num);
6+
return (
7+
<div
8+
onClick={() => {
9+
update(1);
10+
}}
11+
>
12+
<Cpn />
13+
</div>
14+
);
15+
}
16+
17+
function Cpn() {
18+
console.log('cpn render');
19+
return <div>cpn</div>;
20+
}

‎demos/performance/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>性能优化demo</title>
9+
</head>
10+
11+
<body>
12+
<div id="root"></div>
13+
<script type="module" src="main.tsx"></script>
14+
</body>
15+
16+
</html>

‎demos/performance/main.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { useState } from 'react';
2+
import ReactDOM from 'react-dom/client';
3+
4+
// import App from './Simple';
5+
import App from './Context';
6+
// import App from './Hook';
7+
// import App from './Principle_demo1';
8+
// import App from './Principle_demo2';
9+
// import App from './memo';
10+
// import App from './useMemo';
11+
12+
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

‎demos/performance/memo.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { useState, memo } from 'react';
2+
3+
export default function App() {
4+
const [num, update] = useState(0);
5+
console.log('App render ', num);
6+
return (
7+
<div onClick={() => update(num + 1)}>
8+
<Cpn num={num} name={'cpn1'} />
9+
<Cpn num={0} name={'cpn2'} />
10+
</div>
11+
);
12+
}
13+
14+
const Cpn = memo(function ({ num, name }) {
15+
console.log('render ', name);
16+
return (
17+
<div>
18+
{name}: {num}
19+
<Child />
20+
</div>
21+
);
22+
});
23+
24+
function Child() {
25+
console.log('Child render');
26+
return <p>i am child</p>;
27+
}

‎demos/performance/useMemo.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { useState, useContext, createContext, useMemo } from 'react';
2+
3+
// 方式1：App提取 bailout四要素
4+
// 方式2：ExpensiveSubtree用memo包裹
5+
export default function App() {
6+
const [num, update] = useState(0);
7+
console.log('App render ', num);
8+
9+
const Cpn = useMemo(() => <ExpensiveSubtree />, []);
10+
11+
return (
12+
<div onClick={() => update(num + 100)}>
13+
<p>num is: {num}</p>
14+
{Cpn}
15+
</div>
16+
);
17+
}
18+
19+
function ExpensiveSubtree() {
20+
console.log('ExpensiveSubtree render');
21+
return <p>i am child</p>;
22+
}

‎demos/performance/vite-env.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"main": "index.js",
66
"scripts": {
77
"build:dev": "rm -rf dist && rollup --config scripts/rollup/dev.config.js",
8-
"demo": "vite serve demos/suspense-use --config scripts/vite/vite.config.js --force",
8+
"demo": "vite serve demos/performance --config scripts/vite/vite.config.js --force",
99
"lint": "eslint --ext .ts,.jsx,.tsx --fix --quiet ./packages",
1010
"test": "jest --config scripts/jest/jest.config.js"
1111
},

0 commit comments

Comments
 (0)