更新课件

就业篇/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;