面试题：Qwik中Props与State搭配的基础技巧

Question

在Qwik组件开发中，简述Props和State的概念，并举例说明在一个简单计数器组件里，如何合理搭配Props和State来实现计数功能以及外部控制初始计数值。

Answer 1

Props概念

Props（属性）是一种从父组件传递到子组件的数据。它是只读的，用于将数据传递给子组件，以配置子组件的行为或外观。子组件不能直接修改Props，若需要更改，需通过父组件更新并重新传递。

State概念

State（状态）是组件内部维护的数据，组件可以根据用户交互或其他事件更新State，从而触发组件重新渲染，以反映状态的变化。State通常用于存储组件内部可变的数据。

简单计数器组件示例

假设使用Qwik框架开发一个简单计数器组件：

import { component$, useState$ } from '@builder.io/qwik';

// 定义计数器组件
const Counter = component$(({ initialCount }: { initialCount: number }) => {
  // 使用useState$创建计数器的状态，初始值为props传递的初始值
  const [count, setCount] = useState$(initialCount);

  // 增加计数的函数
  const increment = () => {
    setCount(count.value + 1);
  };

  return (
    <div>
      <p>Count: {count.value}</p>
      <button onClick$={increment}>Increment</button>
    </div>
  );
});

export default Counter;

在上述代码中：

• Props使用：initialCount作为Props从父组件传递进来，用于设置计数器的初始值，实现了外部控制初始计数值。
• State使用：count是组件内部的State，通过setCount函数可以更新count的值，实现计数功能。每次点击按钮时，count状态更新，组件重新渲染，显示最新的计数值。