面试题：Solid.js 中组件嵌套时如何实现数据传递

Question

在 Solid.js 项目中，假设存在父组件 `ParentComponent` 和子组件 `ChildComponent`，请详细描述如何将父组件中的数据传递给子组件，并展示相关代码示例。同时说明在这种数据传递过程中，Solid.js 的响应式系统是如何工作的。

Answer 1

数据传递方式及代码示例

1. 通过属性（props）传递数据
   • 在 Solid.js 中，父组件可以通过向子组件传递属性（props）来将数据传递给子组件。
   • 以下是示例代码：

   import { createSignal } from'solid-js';
   import ChildComponent from './ChildComponent';
   
   const ParentComponent = () => {
     const [parentData, setParentData] = createSignal('Initial data from parent');
   
     return (
       <div>
         <ChildComponent data={parentData()} />
         <button onClick={() => setParentData('New data from parent')}>
           Update data
         </button>
       </div>
     );
   };
   
   export default ParentComponent;
   

   • 子组件 ChildComponent 接收并展示数据：

   const ChildComponent = ({ data }) => {
     return (
       <div>
         <p>Data from parent: {data}</p>
       </div>
     );
   };
   
   export default ChildComponent;
   

Solid.js 响应式系统工作原理

1. 信号（Signal）基础
   • 在 Solid.js 中，createSignal 创建了一个信号，它是响应式系统的核心。信号包含一个值和一个更新函数。例如在父组件中 const [parentData, setParentData] = createSignal('Initial data from parent');，parentData 是获取当前值的函数，setParentData 是更新值的函数。
2. 响应式依赖追踪
   • 当父组件渲染时，子组件 ChildComponent 接收 parentData() 的值作为属性。此时，子组件的渲染函数成为了 parentData 信号的一个依赖。
   • 当 setParentData 被调用更新 parentData 的值时，Solid.js 的响应式系统会检测到信号值的变化。
3. 自动重新渲染
   • 由于子组件依赖于 parentData 信号，响应式系统会自动触发子组件的重新渲染。子组件重新渲染时会获取到 parentData 的最新值，并更新 UI 展示。这样，就实现了父组件数据变化时，子组件能够自动响应并更新 UI 的功能。