Secondary Primitives

createRenderEffect

import { createRenderEffect } from "solid-js";

function createRenderEffect<T>(fn: (v: T) => T, value?: T): void;

渲染效果是一种类似于普通效果（由createEffect创建）的计算，但在 Solid 调度效果函数首次执行的时机上有所不同。虽然createEffect会等待当前渲染阶段完成，但createRenderEffect会立即调用该函数。因此，该效果会在 DOM 元素创建和更新时运行，但可能在特定目标元素创建之前，并且很可能在这些元素连接到文档之前就执行。特别是，在初始效果调用之前，refs（引用）不会被设置。实际上，Solid 使用createRenderEffect来实现渲染阶段本身，包括设置refs。

渲染效果的响应式更新与普通效果相同：它们会在响应式变化时排队（例如，单个信号更新、批量更改或整个渲染阶段的集体更改），并在之后的单个batch中运行（与效果一起）。特别是，渲染效果中的所有信号更新都会被批处理。

以下是行为示例。（与createEffect中的示例进行比较。）

// 假设此代码在组件函数中，因此是渲染阶段的一部分
const [count, setCount] = createSignal(0);

// 这个效果在开始时和count变化时打印count
createRenderEffect(() => console.log("count =", count()));
// 渲染效果立即运行，打印 `count = 0`
console.log("hello");
setCount(1); // 效果还不会运行
setCount(2); // 效果还不会运行

queueMicrotask(() => {
  // 现在会打印 `count = 2`
  console.log("microtask");
  setCount(3); // 立即打印 `count = 3`
  console.log("goodbye");
});

// --- 整体输出: ---
// count = 0   [这是与createEffect相比唯一添加的行]
// hello
// count = 2
// microtask
// count = 3
// goodbye

就像createEffect一样，效果函数会接收一个参数，该参数等于效果函数上次执行返回的值，或在第一次调用时，等于createRenderEffect的可选第二个参数。

参数

名称	类型	描述
`fn`	`(v: T) => T`	要调用的效果函数
`value`	`T`	传递给效果函数的初始值

报告此页面问题