SolidJS中splitProps与mergeProps的作用及代码示例解析

嘿，我来给你唠唠这段SolidJS代码里的splitProps和mergeProps到底是干啥的，看完你就通透啦！

先说说splitProps的作用 #

在SolidJS里，splitProps是个超实用的工具函数，它能帮你把组件收到的props对象拆分成多个独立的小对象，按你指定的属性分组来划分。这么做的好处是啥呢？比如你需要把不同类别的props传递给不同的子组件，或者只是想把props按逻辑归类管理，用它就不用手动一个个解构，还能完美保留属性的响应性（比如代码里的count是个Accessor，拆分后依然是响应式的）。

像代码里这行：

const [coll1, coll2] = splitProps(props, ["count"], ["listener"]);

就是把传入的props拆成了两个对象：

• coll1里只包含count这个属性
• coll2里只包含listener这个属性

再聊聊mergeProps的作用 #

既然能拆分，那肯定也能合并对吧？mergeProps就是干这个的——它可以把多个拆分后的小props对象重新合并成一个完整的大对象，和原来的props结构完全一致。比如代码里：

const propsBack = mergeProps(coll1, coll2);

执行完这行，propsBack就和最初传入的props对象一模一样啦，所有属性都原封不动地合并回来了。

完整代码示例 #

下面是带注释的完整代码，方便你对照理解：

import { Accessor, mergeProps, splitProps } from "solid-js";

type ButtonProps = {
  count: Accessor<number>;
  listener: (step: number, _event: MouseEvent) => void;
};

export default function Button(props: ButtonProps) {
  // splitProps 帮你把props按指定属性分组拆成小对象
  const [coll1, coll2] = splitProps(props, ["count"], ["listener"]);
  // mergeProps 把拆分后的小对象重新合并成完整的props对象
  const propsBack = mergeProps(coll1, coll2);
}

为啥要这么折腾？ #

可能你会问，拆了又合并回来意义在哪？其实这只是个基础示例，实际开发中，你可能会拆分后把不同的props分组传给不同的子组件，比如把coll1（带count）传给显示计数的子组件，把coll2（带listener）传给处理交互的子组件，这样代码逻辑更清晰，也避免了传递多余属性的问题。而且splitProps会自动处理响应式属性，不用担心拆分后丢失响应性~

内容来源于stack exchange