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

声明式样式（如 react 具有的样式）允许您通过说“它应该看起来像这样”来控制应用程序中的流和状态。命令式风格扭转了这一局面，并允许您通过说“这是您应该做的”来控制您的应用程序。

声明性的好处是，您不会陷入表示状态的实现细节的困境。您正在委派保持应用程序视图一致的组织组件，因此您只需要担心状态即可。

想象一下，你有一个管家，他是一个框架的隐喻。你想做晚餐。在一个命令式的世界里，你会一步一步地告诉他们如何做晚餐。您必须提供以下说明：

Go to the kitchen
Open fridge
Remove chicken from fridge
...
Bring food to the table

在声明性世界中，你会简单地描述你想要什么。

I want dinner with chicken.

如果你的管家不知道如何制作鸡肉，那么你就不能以声明性的风格运作。就像如果Backbone不知道如何改变自己来完成某个任务一样，你不能只是告诉它完成该任务。例如，React之所以能够具有声明性，是因为它“知道如何制作鸡肉”。相比 Backbone，只知道如何与厨房接口。

能够描述状态可以大大减少 Bug 的表面积，这是一个好处。另一方面，你可能在事情发生方式上的灵活性较低，因为你正在委派或抽象出你如何实现状态。

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

这样做的必要方法是：

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

基本上，您必须检查屏幕上当前的内容，并处理使用当前状态重绘所需的所有更改，包括撤消先前状态的更改。你可以想象这在现实世界中有多复杂。

相反，声明性方法是：

return this.state.liked ? <blueLike /> : <greyLike />;

由于声明性方法将关注点分开，因此它中的这一部分只需要处理 UI 在分离状态下的外观，因此更易于理解。