乐趣区

关于前端:现在常说的-声明式状态-到底是个啥一篇文章浅聊清楚

什么是申明式

  • 了解申明式之前,先说下 申明 的含意,平时咱们说 申明一个变量,申明一个函数,其本质是用一套语法去形容一个咱们想要表白的对象
  • 同理对于古代前端框架提供的 申明式 编程,所指的并不是某一个 变量或函数 ,它所示意的是一种 编程模式,实质同样是 框架 提供了一套规范(如 jsx 和 vue 的 模板语法) 供开发者去形容 UI
  • 申明式在前端利用的体现其实就是这样一个 函数表达式: UI = Fn(X),这里 UI 范指 web 页面,Fn 则是咱们编写的申明式组件,X 指状态

例如问题中的这段 Vue 模板,咱们通常就说它是申明式的

<div id="app">
  <button @click="count++">
    Count is: {{count}}
  </button>
</div>

除此之外,你可能还据说过 命令式,间接看代码吧

// app.html
<div id="app">
  <button></button>
</div>

// app.js
let count = 0;
const btnElement = document.querySelector('#app button');
btnElement.textContent = `Count is: ${count}`
btnElement.addEventListener('click', () => {
   count++;
   btnElement.textContent = `Count is: ${count}`
});

把 申明式 和 命令式 比照起来看,你会发现 命令式 的语句通常是 原生语句 ,而 申明式 都依赖于框架提供的个性。其实说白了,申明式 的代码 通过编译 / 框架运行时 解释后,也就是一句一句的 命令式 的代码了。

由此能够有一个简略的论断:申明式编程自身是一种理念,一种思维,而申明式的语法 往往是 某个框架 对 命令式 逻辑的下层形象,以简洁的 语法 来表白本来繁琐的逻辑。

什么是状态

严格来说,状态 和 变量不是齐全等价的,状态是变量的一个子集。通常咱们把一个具备 可交互性 的变量称之为状态,什么叫 可交互性,看一个例子

如下逻辑中,count 没有参加页面交互,仅仅是内存中的一个值,对于用户来说是无感的,通常咱们不会称之为状态

let count = 0;

for(let i = 0; i < 10; i++) {count =+ 1;}

但如果改写成这样,count 将渲染到页面上,并且按钮点击会递增其值,并从新渲染,这时 count 参加到了与用户的交互过程中,具备了可交互性,通常就能够称为 状态

let count = 0;
const btnElement = document.querySelector('#app button');
btnElement.textContent = `Count is: ${count}`
btnElement.addEventListener('click', () => {
   count++;
   btnElement.textContent = `Count is: ${count}`
});

对于 状态 的解释不仅限于以上的示例,比方平时业务开发中,决定一个 modal 是否显示的 变量 visible 咱们也会称为 状态,因为 visible 的变动会引起 视图变更,此类参加 交互 但不会间接渲染到视图上的 变量,也属于此领域。

退出移动版