(资料图片)

现代框架背后的概念

ES8搜索引擎从基础入门到深度原理，实现综合运用实战

download：https://www.51xuebc.com/thread-533-1-1.html

许多初学者会问“我应该学习哪个框架？”和“在学习框架之前，我需求学几 JS 或 TS？” - 无数意见文章都在宣传作者喜欢的框架或库的优势，而不是向读者展现背后的概念，以便停止明智的决策。那么，让我们先处理第二个问题：“在学习框架之前，我需求学几 JS/TS？”在学习框架之前，你需求控制足够多的根底学问，使你可以了解它们所基于的概念。这些学问包括根本数据类型、函数、根本运算符和文档对象模型 (DOM)。固然除此之外的学问并不会有害，但严厉来说不是控制框架或库所必需的。假如你是完整的新手，可能是你的第一步的好资源。继续行进，直到你感到自信为止。这就是你晓得足够多的 JS/TS 的时分，能够转向框架。其他的东西你能够在过程中学习。你指的是哪些概念？StateEffectsMemoizationTemplating and rendering一切现代框架都从这些概念中取得其功用。State状态只是为应用程序提供动力的数据。 它可能在应用程序的较大局部的全局级别上，也可能是单个组件上。 以简单的计数器为例。 它保存的计数即为状态。 我们能够读取状态并写入它以增加计数。最简单的表示通常是一个变量，其中包含我们的状态所包含的数据：let count = 0;const increment = () => { count++; };const button = document.createElement('button');button.textContent = count;button.addEventListener('click', increment);document.body.appendChild(button);但是，这段代码存在一个问题：对 count 的更改（例如经过 increment 停止的更改）不会更新按钮的文本内容。 我们能够手动更新一切内容，但关于更复杂的用例不太适用。count 可以更新其用户的才能称为响应性。 这是经过订阅并重新运转应用程序的订阅局部来更新而完成的。

简直每种现代的前端框架和库都有一种办法来管理反响性状态。 处理计划有三个局部，至少运用一个或多个局部：可观测值/信号不可变卦新的谐和转换可观测值/信号可观测值根本上是允许经过订阅读者的函数停止读取的构造。 然后在更新时重新运转订阅者：const state = (initialValue) => ({ _value: initialValue, get: function() { /* subscribe */; return this._value; }, set: function(value) { this._value = value; /* re-run subscribers */; }});此概念的第一次运用是在 中，它运用相同的函数，写访问时无参数，读访问时有参数。这种形式目前正在以信号的方式复兴，例如在 Solid.js 和中，但 Vue 和 Svelte 也运用了相同的形式。RxJS 是这个准绳在简单状态之外的延伸，但能够说它模仿复杂性的才能是针对你的脚的一整套枪。 Solid.js 还提供了这些信号的进一步笼统，即存储（能够经过 setter 操作的对象）和可变对象（能够像正常的 JS 对象一样运用的对象或 Vue 中的状态来处置嵌套状态对象）。不可变卦新的谐和不可变意味着，假如对象的属性发作更改，则必需更改整个对象援用，因而能够轻松检测能否存在更改（这就是谐和器所做的），只需简单比拟援用。const state1 = { todos: [{ text: 'understand immutability', complete: false }], currentText: ''};// updating the current text:const state2 = { todos: state1.todos, currentText: 'understand reconciliation'};// adding a to-do:const state3 = { todos: [ state.todos[0], { text: 'understand reconciliation', complete: true } ], currentText: ''};//这破了不变性：state3.currentText = 'I am not immutable!';如你所见，未更改项的援用被重用。 假如谐和器检测到不同的对象援用，它将运用状态（props，memos，effects，context）再次运转一切组件。 由于读访问是被动的，因而需求手动指定对响应性值的依赖关系。显然，我们不会以这种方式定义状态。 要么从现有属性结构它，要么运用所谓的 reducer。 reducer 是一个将一个状态转换为另一个状态的函数。React 和 preact 运用了这种形式。 它适用于与 vDOM 一同运用，我们将在后面描绘模板时进一步讨论。并非每个框架都运用其 vDOM 使状态完整响应性。 例如， 在组件中设置的事情之后从状态更改中更新； 否则，必需手动触发 m.redraw()。转换转换是一个构建步骤，它重写我们的代码，使其在旧阅读器上运转或使其具有额外的才能；在这种状况下，技术用于将简单变质变为反响系统的一局部。Svelte 基于转换器，该转换器也从看似简单的变量声明和访问中为其反响系统提供动力。顺便提一下，Solid.js 运用转换，但不是用于其状态，只是用于模板。

Effects在大多数状况下，我们需求做更多的事情来处置响应性状态，而不只仅是从中导出并将其渲染到 DOM 中。 我们必需管理反作用，这是一切由于状态更改而发作的事情（虽然一些像 Solid.js 的框架将视图更改视为effects ）。记得第一个来自状态的示例吗，其中订阅处置成心省略了？ 让我们填充这个以在更新时处置effects ：const context = [];const state = (initialValue) => ({ _subscribers: new Set(), _value: initialValue, get: function() { const current = context.at(-1); if (current) { this._subscribers.add(current); } return this._value; }, set: function(value) { if (this._value === value) { return; } this._value = value; this._subscribers.forEach(sub => sub()); }});const effect = (fn) => { const execute = () => { context.push(execute); try { fn(); } finally { context.pop(); } }; execute();};这根本上是对 信号或 中响应态的简化，但没有错误处置和状态变化形式（运用接纳前一个值并返回下一个值的函数），但是很容易添加。这可会使上一个示例变成向应性：const count = state(0);const increment = () => count.set(count.get() + 1);const button = document.createElement('button');effect(() => { button.textContent = count.get();});button.addEventListener('click', increment);document.body.appendChild(button);在大多数状况下，框架允许运用不同的时间来让 effects 在渲染 DOM 之前、期间或之后运转。MemoizationMemoization 指的是缓存从状态中计算出来的值，以便在它来源的状态更改时更新。它根本上是一个 effect，返回一个派生的状态。在像 React 和 Preact 这样重新运转组件函数的框架中，这允许在其依赖的状态不变时再次选择组件的一局部。关于其他框架，状况正好相反：它允许你将组件的局部与响应性更新相关联，同时缓存前一个计算。关于我们简单的响应系统，memo 看起来像这样：const memo = (fn) => { let memoized; effect(() => { if (memoized) { memoized.set(fn()); } else { memoized = state(fn()); } }); return memoized.get;};Templating and rendering既然我们有了纯状态、派生状态弛缓存状态，我们想要向用户显现它。在我们的示例中，我们直接运用 DOM 添加了一个按钮并更新了其文本内容。为了更友好于开发人员，简直一切现代框架都支持一些范畴特定言语来在代码内编写与所需输出相似的内容。虽然有不同的作风，例如 .jsx、.vue 或 .svelte 文件，但这都是在相似于 HTML 的代码中表示 DOM 的东西，因而根本上<div>Hello, World</div>// in your JS// becomes in your HTML:<div>Hello, World</div>你可能会问：“我应该把我的状态放在哪里？”这是个很棒的问题。在大多数状况下，{} 用于表示动态内容，既在属性中也在节点四周。JS 的最常用模板言语扩展无疑是 JSX。关于 React，它被编译成纯 JavaScript，使它可以创立 DOM 的虚拟表示，称为虚拟文档对象模型（virtual document object model，简称 vDOM）的内部视图状态。这是基于这样一个前提：创立对象比访问 DOM 快得多，因而假如你能够用当前值交换后者，就能够俭省时间。但是，假如在任何状况下都有大量 DOM 更改或者为了没有更改而创立无数个对象，这种处理计划的优势很容易变成优势，需求经过缓存来躲避。// original code<div>Hello, {name}</div>// transpiled to jscreateElement("div", null, "Hello, ", name);// executed js{ "$$typeof": Symbol(react.element), "type": "div", "key": null, "ref": null, "props": { "children": "Hello, World" }, "_owner": null}// rendered vdom/* HTMLDivElement */<div>Hello, World</div>不过，JSX并不局限于react。例如，Solid运用其转码器来更大幅度地改动代码。// 1. original code<div>Hello, {name()}</div>// 2. transpiled to jsconst _tmpl$ = /*#__PURE__*/_$template(`<div>Hello, </div>`, 2);(() => { const _el$ = _tmpl$.cloneNode(true), _el$2 = _el$.firstChild; _$insert(_el$, name, null); return _el$;})();// 3. executed js code/* HTMLDivElement */<div>Hello, World</div>这转译代码看起来有点吓人，其实很容易解释发作了什么。首先，创立具有一切静态局部的模板，然后克隆它以创立其内容的新实例，并将动态局部添加并衔接到状态更改上。Svelte以至进一步转译了模板和状态。// 1. original code<div>Hello, {name}</div>// 2. transpiled to js/* generated by Svelte v3.55.0 */import { SvelteComponent, append, detach, element, init, insert, noop, safe_not_equal, set_data, text} from "svelte/internal";function create_fragment(ctx) { let div; let t0; let t1; return { c() { div = element("div"); t0 = text("Hello, "); t1 = text(/*name*/ ctx[0]); }, m(target, anchor) { insert(target, div, anchor); append(div, t0); append(div, t1); }, p(ctx, [dirty]) { if (dirty & /*name*/ 1) set_data(t1, /*name*/ ctx[0]); }, i: noop, o: noop, d(detaching) { if (detaching) detach(div); } };}function instance($$self, $$props, $$invalidate) { let name = 'World'; setTimeout( () => { $$invalidate(0, name = 'you'); }, 1000 ); return [name];}class Component extends SvelteComponent { constructor(options) { super(); init(this, options, instance, create_fragment, safe_not_equal, {}); }}export default Component;// 3. executed JS code/* HTMLDivElement */<div>Hello, World</div>但也有例外。例如，在Mithril.js中，固然能够运用JSX，但我们鼓舞你写JS。// 1. original JS codeconst Hello = { name: 'World', oninit: () => setTimeout(() => { Hello.name = 'you'; m.redraw(); }, 1000), view: () => m('div', 'Hello, ' + Hello.name + '!')};// 2. executed JS code/* HTMLDivElement */<div>Hello, World</div>固然大多数人会发现开发人员体验不够，但其别人更喜欢对代码完整控制。依据他们要处理的问题，短少转译步骤以至可能是有益的。许多其他框架也允许在不停止转译的状况下运用，虽然很少像这样引荐运用。"那么我如今应该学习哪个框架或库？"我有一些好音讯和一些坏音讯要通知你。坏音讯是：没有银弹。没有一个框架会在每个方面都比其他一切的框架好得多。它们中的每一个都有本人的优势和妥协。React有它的钩子规则，Angular缺乏简单的信号，Vue缺乏向后的兼容性，Svelte不能很好地扩展，Solid.js制止重构，Mithril.js不是真正的响应式，这只是举几个例子。好音讯是：没有错误的选择--至少，除非一个项目的请求真的很有限，无论是在包的大小还是性能方面。每个框架都会完成它的工作。有些可能需求绕过他们的设计决议，这可能会拖慢你的速度，但在任何状况下你都应该可以得到一个有效的结果。也就是说，不运用框架可能也是一个可行的选择。许多项目被过度运用的JavaScript毁坏了，而静态页面加上一些互动性的东西也能完成工作。如今你晓得了这些框架和库所应用的概念，选择那些最合适你当前任务的框架。不关键怕在你的下一个项目中转换框架。没有必要学习一切的框架。

关键词： 应用程序 搜索引擎 文档对象模型