OpenInula 基础概念

组件定义

在 openInula 2版本中，组件的定义非常简单直观。你只需要编写一个返回 JSX 的函数即可：

function Welcome() {
  return <h1>欢迎使用 OpenInula</h1>;
}

状态管理

OpenInula 采用直观的状态管理方式，无需特殊的 API：

function Counter() {
  // 直接声明状态变量
  let count = 0;
  
  // 直接修改状态
  function increment() {
    count++;
  }
  
  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={increment}>增加</button>
    </div>
  );
}

计算值

当一个值依赖于其他状态时，OpenInula 会自动将其转换为计算值：

function PriceCalculator() {
  let quantity = 1;
  let unitPrice = 100;
  
  // price 会自动成为计算值
  const price = quantity * unitPrice;
  
  return (
    <div>
      <p>数量：{quantity}</p>
      <p>单价：{unitPrice}</p>
      <p>总价：{price}</p>
      <button onClick={() => quantity++}>增加数量</button>
    </div>
  );
}

条件渲染

OpenInula 提供了内置的条件渲染标签：

function Greeting({ isLoggedIn }) {
  return (
    <div>
      <if cond={isLoggedIn}>
        <h1>欢迎回来！</h1>
      </if>
      <else>
        <h1>请先登录</h1>
      </else>
    </div>
  );
}

列表渲染

使用内置的 for 标签进行列表渲染：

function TodoList() {
  const todos = ['学习 OpenInula', '写文档', '创建示例'];
  
  return (
    <ul>
      <for each={todos}>
        {(todo) => <li>{todo}</li>}
      </for>
    </ul>
  );
}

事件处理

事件处理采用 onXxx 的形式：

function Button() {
  let clickCount = 0;
  
  return (
    <button 
      onClick={() => clickCount++}
      onMouseOver={() => console.log('鼠标悬停')}
    >
      点击次数：{clickCount}
    </button>
  );
}

组件组合

组件可以通过 props 和 children 进行组合：

function Panel({ title, children }) {
  return (
    <div className="panel">
      <div className="panel-header">{title}</div>
      <div className="panel-body">
        {children}
      </div>
    </div>
  );
}

function App() {
  return (
    <Panel title="欢迎">
      <p>这是一个示例面板</p>
      <button>确定</button>
    </Panel>
  );
}

下一步

在掌握了这些基础概念后，你可以：

1. 深入了解模板系统的使用
2. 学习响应式系统的工作原理
3. 探索组件开发的最佳实践