举例说明声明式语法和指令式语法？

Question

SwiftUI 是声明式语法，对比与指令式语法的话，可以举例说明它们的区别吗？

Answer 1

声明式：

function Component({ name }: { name: string }) {
    const [count, setCount] = useState(0)

    return <div>
        <p>{name} {count}</p>
        <button onClick={() => setCount(c => c + 1)} >+1</button>
    </div>
}

命令式：

function Component({ name }: { name: string }) {
  let count = 0;

  const div = document.createElement("div"),
    p = document.createElement("p"),
    button = document.createElement("button"),
    update = () => (p.innerText = `${name} ${count}`);

  update();

  button.innerText = "+1";
  button.addEventListener("click", () => {
    count++;
    update();
  });

  div.append(p, button);

  return div;
}

Answer 2

生活中的例子

妈妈让女儿打扫卫生这个场景。

命令式（指令式）
妈妈详细指导女儿如何打扫卫生，包括清洁哪些地方、使用哪些工具以及按照什么顺序进行清洁，这就类似于命令式编程。在这种情况下，女儿被告知了每一个具体的步骤和操作，类似于命令式编程需要明确指定每一个操作的执行步骤。

声明式
妈妈告诉女儿房间应该保持整洁，但并不详细说明具体的清洁步骤。在这种情况下，女儿只需知道房间需要保持干净整洁，而不需要了解每个细节的清洁过程。这就像声明式编程，它关注于描述目标或结果，而非具体的步骤。

获取集合中的奇数

下面用js为例，不会SwiftUI哈。

命令式（指令式）

const items = [1, 2, 3]
const result = []

for(let i = 0; i < items.length; i++) {
  const item = items[i];
    if (item % 2 !== 0) {
        result.push(item)
    }
}

核心：
明确的指定达到目标每一步该如何操作，侧重于具体步骤。

声明式

const items = [1, 2, 3]

const result = items.filter(item => item % 2 !== 0)

核心：
它关注于描述目标或结果，也就是“把所有的奇数给我”。而非具体步骤。