很早已写作了印刷版的《React控制技术详解》，而后听闻出了日文版，主动出击就付款了
因此那时撷取下前段时间的写作心得体会
基本概念
简述
后端架构主要就的促进作用是将统计数据的发生变动态射为UI的发生变动：
UI=fn(state)
fn是计算统计数据的发生变动引致UI是怎样发生变动的，相同的架构中，fn的叙述形式相同
非主流的叙述形式分成：
jsx：使UI和方法论更密切，它是ES句法糖.（从方法论起程，扩充方法论，叙述UI）模版句法：采用HTML叙述UI，它是HTML句法扩充。（从UI起程，扩充UI，叙述方法论）jsx是静态的，即便标识符没边，每天预览，单厢再次校对，
模版句法是静态的，能用以预测，什么样结点是静态的，什么样结点是静态的。有非常大的强化内部空间。
无论是jsx却是模版句法，它都是组织机构方法论和UI的亲密关系
// reactconst [count, setCount] = useState(0)
<div onClick={() => setCount(conut++)}>{count}</div>
// Vueconst count = ref(0)
<div @click={count.value++}>{count.value}</div>
// Svelteconst let = 0<div on:click={() => conut++}>{count}</div>
上面三块标识符功能都是一样的：当count发生发生变动时，UI跟着发生变动
根据UI发生变动形式（预览细粒度）相同，将架构能分成三类：
应用级：统计数据发生变动时，再次渲染整个应用，React组件级：统计数据发生变动时，再次渲染统计数据有发生变动的组件Vue元素级：统计数据发生变动时，只渲染统计数据发生变动的DOM结点，Svelte按下性能问题暂且不表，先想想，为啥会有这种差别呢？
这是因为相同的架构，架构相同引致的。
我们的标识符并不是立即执行的，而是先进行校对（句法转换、将ts转为js、压缩、polyfill等），将我们的标识符转为宿主环境能识别的标识符。
React
React经过校对之后返回的是createElement函数，因此每天统计数据发生变动，React单厢从应用根结点再次加载整个应用。
因此这种框被架称为应用级架构
Vue
Vue经过校对之后返回的是组件的render函数，
Vue3会为每个组件建立watchEffect事件，这个大致如下：
watchEffect(() =>render(), [conut])
在页面首次进入或者watchEffect的依赖项发生发生变动时，单厢调用组件的render函数。
render函数的返回值是本次预览的VNode，Vue会根据本次预览的VNode与上传预览做比较（patch），找到最优的预览路径，并且进行预览。
因此这种架构被称为组件级架构
Svelte
Svelte经过校对之后的返回值如下：（先别晕，能跳过标识符往下看）
import{
SvelteComponent,
append,
detach,
element,
init,
insert,
listen,
noop,
safe_not_equal,
set_data,
text
} from “svelte/internal”;
function create_fragment(ctx){
letdiv;
lett;
letmounted;
return{
c() {
div = element(“div”);
t = text(/*count*/ ctx[0]);
},
m(target, anchor) {
insert(target, div, anchor);
append(div, t);
if(!mounted) {
dispose = listen(div, “click”, /*click_handler*/ ctx[1]);
mounted = true;
}
},
p(ctx, [dirty]) {
if (dirty & /*count*/ 1) set_data(t, /*count*/ ctx[0]);
},
d(detaching) {
if(detaching) detach(div);
mounted = false;
dispose();
}
};
}
function instance($$self, $$props, $$invalidate){
let count = 0;
const click_handler = () => $$invalidate(0, count++, count);
return[count, click_handler];
}
class App extends SvelteComponent{
constructor(options) {
super();
init(this, options, instance, create_fragment, safe_not_equal, {});
}
}
export defaultApp;
Svelte返回的值主要就包括三块：
1.create_fragment函数：c方法：create元素div的操作。m方法：mounted时执行将创建的div插入，并且监听div的click事件.d方法：delete元素div的操作。p方法：updata统计数据的操作。2.instance函数：声明在模版采用的变量，以及变量发生变动时的回调函数，并且返回它（其实是ctx上下文）。
3.继承SvelteComponent的组件，并且执行init方法init方法的大致方法论是：当数据发生变动，触发mounted阶段监听事件的回调函数，这个回调函数是instance函数返回值里的click_handler，即ctx[1]
如果仅仅声明了但是没在模版中采用，那么就会作为第四块，单独声明，但这里就不做赘述了。
从前面的标识符能看出：Svelte在校对阶段，就已经找到元素和变量之间的对应亲密关系了。
因此这种框被架称为元素级架构
React性能
你肯定会问，我就改了个count的值，像React这样大动干戈，再次渲染整个应用，是不是很低效啊。
其实，React在运行时阶段，做了一部分关键的强化。
无论是Vue却是React，在校对之后返回的都是VNode。
双缓存机制
一方面，React在拿到校对之后的VNode，首先会在内存中和上次预览的VNode进行对比，找到具体预览的VNode并且在内存中预览，上次没预览时(mount)，在内存中全部预览。
然后将VNode渲染在真实Dom里，同时保留内存中的VNode，以方便下次预览时对比。
这个机制叫做双缓存机制
另一方面，React被再次设计为能中断的预览UI，这么做的好处是能避免因为高复杂度的预览因为耗时长采用户感知到页面的卡顿。
Firbe架构
这种可中断的预览架构是Firbe架构。
能中断的预览原理是：如果浏览器排序和渲染的时间超过人眼能感知卡顿的最短时间16.6ms，那就中断它，把时间让给下一个预览任务。等时间充裕的时候再再次预览。
其他的手段
React还将一些强化的任务交给了开发者，比如，前面说过，jsx是静态的，如果你的组件全是不会发生变动的，那么你能采用React.meno()包裹你的组件，明确这是个静态的，以此来较少无用的预览。还有useState 、useMemo、useCallback等。
