许多初学者经常会问 “我需要学习哪个框架 ？” 以及 “学习框架前需要掌握多少 JS 或者 TS ？” 无数带有主观色彩的文章都在宣传作者首选框架或库的优势，而不是向读者展示其背后的概念以做出更明智的决定。所以让我们先解决第二个问题
学习框架前需要掌握多少 JS 或者 TS
尽可能多地去学以让更好的你理解它们所基于的概念。你将需要了解基本数据类型、函数、基本运算符和文档对象模型 ( DOM )，这是 HTML 和 CSS 在 JS 中的表示。除此之外的一切也都 OK，但并不严格要求某个精通框架或库。
如果你是一个完完全全的新手，JS for cats 应该是一个不错的入门资料。持续学习，直到你感到自信为止，然后继续前进，直到你再次感到自信为止。当掌握了足够的 JS / TS 知识后，你就可以开始学习框架。其他的知识你可以并行学习。
哪些重要概念
- State （状态）
- Effects （副作用）
- Memoization （记忆化）
- Templating and rendering （模板与渲染）
所有现代框架都从这些概念中派生出它们的功能
state
State 只是为你的应用程序提供动力的数据。它可能在全局级别，适用于应用程序的大部分组件，或适用于单个组件。让我们写一个计数器的简单例子来说明一下。它保留的计数是 state 。我们可以读取 state 或者写入 state 以增加计数
最简单的表示通常是一个变量，其中包含我们的状态所包含的数据：
let count = 0;
const increment = () => { count++; };
const button = document.createElement('button');
button.textContent = count;
button.addEventListener('click', increment); document.body.appendChild(button);
但这个代码有个问题：类似调用 increment 方法一样去修改 count 的值 ，并不会自动修改 button 的文案。我们需要手动去更新所有的内容，但这样的做法在复杂场景下代码的可维护性 & 扩展性都不是很好。
让 count 自动更新依赖它的使用方的能力称之为 *reactivity（响应式） *。这是通过订阅并重新运行应用程序的订阅部分来更新的。
几乎所有的现代前端框架和库都拥有让 state 变成 reactivity 的能力。基本上可以分为 3 种解决方案，采用其中至少一种或者多种混用来实现这个能力：
- Observables / Signals （可观察的 / 信号）
- Reconciliation of immutable updates （协调不可变的更新）
- Transpilation （转译）
这些概念还是直接用英文表达比较贴切