持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情

前言

solid只有少量的生命周期函数，所有的存活销毁都是由响应系统控制。

onMount

一般来说，有了Effect副作用，正常情况下就不需要生命周期函数了，就像react函数式组件一样。但是为了能让事情变得更容易一些，solidjs将非跟踪createEffect调用重新命名为--onMount。它和Effect是一样的，并且在组件渲染出实话就会执行，而且只运行一次。就如这个例子一样：

import { render } from "solid-js/web";
import { createSignal, onMount, For } from "solid-js";
import "./styles.css";

function App() {
  const [photos, setPhotos] = createSignal([]);

	onMount(async () => {
		const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`);
		setPhotos(await res.json());
	});

  return <>
    <h1>Photo album</h1>

    <div class="photos">
      <For each={photos()} fallback={<p>Loading...</p>}>{ photo =>
        <figure>
          <img src={photo.thumbnailUrl} alt={photo.title} />
          <figcaption>{photo.title}</figcaption>
        </figure>
      }</For>
    </div>
  </>;
}

render(() => <App />, document.getElementById('app'));

在onMount发起请求获取图片，并将结果赋值给signal，且只在页面初始化执行时发起请求，后续不会在执行。

onCleanup

有时候我们需要在页面页面销毁时清除掉一些副作用，如定时器、添加监听函数等。一些框架的清理方法直接是框架的副作用或生命周期方法的返回值。但是由于solidjs渲染树的所有内容方法都存在于Effect中并且可以嵌套，因此将onCleanup设为一级方法，我们就可以在组件内部或者Effect中使用onCleanup。在自定义指令中使用onCleanup。在响应式系统同步执行的任何地方都可以使用onCleanup。比如这个例子：

import { render } from "solid-js/web";
import { createSignal, onCleanup } from "solid-js";

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

  const timer = setInterval(() => setCount(count() + 1), 1000);
  onCleanup(() => clearInterval(timer));

  return <div>Count: {count()}</div>;
}

render(() => <Counter />, document.getElementById('app'));

在组件内部定义了循环定时器setInterval，而在页面销毁时需要使用clearInterval清除掉这个定时器。

SolidJS生命周期

前言

onMount

onCleanup