From 33df52a5011f8d4069e5c299e9a93f37d1656571 Mon Sep 17 00:00:00 2001
From: xiejie <745007854@qq.com>
Date: Mon, 27 Mar 2023 13:09:49 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E8=AF=BE=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../2-24. Update/{ => 课件资料}/Update.md     |  0
 .../02. 第二章/2-24. Update/课堂代码/App.js   | 68 +++++++++++++++++++
 2 files changed, 68 insertions(+)
 rename 就业篇/02. 第二章/2-24. Update/{ => 课件资料}/Update.md (100%)
 create mode 100644 就业篇/02. 第二章/2-24. Update/课堂代码/App.js

diff --git a/就业篇/02. 第二章/2-24. Update/Update.md b/就业篇/02. 第二章/2-24. Update/课件资料/Update.md
similarity index 100%
rename from 就业篇/02. 第二章/2-24. Update/Update.md
rename to 就业篇/02. 第二章/2-24. Update/课件资料/Update.md
diff --git a/就业篇/02. 第二章/2-24. Update/课堂代码/App.js b/就业篇/02. 第二章/2-24. Update/课堂代码/App.js
new file mode 100644
index 0000000..e4e3d0d
--- /dev/null
+++ b/就业篇/02. 第二章/2-24. Update/课堂代码/App.js	
@@ -0,0 +1,68 @@
+// 示例一
+
+// 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;