面试题：Solid.js组件生命周期之挂载阶段

Question

在Solid.js中，简述组件挂载阶段会涉及到哪些生命周期相关的操作或函数，并且说明它们执行的先后顺序以及主要作用。

Answer 1

在Solid.js中，组件挂载阶段涉及以下生命周期相关操作或函数：

1. create函数：
   • 执行顺序：最先执行。
   • 主要作用：用于初始化组件的状态和副作用。在此函数中可以创建响应式数据、订阅外部数据源等。例如，可以创建一个响应式的计数器变量。

import { create } from'solid-js';

function MyComponent() {
  const [count, setCount] = create(() => [0, (c) => c + 1]);
  return <div>{count}</div>;
}

2. onMount函数：
   • 执行顺序：在create函数之后，组件首次渲染到DOM后执行。
   • 主要作用：适合执行需要DOM元素已经存在的操作，如操作DOM、添加事件监听器等。比如为一个按钮添加点击事件监听器。

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

function MyComponent() {
  onMount(() => {
    const button = document.getElementById('myButton');
    if (button) {
      button.addEventListener('click', () => {
        console.log('Button clicked');
      });
    }
  });
  return <button id="myButton">Click me</button>;
}

总结来说，在Solid.js组件挂载阶段，先执行create函数进行组件初始化相关操作，然后在组件首次渲染到DOM后执行onMount函数进行依赖于DOM存在的操作。