grtsinry43/frontend-new-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新课件

Browse Source
This commit is contained in:
xiejie 2023-03-27 13:16:26 +08:00
parent 33df52a501
commit 1e4dcee79a
2 changed files with 0 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
就业篇/02. 第二章/2-24. Update/课件资料/Update.md → 就业篇/02. 第二章/2-24. Update/Update.md
View File

68
就业篇/02. 第二章/2-24. Update/课堂代码/App.js
View File

@ -1,68 +0,0 @@
// 示例一
// import React, { useState } from "react";
// // 该组件的渲染是非常耗时的
// function ExpensiveCom() {
// const now = performance.now();
// while (performance.now() - now < 200) {}
// return <p>耗时的组件</p>;
// }
// function Input() {
// // 维护了一组数据
// const [num, updateNum] = useState(0);
// return (
// <>
// <input value={num} onChange={(e) => updateNum(e.target.value)} />
// <p>num is {num}</p>
// </>
// );
// }
// function App() {
// return (
// <>
// <Input/>
// <ExpensiveCom />
// </>
// );
// }
// export default App;
// 示例二
import React, { useState } from "react";
function ExpensiveCom() {
const now = performance.now();
while (performance.now() - now < 200) {}
return <p>耗时的组件</p>;
}
function Counter({ children }) {
const [num, updateNum] = useState(0);
return (
<div title={num}>
<input value={num} onChange={(e) => updateNum(e.target.value)} />
<p>num is {num}</p>
{children}
</div>
);
}
function App() {
// 在这个示例中，数据重新又在 App 组件中进行维护了
// 而且还不像上面的例子那样可以分离出去
// const [num, updateNum] = useState(0);
return (
<Counter>
<ExpensiveCom />
</Counter>
);
}
export default App;