更新课件

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

@@ -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;