大家好,我是久染。
最近在svelte的官网，发现了这么一个标题，并且附有相应的视频。
标题是这样的: Rethinking reactivity，可以理解为重新思考响应式
既然需要重新思考，那么就需要抛掉所有现有的东西，可以假设我们现在处于很多年前的前端开发阶段，今天我们就从原生的HTML和JS出发，来想想如何实现响应式
注：请跟着思路，不必太关注代码，本文希望大家理解的观点：
设计是立足在技术之上更重要的东西，理解响应式如何设计和相关背后的思考，才是我希望写出来的东西。
1. 起始出发点
抱着思考的心态，写下这几行代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
2. 动态和静态的思考方式
2.1 静态的HTML
HTML大家都知道，全称是超文本标记语言,那我们就用文本的方式去思考HTML代码
假象这样一个场景：如果你在书上写下了几个文字，那么书上的文字就是静态的，是不可变的。
HTML也是这样，我们完全可以将他理解为静态的文本，当我们写下了文字之后，这个文字就是不变的，我们将HTML理解为静态的
2.2 动态的JS
当下我们开发中，所有变化的都是数据，理所应当，数据是写在JS中的，那我们就将JS理解为动态的
3. 初启程 --- 响应式思想
现在有了动静的思考方式，我们来看看之前写的代码
如何将动态的content内容渲染到静态的HTML中呢
3.1 绑定的思维
上面的问题，如果不从技术上来讲，我们很容易想到一个解决方案，那就是把content中动态的内容绑定在静态的容器里，这样的话只要下面发生变化，上面自然也会发生变化。
如果你也这么想了，那么恭喜你，你有了和Vue一样的思路，想想Vue中的v:bind语法，是不是也是这样的思想呢, 下面是将容器的文本绑定在content的伪代码
3.2 描述的思想
上文说了利用绑定的思想来实现响应式，还有一种可行的方式，那就是有没有一种结构，这种结构可以描述DOM的层次结构以及内容，通过这个结构的描述，来将内容渲染到不可变的HTML上
这个思想其实很常见，想想Vue中的.vue文件和React中的.jsx和.tsx文件，其实本质上都是一种结构，利用我们自定义的文件，如.vue、.jsx、.tsx之类的模板文件，将这类模板编译解析为AST，用来描述DOM的层次结构，当我们知道了DOM的结构后，再将他渲染到HTML中去
但你可能会这样想, 这种通过描述DOM结构然后再渲染到HTML的思想，有些不像是响应式的思维，毕竟是知道内容后再渲染，并不是真正意义上的响应式
所以有大佬发出了这样的评论: React is a terrible name for @reactjs，意思是说React对@reactjs这个库来说并不是一个好的名字
从技术上来讲，这种描述DOM内容的结构，可以是你熟知的JSX，也可以是你熟悉的虚拟DOM,想一想，他们是不是都可以充当描述DOM结构的角色
抛开技术上讲，从使用者层面来看，这确实是一种响应式，因为我们在开发中，也是在JSX中写这样的代码
所以从技术原始层面上来讲，React并不是响应式，这源于HTML是一种静态的结构, 不能实现真正意义上的响应
从框架使用者层面来将，React又做到了上层意义上的响应式，这就是一款框架的意义所在
4. 渐入佳境 --- 如何通知有值发生变化
在动态的Js中，我们可以通过事件等一系列操作去更改HTML'绑定'的Js变量，当HTML绑定的js数据发生变化时，如果告知我们自己的编译模板（如.jsx .vue .tsx文件）有值发生变化，从而从使用者层面去实现响应式的体验呢？
在React中，我们可以调用setState方法来告知组件有值发生了变化，像下面这样
在Vue中，我们通过this.count来更新
不难看出，在React和Vue中，告知组件更新都是强依赖与this的
如果你听说过Svelte.js这款框架，他的通知机制是这样处理的
这种书写方式是更接近与我们上面所说的绑定的思想所说的书写方式，不需要调用诸如setState之类的框架内定的方法，只需要直接操作js变量，即可做到上层的响应式
5.思考 --- 技术创新立足点在哪里
可以看到，从React，Vue，再到现在很火的Svelte框架，响应式从上层使用者的体验，愈发的接近js的编程体验。设计是越来越接近js底层的编程，是对前端新人愈来愈友好的。当然，像Svelte这类的框架，优点远不止响应式的上层设计和使用体验，我只是从这个角度来思考，框架设计需要考虑的点是什么
在我们平常学习技术的过程中，多多去思考这样的内容：
立足与技术，观于设计。
从笔者的观点来看，任何职业，任何产品，都是立足设计之上的，设计是上层，职业技能是底层。
很多框架和库，都是作者熟知当前设计的现状，突发灵感产生了一个设计的思想，然后从设计的思想出发，技术上去解决。
如何站在底层的职业技能上，去思考上层设计，是从事任何职业需要思考和磨练的地方。从前端来说，就是为什么会有架构师和工程师，架构师思考系统架构，工程师思考工程设计，希望大家学习技术之余，可以思考更多这些相关的东西。
6.总结
在如今学习资源如此丰富的互联网时代，五花八门的技术教程，如果你迷茫在其中，可以好好思考本文所阐述的观点和内容，如果能够让你有所顿悟和提升，那将是久染荣幸；
久染一直想写些什么给大家，奈何没有想到想要写的标题，这篇文章也是在看了Rethinking reactivity之后有感写下
题材思考不易，写文不易~ 如果喜欢本文，请点个赞支持一下吧~
