Ranye的博客

希望的是：服务端第一次只把渲染好的 HTML 发给客户端，这样客户端就能直接显示出来网页的样式，首次绘制（First Paint）就很快然后，客户端再根据 HTML 需要的 js 向服务端请求 js，然后客户端再把 js 装到已经绘制好的 HTML 上所谓服务端渲染，就发生在把 HTML 发给客户端之前，服务端先实时将 JSP、PHP 等渲染成 HTML 再发给客户端。

可以认为每次 Render 的内容都会形成一个快照并保留下来，因此当状态变更而 Rerender 时，就形成了 N 个 Render 状态，而每个 Render 状态都拥有自己固定不变的 Props 与 State。其中的 count 并非变量、更不是事件监听器之类的东西。每次 setState 的时候，react 直接重新渲染 DOM 树，渲染的时候给 count 赋一个常量的值。同样的，props 也是在 render 的时候生成一个新的 const。

之前 React 每次更新虚拟 DOM，要执行一次 DIFF 算法，DIFF 算法很耗费时间，还不能打断这个问题的解决可以求助于第二种方式，React 里有 Suspense + lazy 可以之间用。本文主要讲述第一种。React 由于是虚拟 DOM，可以决定 DOM 更新的条件和方式。的方式，使得 Dom 操作的优先级低于浏览器原生行为参考：https://juejin.cn/post/6995744573989322789...

大多情况下，setState 是异步的，因此可以进行多次更新的合并解决的办法有：给 setState 传入一个函数而非对象。会自动将状态更新操作添加到队列中，等前面的更新完毕后传入更新的状态值然而，有些情况下 setState 是同步的React 批量更新原理类似于 setTimeout 和 promise 这样的 async work ，就不会触发批量更新这些要进入 EventLoop 队列的都会被认为是 async work。关于任务队列（EventLoop）和 async work

引言React 使用的是 Virtual DOM，使得元素脱离了文档流，将 DOM 的比对转化为 JS 的比对。这种比对用到了虚拟 DOM 的 diff 算法背景知识重排（回流 Reflow）与重绘（Repaint）重排（回流）是一整个浏览器变化的情况，需要重建 DOM 树这种过程一般发生在：首次渲染窗口大小改变部分元素大小位置变化字体大小变化增删可见 DOM 元素激活 CSS 伪类总的来说，要么是浏览器本身发生了大小变化，要么是其中的 DOM 元素大小变化影响到其他 DOM 元