声明式api和命令式api的区别

1. 核心区别：What vs. How

• 声明式 (Declarative): 告诉程序你想要什么 (What)，而不去管具体怎么做。
  • 比喻：你去餐厅点菜，说“我要一份宫保鸡丁”。你只关心结果（菜上桌），不关心厨师是先切鸡丁还是先炒花生。
• 命令式 (Imperative): 告诉程序具体怎么做 (How)，通过一步步的指令达到目的。
  • 比喻：你走进厨房，对厨师说“先切鸡胸肉，切成丁，然后腌制，起锅烧油...”。你需要控制每一个步骤。

2. 代码对比：以 ECharts 为例

假设我们要把一个图表的标题从“旧标题”改成“新标题”。

命令式 (原生 ECharts, jQuery) 你需要手动找到那个对象，然后修改它。

// 1. 获取图表实例
const chart = echarts.getInstanceByDom(dom);
// 2. 获取当前的配置
const currentOption = chart.getOption();
// 3. 修改配置中的具体字段
currentOption.title[0].text = "新标题";
// 4. 命令图表更新
chart.setOption(currentOption);

特点：你必须知道 chart 实例在哪，必须知道调哪个方法 setOption 才能生效。

声明式 (React, ECharts-for-React) 你只需要描述最新的状态。

// 状态变了，视图自动就变了
const [title, setTitle] = useState("新标题");

const option = {
  title: { text: title }, // 只要这里 title 变了
};

// 你只管给它最新的 option，不用管它是怎么 setOption 的
<ReactECharts option={option} />;

特点：你只更新了数据（状态），UI 库负责去“计算”并“执行”更新。

3. 总结

特性	命令式 (Imperative)	声明式 (Declarative)
关注点	过程 (Process)	结果 (Result)
控制力	极强，可微操每一步	较弱，隐藏了底层细节
代码量	通常较多，容易啰嗦	通常较少，逻辑清晰
典型代表	C, Java, jQuery, 原生DOM操作	SQL, HTML, React, Vue, CSS