面试题：Solid.js中Props属性传递与响应式数据更新

Question

在Solid.js应用中，父组件有一个响应式的计数器`count`，通过Props传递给子组件。子组件有一个按钮，每次点击按钮，父组件的`count`增加1。请实现这个功能，并解释为什么这样实现能够让父组件的状态更新影响子组件，以及子组件的操作能正确反馈到父组件的状态变化，涉及到Solid.js的哪些特性。

Answer 1

实现代码

1. 父组件代码：

import { createSignal } from 'solid-js';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [count, setCount] = createSignal(0);

  return (
    <div>
      <p>父组件的count: {count()}</p>
      <ChildComponent count={count} setCount={setCount} />
    </div>
  );
}

export default ParentComponent;

2. 子组件代码：

import { Button } from'solid - ui';

function ChildComponent({ count, setCount }) {
  return (
    <Button onClick={() => setCount(count() + 1)}>
      点击增加父组件count
    </Button>
  );
}

export default ChildComponent;

原理解释

1. 父组件状态影响子组件：
   • 在Solid.js中，使用createSignal创建的count是一个响应式信号。当父组件将count作为props传递给子组件时，子组件依赖于这个props。由于Solid.js的响应式系统特性，当count的值在父组件中发生变化时，依赖它的子组件会自动重新渲染。这是基于Solid.js的细粒度响应式系统，它能够追踪组件对响应式数据的依赖关系，并在数据变化时触发重新渲染。
2. 子组件操作反馈到父组件状态变化：
   • 子组件通过props接收了父组件的setCount函数。当子组件中的按钮被点击时，调用setCount(count() + 1)，这会更新父组件中count的值。因为setCount函数是父组件中用于更新count状态的函数，所以这个操作能够正确地改变父组件的状态。同时，由于父组件状态变化，又会根据上述响应式系统特性，导致依赖count的子组件重新渲染，从而使整个交互形成闭环。这体现了Solid.js单向数据流的特性，即数据从父组件流向子组件，子组件通过回调函数通知父组件状态变化，进而父组件更新状态，重新渲染相关组件。