什么？React 中可以写 SolidJS 了？SolidJS 官方出手了 🚀🚀🚀

前言

想在 React 中体验 SolidJS 的高效状态管理？react-solid-state 来了！

往期精彩推荐

• 🚀🚀🚀 Prettier 3.6.0 正式发布，支持 OXC⚓️、Hermes ！更快的体验⚡️
• 🚀🚀🚀Prisma ORM 6.10.0 重大更新，VSCode 集成，远程 MCP ，更加智能了！
• 🚀🚀🚀恭喜 Rolldown 获得 JS 开源奖年度突破奖，2025 年 JS 开源奖典礼回顾！🎉🎉🎉
• 更多精彩文章欢迎关注我的公众号：萌萌哒草头将军

正文

react-solid-state 是一个轻量级库，而且是 SolidJS 官方出品的库，旨在将 SolidJS 的反应式状态管理引入 React 生态。它通过自动依赖跟踪和细粒度更新，解决了 React 中常见的性能瓶颈和状态管理复杂性，尤其适合函数式组件。本文将详细解析它的核心特性、使用方法以及适用场景，帮助你快速上手并评估是否适合你的项目！

什么是 react-solid-state？

SolidJS 是一个以反应性为核心的 JavaScript 框架，强调高效的 DOM 更新和自动依赖跟踪。相比 React 的 useState 和 useEffect，SolidJS 的状态管理更简洁，无需手动声明依赖数组。react-solid-state 则是一个桥梁，让 React 开发者无需切换框架，就能体验 SolidJS 的状态管理优势。

核心特性：

• 自动依赖跟踪 ：无需像 useEffect 那样手动指定依赖，状态更新自动触发相关组件重渲染。
• 嵌套 Hooks 支持：可以在 Effects 中创建子 Effects，打破 React Hooks 的限制，增加灵活性。
• Solid Stores：类似 React 的对象状态，支持嵌套状态管理。
• 与 React Hooks 兼容：只支持函数式组件，与现代 React 开发流程无缝集成。

安装与配置

开始使用 react-solid-state 非常简单。首先，通过 npm 或 yarn 安装：

npm install react-solid-state

安装后，你可以通过两种方式集成：withSolid 高阶组件（HOC）或 useObserver Hook。

使用示例

以下是两个典型的使用场景，展示如何在 React 中使用 react-solid-state 的状态管理。

示例 1：使用 withSolid 创建交互组件

import { withSolid, createSignal } from 'react-solid-state';
import React from 'react';

const WelcomeComponent = withSolid(props => {
  const [recipient, setRecipient] = createSignal('John');
  return () => (
    <div onClick={() => setRecipient('Jake')}>
      Hello {recipient()}
    </div>
  );
});

export default WelcomeComponent;

注意 recipient() 的调用方式，这是 SolidJS 的 getter 函数，用于访问状态值。

示例 2：使用 useObserver 实现计数器

import { useObserver, createSignal, createEffect, onCleanup } from 'react-solid-state';
import React from 'react';

const CounterComponent = props => {
  const [count, setCount] = createSignal(0);
  createEffect(() => {
    const timer = setInterval(() => setCount(c => c + 1), 1000);
    onCleanup(() => clearInterval(timer));
  });
  return useObserver(() => <div>Count: {count()}</div>);
};

export default CounterComponent;

与 React 状态管理的对比

React 的状态管理（如 useState 和 useEffect）虽然功能强大，但在以下场景下可能显得繁琐：

• 依赖管理 ：useEffect 需要手动指定依赖数组，遗漏或错误可能导致 bug。
• 性能开销 ：React 的组件可能因状态变化频繁重渲染，需使用 useMemo 或 useCallback 优化。
• 复杂状态：嵌套对象状态管理需要额外的库（如 Immer）或手动处理。

react-solid-state 的优势在于：

• 零依赖跟踪：自动检测状态依赖，简化副作用逻辑。
• 细粒度更新：只更新受影响的 DOM 节点，提升性能。
• 简洁语法：减少样板代码，让逻辑更清晰。

例如，React 的计数器实现可能需要：

import React, { useState, useEffect } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => setCount(c => c + 1), 1000);
    return () => clearInterval(timer);
  }, []);
  return <div>Count: {count}</div>;
};

相比之下，react-solid-state 的实现更简洁，且无需担心依赖数组。

如果你熟悉 React Hooks，学习 react-solid-state 只需要几个小时，就能显著提升状态管理的效率！

最后

react-solid-state 为 React 开发者打开了一扇通往 SolidJS 反应式编程的大门。它通过自动依赖跟踪和细粒度更新，让状态管理更简单、更高效。虽然目前仍处于实验阶段，但它的潜力不容忽视。如果你想优化 React 项目的性能，或者对新的状态管理方式感兴趣，不妨试试这个库！

github.com/solidjs/rea...

今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！

往期精彩推荐

• 🚀🚀🚀 Prettier 3.6.0 正式发布，支持 OXC⚓️、Hermes ！更快的体验⚡️
• 🚀🚀🚀Prisma ORM 6.10.0 重大更新，VSCode 集成，远程 MCP ，更加智能了！
• 🚀🚀🚀恭喜 Rolldown 获得 JS 开源奖年度突破奖，2025 年 JS 开源奖典礼回顾！🎉🎉🎉
• 更多精彩文章欢迎关注我的公众号：萌萌哒草头将军