React Typescript Cheetsheet JSX.Element vs React.ReactNode jsx.element -> React.createElement 的返回值 React.ReactNode -> 组件返回值的集合 interface or type? 使用 Interface 直到你需要 Type 在编写库或第...

在运行时清理代码是构建高效、可预测应用程序的必不可少的部分。在 JavaScript 中，合理管理事件监听器，在不再需要监听事件的时候将它们移除是必要的。 用下面代码进行实验 ： <button id="button">Do Something</button> <script> document.getElementById('button').a...

原文：Inside look at modern web browser Part 1 Chrome 的多进程架构图，多个渲染进程的卡片（render process）是用来表明 Chrome 会为每一个 tab 创建一个渲染进程。 Chrome 浏览器会有一个浏览器进程（browser process），这个进程会和其他进程一起协作来实现浏览器的功能。对于渲染进程（rendere...

原文：Inside look at modern web browser Part 1 Chrome 的多进程架构图，多个渲染进程的卡片（render process）是用来表明 Chrome 会为每一个 tab 创建一个渲染进程。 Chrome 浏览器会有一个浏览器进程（browser process），这个进程会和其他进程一起协作来实现浏览器的功能。对于渲染进程（rendere...

对于项目中大量数据通常存在两种情况： 第一种就是数据可视化，比如像热力图，地图，大量的数据点位的情况。 第二种情况是长列表渲染。 1.时间分片 不使用分片 .circle { position: absolute; width: 10px; height: 10px; border-radius: 50%; } .box { width: 100vm...

useState 返回一个 state，和一个更新 state 的函数 函数式更新 如果新的 state 需要通过先前的 state 计算得出，可以传递一个函数给 setState，如下： setState((prev) => { return prev + 1; }); 惰性初始 state 如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计...

高阶组件可以做什么？ 增强回调和生命周期 增强回调 type Base = { onClick: () => void }; export const withLoggingOnClickWithProps = <TProps extends Base>(Component: ComponentType<TProps>) => { // ...

什么是key属性以及为什么React需要它？ 如果存在“key”属性，React 使用它作为在重新渲染期间在其兄弟姐妹中识别相同类型元素的一种方式，也就是说，仅在重新渲染期间和相同类型的相邻元素才需要它。 const Item = ({ country }) => { return ( <button className="country-item"> ...

如果仅仅是用一个变量来保存tiner的ID，会导致无法清除timerID如下： const TimerCount = () => { let [count,setCount] = useState(0) let timer const handleStart =() => { timer = setInterval(() => { setC...

children as a render function const MovingComponent = ({ children }) => { ... return ( <div ...// callbacks same as before > // children as render function with some d...