69 lines
1.3 KiB
JavaScript
69 lines
1.3 KiB
JavaScript
// 示例一
|
|
|
|
// 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;
|