声明式编程与 React

封面照片由Mimi Thian在Unsplash上拍摄

声明式编程是由 React 在 JavaScript 社区中推广的一种编程方式。它并不是什么新鲜事物，只是最近才开始流行起来的。

根据维基百科：

声明式编程是一种编程范式——一种构建计算机程序结构和元素的风格——它表达计算的逻辑而不描述其控制流。

只有当您了解声明式编程时，这个定义才是好的，但不要担心，我们会理解它的。

声明式编程

声明式编程就像描述一幅画，而命令式编程则是绘制这幅画的指令。声明式编程使得代码：

• 更易读：由于隐藏了底层细节，程序更容易阅读。在声明式编程中，我们甚至不知道系统的底层细节。
• 更容易推理：我们编写的代码更容易推理，因为它非常抽象，而且我们描述的是解决方案而不是过程。

正如我所说，声明式编程并非新鲜事物，因此业界广泛使用的许多语言都是声明式的。让我来介绍其中几种。

SQL

SQL 是一种领域特定语言，用于编程，旨在管理关系数据库中的数据。如果您正在阅读本文，我想我不需要向您介绍SQL，它只是管理关系数据库的事实标准。

看看这个简单的 SQL 查询：

SELECT * FROM Employees

这里我们定义我们需要每个员工的详细信息而不是如何获取员工。我们不关心数据库用于存储数据的任何复杂数据结构。

CSS

CSS 是声明式编程的一个很好的例子。在 CSS 中，我们实际上定义了元素的外观，而浏览器会负责实现它。你只需指定这个 div 应该是蓝色，文本应该是亮黄色，浏览器就会帮你实现。

想象一下如果你body设置

body {
  width: 500px;
  height: 500px;
  background: palevioletred;
  color: white;
}

现在浏览器会根据你的 CSS 来创建 body。这就是声明式编程的理念，你定义结构，编译器/宿主会帮你完成。

React 中的声明式编程

在 React 中，您可以通过更改组件的状态来创建交互式 UI，而 React 会负责根据该状态更新 DOM。

以此反应代码为例：

import React from "react";

class App extends React.Component {
  state = {
    message: "Hello react"
  }
  render() {
    return (
    <div className="App">
      <h1>{this.state.message}</h1>
      <button 
        onClick={e => this.setState({message: "Hello World"})}>
          Change Message</button>
    </div>
  );
  }
}

这会创建一个“hello React”消息和一个按钮，你可以在这里看到

当您单击按钮时，它会将消息更改为“Hello World”。

在 React 中，DOM 是声明式的。这意味着我们无需与 DOM 交互，UI 会在状态改变时更新。这使得 UI 的设计和调试更加便捷，您只需更改程序的状态，即可查看 UI 在特定时刻的显示效果。

TL;DR

在声明式编程中，您描述程序/UI/图片，其他人通过 React/浏览器/OS 实现它。