面试题：Solid.js组件生命周期中用于数据获取的合适阶段

Question

在Solid.js组件的生命周期里，通常在哪个阶段适合进行数据获取操作，比如从API获取数据？请简要说明原因，并给出一个简单示例代码。

Answer 1

在Solid.js组件的生命周期中，onMount阶段适合进行数据获取操作，例如从API获取数据。原因如下：

• onMount在组件首次渲染到DOM后触发，此时组件已经在页面上呈现，进行数据获取操作不会影响初始渲染，避免阻塞页面的显示。
• 这个阶段确保了相关的DOM元素已经存在，对于可能需要操作DOM的后续数据处理（比如更新DOM元素内容）更加安全。

示例代码如下：

import { createSignal, onMount } from 'solid-js';

function MyComponent() {
  const [data, setData] = createSignal(null);

  onMount(() => {
    fetch('https://example.com/api/data')
     .then(response => response.json())
     .then(json => setData(json));
  });

  return (
    <div>
      {data() ? <p>{JSON.stringify(data())}</p> : <p>Loading...</p>}
    </div>
  );
}

export default MyComponent;

在上述代码中，onMount函数内部发起了一个API请求，获取数据后通过setData更新信号值，进而更新组件的UI显示。