// 示例一

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