React.js中的声明式和命令式之间的区别？

我先做个比喻：我有两辆车，我的两辆车希望车内的温度为正常室温〜72°F。在第一辆（较旧的）汽车中，有两个用于控制温度的旋钮（一个用于控制温度的旋钮和一个用于控制气流的旋钮）。天气太热时，我必须调节第一个旋钮以降低温度，并可能改变气流），反之亦然。这是当务之急！我必须自己控制旋钮。在我的第二辆（较新的）汽车中，我可以设置/声明温度。这意味着我不必费力调节旋钮即可调节温度，因为我知道汽车声明/将其设置为72°F，并且汽车将必须完成该状态。

React是相同的，您声明标记/模板和stat，然后React进行必要的工作以保持DOM与您的应用程序同步。

<button onClick={activateTeleporter}>Activate Teleporter</button>

无需使用.addEventListener()设置事件处理，而是声明我们想要的。单击该按钮后，它将运行该activateTeleporter功能。

声明式编程是一种编程范例……它表示计算的逻辑而不描述其控制流程。

命令式编程是一种编程范例，它使用可更改程序状态的语句。

ref链接：-https: //codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2

在命令式世界中，现实生活中的事物将进入啤酒吧，并向酒保提供以下说明：-从架子上拿起玻璃杯–将玻璃杯放在吃水的前面–将玻璃杯向下拉处理直到玻璃杯装满-将玻璃杯递给我。

相反，在声明性世界中，您只会说：“请啤酒。”

要求啤酒的声明式方法假定调酒师知道如何为某人服务，这是声明式编程工作方式的重要方面。

在声明式编程中，开发人员仅描述他们想要实现的目标，因此无需列出所有步骤即可使其工作。

React提供了一种声明式方法，这一事实使它易于使用，因此，生成的代码很简单，这通常导致更少的错误和更多的可维护性。

由于React遵循声明式范式，因此无需告诉它如何与DOM交互；您只需声明要在屏幕上看到的内容，然后React即可为您完成工作。

• 声明式允许您控制所有视图。（例如状态管理）
• 命令式允许您控制视图。（例如$（this））

这是一个很好的类比：

*紧急命令：从停车场北出口出来，左拐。在I-15州际公路上向南行驶，直到到达Bangerter Highway出口。就像您要去宜家一样，在出口右转。一直走，在第一个路口右转。继续穿过下一盏灯，然后左下。我的房子是＃298。

声明性回应：我的地址是犹他州德拉珀84020，西不可变巷298号*

https://tylermcginnis.com/imperative-vs-declarative-programming/

想象一个简单的UI组件，例如“ Like”按钮。当您点击它时，如果它以前是灰色的，它会变成蓝色，如果以前是蓝色，它会变成灰色。

这样做的必要方法是：

if( user.likes() ) {
    if( hasBlue() ) {
        removeBlue();
        addGrey();
    } else {
        removeGrey();
        addBlue();
    }
}

基本上，您必须检查屏幕上当前显示的内容，并处理将其重绘为当前状态所需的所有更改，包括撤消先前状态的更改。您可以想象在现实情况下这可能有多么复杂。

相反，声明性方法将是：

if( this.state.liked ) {
    return <blueLike />;
} else {
    return <greyLike />;
}

因为声明式方法将关注点分开，所以它的这一部分仅需要处理UI在单独状态下的外观，因此更容易理解。

命令式代码指示JavaScript如何执行每个步骤。使用声明性代码，我们告诉JavaScript我们要完成的工作，然后让JavaScript负责执行这些步骤。

React是声明性的，因为我们编写所需的代码，而React负责获取声明的代码并执行所有JavaScript / DOM步骤以使我们获得所需的结果。