MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Solid.js实战案例：使用createEffect实现数据同步

2021-03-302.5k 阅读

Solid.js 基础概述

Solid.js 是一个具有创新性的 JavaScript 前端框架，它以细粒度的响应式系统和编译时优化而闻名。与传统的虚拟 DOM 驱动的框架（如 React、Vue 等）不同，Solid.js 在编译阶段就对组件进行分析和优化，从而在运行时能够以高效的方式更新 DOM。

Solid.js 的核心概念之一是信号（Signals）。信号是一种可观察的数据单元，类似于 React 中的状态（state），但有着更底层和高效的实现。例如，通过 createSignal 函数可以创建一个信号：

import { createSignal } from 'solid-js';

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

这里 count 是获取当前值的函数，setCount 是更新值的函数。与 React 不同的是，在 Solid.js 中读取 count() 就像读取一个普通变量，而调用 setCount(newValue) 会触发依赖于该信号的任何副作用或视图更新。

createEffect 原理剖析

createEffect 是 Solid.js 中实现副作用操作的关键函数。它的作用是在依赖的信号值发生变化时，自动执行一段副作用代码。从本质上讲，createEffect 会在组件初始化时运行一次其传入的回调函数，然后跟踪回调函数中读取的所有信号。每当这些信号中的任何一个发生变化时，createEffect 会再次运行该回调函数。

例如，假设有两个信号 name 和 age，并且希望在这两个信号值变化时打印一条日志：

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

const [name, setName] = createSignal('John');
const [age, setAge] = createSignal(30);

createEffect(() => {
  console.log(`Name: ${name()}, Age: ${age()}`);
});

在上述代码中，createEffect 的回调函数读取了 name 和 age 信号。首次运行时，会打印出 Name: John, Age: 30。之后，当通过 setName 或 setAge 改变信号值时，createEffect 的回调函数会再次执行，打印出新的值。

数据同步需求场景分析

在实际开发中，数据同步是一个常见的需求。例如，在一个多表单联动的应用中，一个表单的输入可能会影响另一个表单的状态。或者在一个实时协作的文档编辑场景中，多个用户对文档的修改需要实时同步到各个客户端。

以一个简单的任务管理应用为例，假设我们有一个任务列表，每个任务有一个完成状态。同时，我们有一个统计已完成任务数量的功能。这里就存在数据同步的需求，当任务的完成状态改变时，已完成任务数量需要实时更新。

使用 createEffect 实现任务列表数据同步

  1. 初始化项目： 首先，使用 npm init solid@latest 命令创建一个新的 Solid.js 项目。假设项目名为 task - manager，进入项目目录 cd task - manager，然后安装依赖 npm install。
  2. 定义任务数据结构和信号： 在 src 目录下创建一个 Task.js 文件，定义任务的数据结构和相关信号。
import { createSignal } from'solid-js';

// 任务数据结构
export const Task = (title) => {
  const [isCompleted, setIsCompleted] = createSignal(false);
  return {
    title,
    isCompleted,
    setIsCompleted
  };
};

// 任务列表信号
export const [tasks, setTasks] = createSignal([]);

这里定义了一个 Task 函数，用于创建单个任务对象，每个任务对象包含任务标题 title、完成状态 isCompleted 以及更新完成状态的函数 setIsCompleted。同时，还定义了一个 tasks 信号，用于存储整个任务列表。 3. 实现添加任务功能： 在 src/App.js 文件中，添加一个输入框和一个按钮，用于添加新任务。

import { createEffect, createSignal } from'solid-js';
import { Task, tasks, setTasks } from './Task';

const App = () => {
  const [newTaskTitle, setNewTaskTitle] = createSignal('');

  const addTask = () => {
    if (newTaskTitle()) {
      setTasks([...tasks(), Task(newTaskTitle())]);
      setNewTaskTitle('');
    }
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Enter task title"
        value={newTaskTitle()}
        onInput={(e) => setNewTaskTitle(e.target.value)}
      />
      <button onClick={addTask}>Add Task</button>
    </div>
  );
};

export default App;

在上述代码中，newTaskTitle 信号用于存储输入框中的文本，addTask 函数在点击按钮时，创建一个新的任务并添加到 tasks 列表中。 4. 使用 createEffect 同步已完成任务数量： 继续在 App.js 文件中，添加已完成任务数量的统计和显示功能。

import { createEffect, createSignal } from'solid-js';
import { Task, tasks, setTasks } from './Task';

const App = () => {
  const [newTaskTitle, setNewTaskTitle] = createSignal('');

  const addTask = () => {
    if (newTaskTitle()) {
      setTasks([...tasks(), Task(newTaskTitle())]);
      setNewTaskTitle('');
    }
  };

  const [completedTaskCount, setCompletedTaskCount] = createSignal(0);

  createEffect(() => {
    const count = tasks().filter(task => task.isCompleted()).length;
    setCompletedTaskCount(count);
  });

  return (
    <div>
      <input
        type="text"
        placeholder="Enter task title"
        value={newTaskTitle()}
        onInput={(e) => setNewTaskTitle(e.target.value)}
      />
      <button onClick={addTask}>Add Task</button>
      <p>Completed Tasks: {completedTaskCount()}</p>
    </div>
  );
};

export default App;

这里，completedTaskCount 信号用于存储已完成任务的数量。createEffect 的回调函数会在 tasks 信号变化时运行，通过过滤出已完成的任务并计算其数量，然后更新 completedTaskCount。这样，当任务的完成状态改变或有新任务添加时，已完成任务数量会实时同步更新。

深入理解 createEffect 中的依赖跟踪

在 createEffect 的回调函数中，Solid.js 会自动跟踪读取的信号。例如，在上述任务管理应用中，createEffect 回调函数中的 tasks() 调用使得 createEffect 依赖于 tasks 信号。如果回调函数中有更复杂的逻辑，依赖跟踪同样有效。

假设我们有一个更复杂的任务对象，每个任务除了完成状态外，还有一个优先级属性，并且我们希望根据优先级和完成状态来计算一个综合得分，只有综合得分大于某个阈值的任务才会被统计到已完成任务数量中。

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

// 任务数据结构
export const Task = (title, priority) => {
  const [isCompleted, setIsCompleted] = createSignal(false);
  const getScore = () => isCompleted()? priority * 2 : priority;
  return {
    title,
    isCompleted,
    setIsCompleted,
    getScore
  };
};

// 任务列表信号
export const [tasks, setTasks] = createSignal([]);

const App = () => {
  const [newTaskTitle, setNewTaskTitle] = createSignal('');
  const [newTaskPriority, setNewTaskPriority] = createSignal(1);

  const addTask = () => {
    if (newTaskTitle()) {
      setTasks([...tasks(), Task(newTaskTitle(), newTaskPriority())]);
      setNewTaskTitle('');
      setNewTaskPriority(1);
    }
  };

  const [completedTaskCount, setCompletedTaskCount] = createSignal(0);

  createEffect(() => {
    const count = tasks().filter(task => task.getScore() > 2).length;
    setCompletedTaskCount(count);
  });

  return (
    <div>
      <input
        type="text"
        placeholder="Enter task title"
        value={newTaskTitle()}
        onInput={(e) => setNewTaskTitle(e.target.value)}
      />
      <input
        type="number"
        placeholder="Enter task priority"
        value={newTaskPriority()}
        onInput={(e) => setNewTaskPriority(Number(e.target.value))}
      />
      <button onClick={addTask}>Add Task</button>
      <p>Completed Tasks: {completedTaskCount()}</p>
    </div>
  );
};

export default App;

在这个例子中，createEffect 回调函数依赖于 tasks 信号，因为它读取了 tasks()。同时，tasks 中的每个任务对象的 getScore 方法又依赖于 isCompleted 信号和任务的 priority 属性。当这些信号中的任何一个发生变化时，createEffect 的回调函数都会重新执行，以确保 completedTaskCount 的值是最新的。

createEffect 与视图更新的关系

在 Solid.js 中，视图更新与 createEffect 密切相关。当 createEffect 中的依赖信号发生变化时，不仅会触发 createEffect 回调函数的执行，还会导致相关视图的更新。

以任务管理应用为例，当任务的完成状态改变时，createEffect 会重新计算已完成任务数量，同时包含已完成任务数量的 <p> 元素会自动更新。这是因为 Solid.js 在编译阶段会分析视图中使用的信号，并建立起与 createEffect 类似的依赖关系。

假设我们要在视图中以不同颜色显示不同优先级的任务，并且根据完成状态添加删除线效果。

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

// 任务数据结构
export const Task = (title, priority) => {
  const [isCompleted, setIsCompleted] = createSignal(false);
  const getScore = () => isCompleted()? priority * 2 : priority;
  return {
    title,
    isCompleted,
    setIsCompleted,
    getScore
  };
};

// 任务列表信号
export const [tasks, setTasks] = createSignal([]);

const App = () => {
  const [newTaskTitle, setNewTaskTitle] = createSignal('');
  const [newTaskPriority, setNewTaskPriority] = createSignal(1);

  const addTask = () => {
    if (newTaskTitle()) {
      setTasks([...tasks(), Task(newTaskTitle(), newTaskPriority())]);
      setNewTaskTitle('');
      setNewTaskPriority(1);
    }
  };

  const [completedTaskCount, setCompletedTaskCount] = createSignal(0);

  createEffect(() => {
    const count = tasks().filter(task => task.getScore() > 2).length;
    setCompletedTaskCount(count);
  });

  return (
    <div>
      <input
        type="text"
        placeholder="Enter task title"
        value={newTaskTitle()}
        onInput={(e) => setNewTaskTitle(e.target.value)}
      />
      <input
        type="number"
        placeholder="Enter task priority"
        value={newTaskPriority()}
        onInput={(e) => setNewTaskPriority(Number(e.target.value))}
      />
      <button onClick={addTask}>Add Task</button>
      <p>Completed Tasks: {completedTaskCount()}</p>
      <ul>
        {tasks().map((task, index) => (
          <li
            key={index}
            style={{
              textDecoration: task.isCompleted()? 'line - through' : 'none',
              color: task.getScore() > 4? 'green' : 'black'
            }}
          >
            {task.title} - Priority: {task.getScore()}
            <input
              type="checkbox"
              checked={task.isCompleted()}
              onChange={() => task.setIsCompleted(!task.isCompleted())}
            />
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

在这个视图中，<li> 元素的 textDecoration 和 color 样式依赖于任务的 isCompleted 和 getScore 方法，而这些又依赖于任务的相关信号。因此，当任务的信号发生变化时，不仅 createEffect 会重新计算已完成任务数量，视图中的 <li> 元素样式也会相应更新。

处理 createEffect 中的异步操作

在实际应用中，createEffect 中常常会涉及到异步操作，比如从服务器获取数据、处理文件上传等。在 Solid.js 中处理异步操作需要一些特殊的注意事项。

假设我们在任务管理应用中，希望在任务完成时向服务器发送一个请求，标记该任务为已完成。同时，我们要确保在请求成功或失败时更新任务的本地状态。

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

// 任务数据结构
export const Task = (title, priority) => {
  const [isCompleted, setIsCompleted] = createSignal(false);
  const [isUpdating, setUpdating] = createSignal(false);
  const [updateError, setUpdateError] = createSignal(null);

  const markAsCompleted = async () => {
    setUpdating(true);
    try {
      // 模拟服务器请求
      await new Promise(resolve => setTimeout(resolve, 1000));
      setIsCompleted(true);
    } catch (error) {
      setUpdateError(error);
    } finally {
      setUpdating(false);
    }
  };

  return {
    title,
    isCompleted,
    isUpdating,
    updateError,
    markAsCompleted
  };
};

// 任务列表信号
export const [tasks, setTasks] = createSignal([]);

const App = () => {
  const [newTaskTitle, setNewTaskTitle] = createSignal('');
  const [newTaskPriority, setNewTaskPriority] = createSignal(1);

  const addTask = () => {
    if (newTaskTitle()) {
      setTasks([...tasks(), Task(newTaskTitle(), newTaskPriority())]);
      setNewTaskTitle('');
      setNewTaskPriority(1);
    }
  };

  createEffect(() => {
    tasks().forEach(task => {
      if (task.isCompleted()) {
        task.markAsCompleted();
      }
    });
  });

  return (
    <div>
      <input
        type="text"
        placeholder="Enter task title"
        value={newTaskTitle()}
        onInput={(e) => setNewTaskTitle(e.target.value)}
      />
      <input
        type="number"
        placeholder="Enter task priority"
        value={newTaskPriority()}
        onInput={(e) => setNewTaskPriority(Number(e.target.value))}
      />
      <button onClick={addTask}>Add Task</button>
      <ul>
        {tasks().map((task, index) => (
          <li key={index}>
            {task.title} - {task.isUpdating()? 'Updating...' : task.updateError()? `Error: ${task.updateError().message}` : ''}
            <input
              type="checkbox"
              checked={task.isCompleted()}
              onChange={() => task.markAsCompleted()}
            />
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

在上述代码中，Task 对象中增加了 isUpdating 和 updateError 信号来跟踪请求状态。markAsCompleted 方法是一个异步函数，用于模拟向服务器发送请求。createEffect 会在任务完成时调用 markAsCompleted 方法。同时，视图中根据 isUpdating 和 updateError 信号显示相应的状态信息。

优化 createEffect 的性能

虽然 Solid.js 的 createEffect 已经相对高效，但在处理复杂应用时，仍可以采取一些优化措施来进一步提升性能。

  1. 减少不必要的依赖： 仔细检查 createEffect 回调函数中的代码，确保只依赖真正需要的信号。例如，在任务管理应用中，如果某个 createEffect 只关心已完成任务的数量，那么不应该在回调函数中读取未完成任务的相关信息，以免在未完成任务状态变化时触发不必要的 createEffect 重新执行。
  2. 防抖和节流： 如果 createEffect 依赖的信号变化非常频繁，可能会导致 createEffect 回调函数频繁执行，影响性能。可以使用防抖（Debounce）或节流（Throttle）技术来控制 createEffect 的执行频率。例如，使用 lodash 库中的 debounce 函数：
import { createEffect, createSignal } from'solid-js';
import { debounce } from 'lodash';

// 任务列表信号
export const [tasks, setTasks] = createSignal([]);

const App = () => {
  const [newTaskTitle, setNewTaskTitle] = createSignal('');

  const addTask = () => {
    if (newTaskTitle()) {
      setTasks([...tasks(), { title: newTaskTitle(), isCompleted: false }]);
      setNewTaskTitle('');
    }
  };

  const expensiveOperation = debounce(() => {
    // 这里是一些复杂的计算或操作
    console.log('Expensive operation triggered');
  }, 300);

  createEffect(() => {
    expensiveOperation();
  });

  return (
    <div>
      <input
        type="text"
        placeholder="Enter task title"
        value={newTaskTitle()}
        onInput={(e) => setNewTaskTitle(e.target.value)}
      />
      <button onClick={addTask}>Add Task</button>
    </div>
  );
};

export default App;

在这个例子中，expensiveOperation 函数被 debounce 处理，createEffect 每次触发时，expensiveOperation 不会立即执行，而是在最后一次触发后的 300 毫秒后执行，这样可以避免频繁执行复杂操作。 3. 批处理更新： Solid.js 本身在一定程度上会进行批处理更新，但在某些情况下，手动进行批处理可以进一步优化性能。例如，当需要同时更新多个信号时，可以使用 batch 函数。

import { createEffect, createSignal, batch } from'solid-js';

// 任务数据结构
export const Task = (title) => {
  const [isCompleted, setIsCompleted] = createSignal(false);
  return {
    title,
    isCompleted,
    setIsCompleted
  };
};

// 任务列表信号
export const [tasks, setTasks] = createSignal([]);

const App = () => {
  const addTasks = () => {
    batch(() => {
      setTasks([...tasks(), Task('Task 1'), Task('Task 2')]);
      // 这里可以同时更新其他相关信号
    });
  };

  return (
    <div>
      <button onClick={addTasks}>Add Multiple Tasks</button>
    </div>
  );
};

export default App;

在 addTasks 函数中，使用 batch 函数将多个信号更新操作包裹起来，这样 Solid.js 会将这些更新作为一个批次处理，减少不必要的视图更新和 createEffect 重新执行。

通过以上对 createEffect 在 Solid.js 中实现数据同步的详细讲解，包括原理分析、实际案例、异步操作处理以及性能优化等方面，希望读者能够深入理解并熟练运用 createEffect 来解决前端开发中的数据同步问题，构建高效、响应式的前端应用。在实际项目中，根据具体需求和场景，灵活运用这些知识和技巧，可以提升应用的质量和用户体验。同时，随着 Solid.js 的不断发展和更新，开发者还需要持续关注官方文档和社区动态，以获取最新的功能和优化建议。