前面很多地方的文章，其实提到了这个东西，本教程会系统一点来帮助从未接触过 GUI 开发、或者熟悉 JavaScript 但未使用过 Reactor 的开发者快速上手，所以细节看文档，这会全面一些介绍大体上开发过程中用得到的知识。

什么是 Reactor？

简单来说，Sciter.js Reactor 不是一个框架或库，而是 Sciter.js 内置的一组功能，它借鉴了 ReactJS 的核心思想，让你能够用声明式的方式构建用户界面。

它主要包含两个核心特性：

1. 原生 JSX 支持: 你可以直接在 JavaScript 代码中编写类似 HTML 的 JSX 语法，无需任何额外的编译步骤。
2. 高效的 DOM 更新: 通过 element.patch(jsx) 方法，Reactor 能够智能地比较虚拟 DOM (JSX 表达式的结果) 和真实 DOM 的差异，并只更新必要的部分，从而实现高效的 UI 渲染。

为什么选择 Reactor？

• 原生集成: 无需引入外部库，开箱即用。
• 简洁高效: 语法简洁，性能优异，尤其适合桌面应用开发。
• ReactJS 相似性: 如果你熟悉 ReactJS，你会发现很多概念是相通的，上手会更快。
• 桌面 UI 优化: 针对桌面 UI 的特点进行了优化，例如支持窗口化弹出元素等。

核心概念

1. JSX (JavaScript XML)

JSX 允许你在 JavaScript 代码中编写 UI 结构，就像写 HTML 一样。

javascript
 代码解读
复制代码
// 一个简单的 JSX 表达式
const greeting = <h1>你好, Sciter!h1>;

document.body.append(greeting); // 将 JSX 渲染到页面

关键点:

• JSX 标签可以是标准的 HTML 标签 (如
  , )，也可以是自定义组件。
• 可以在 JSX 中使用 {} 嵌入 JavaScript 表达式。
• 组件名称必须以大写字母开头。

2. 组件 (Components)

组件是 Reactor 应用的基本构建块。它们是可重用的 UI 单元，可以接收输入数据 (称为 props) 并返回要在屏幕上显示的虚拟元素。

函数组件 (Function Components): 最简单的方式是使用函数定义组件。

javascript
 代码解读
复制代码
// 一个简单的函数组件
function Welcome(props) {
  return <h1>你好, {props.name}!h1>;
}

// 使用组件
document.body.patch(<Welcome name="开发者" />);

类组件 (Class Components): 你也可以使用 ES6 类来定义组件。类组件通常用于需要管理自身状态或使用生命周期方法的场景。

javascript
 代码解读
复制代码
class Clock extends Element {
  // 构造函数，初始化状态
  constructor() {
    super();
    this.time = new Date();
  }

  // 生命周期方法：组件挂载到 DOM 后调用
  componentDidMount() {
    this.timerId = setInterval(() => {
      // 更新组件状态
      this.componentUpdate({ time: new Date() });
    }, 1000);
  }

  // 生命周期方法：组件从 DOM 卸载前调用
  componentWillUnmount() {
    clearInterval(this.timerId);
  }

  // 渲染方法：返回要显示的 JSX
  render() {
    return <p>当前时间: {this.time.toLocaleTimeString()}p>;
  }
}

// 使用类组件
document.body.patch(<Clock />);

关键点:

• 组件可以将 UI 拆分成独立、可复用的部分。
• props 是从父组件传递给子组件的数据，是只读的。
• 类组件通过 this 访问 props 和自身状态。

3. 渲染 (Rendering) 与 element.patch()

Reactor 使用 element.patch(jsx) 方法将 JSX 描述的 UI 更新到真实的 DOM 上。它会进行高效的 diff 算法，只更新变化的部分。

javascript
 代码解读
复制代码
function tick() {
  const element = (
    <div>
      <h1>你好, 世界!h1>
      <h2>现在是 {new Date().toLocaleTimeString()}.h2>
    div>
  );
  document.body.patch(element); // 高效更新 DOM
}

setInterval(tick, 1000);

4. 状态 (State) 与 componentUpdate()

对于类组件，可以使用 this 来存储组件的内部状态。当状态需要改变时，必须 调用 this.componentUpdate(newState) 方法来通知 Reactor 更新 UI。

javascript
 代码解读
复制代码
class Counter extends Element {
  count = 0; // 初始化状态

  increment() {
    // 使用 componentUpdate 更新状态
    this.componentUpdate({ count: this.count + 1 });
  }

  render() {
    return (
      <div>
        <p>点击次数: {this.count}p>
        <button onclick={() => this.increment()}>点击我button>
      div>
    );
  }
}

document.body.patch(<Counter />);

关键点:

• 不要直接修改 this 上的状态属性 (除了在 constructor 中初始化)。
• componentUpdate() 会触发 render() 方法重新渲染。
• componentUpdate() 是异步的，并且会将多次更新合并为一次。

5. 生命周期 (Lifecycle)

类组件有一系列特殊的“生命周期方法”，允许你在组件的不同阶段执行代码：

• constructor(props, kids): 组件实例创建时调用，用于初始化状态和绑定方法。
• this(props, kids): 组件接收新的 props 或 kids 时调用。
• render(): 必须的方法，返回要渲染的 JSX。当状态或 props 改变时会被调用。
• componentDidMount(): 组件首次挂载到真实 DOM 后调用。适合执行需要 DOM 节点的操作，如网络请求、设置定时器等。
• componentWillUnmount(): 组件从 DOM 中卸载前调用。适合执行清理操作，如清除定时器、取消网络请求等。
• componentDidUpdate(): 在 componentUpdate() 触发的更新完成后调用。

参考示例：上面的 Clock 组件就使用了 componentDidMount 和 componentWillUnmount。

6. 事件处理 (Event Handling)

在 Reactor 中处理事件非常直观。可以直接在 JSX 中使用 on 属性绑定事件处理器。

javascript
 代码解读
复制代码
function ActionButton() {
  function handleClick(event) {
    console.log('按钮被点击了!', event);
  }

  return <button onclick={handleClick}>点我button>;
}

对于类组件，通常在类中定义事件处理方法：

javascript
 代码解读
复制代码
class Search extends Element {

  handleSearchClick() {
    const query = this.$('input').value; // 获取输入框的值
    console.log('搜索:', query);
    // 可以触发一个自定义事件，通知父组件
    this.post(new Event('do-search', { data: query }));
  }

  render() {
    return (
      <search>
        
        <button onclick={() => this.handleSearchClick()}>搜索button>
      search>
    );
  }
}

Sciter 还支持更高效的类事件处理器语法 (详见 component-styles-events.md)， 我个人是非常非常喜欢这种写法的，所见所得，不用自己到处去绑定，好象是 ES2020 的新语法：

javascript
 代码解读
复制代码
class Search extends Element {
  // ... render 方法 ...

  // 使用特殊语法处理按钮点击
  ["on click at button"](evt, button) {
    const query = this.$('input').value;
    console.log('搜索:', query);
    this.post(new Event('do-search', { data: query }));
  }
}

7. 样式 (Styling)

你可以像在普通 HTML 中一样使用 CSS 来为组件添加样式。

全局样式: 在 HTML 文件中通过