mobx-signal

本库有两个独立的功能：

自动包裹 observer()

为您的组件自动包裹 observer()

在入口文件中引入：

import { enableAutoWrapObserver } from "@dpdfe/mobx-signal";

enableAutoWrapObserver({
  // 自动包裹策略
  // 如果要自动全包裹，则直接return true
  // 如果指定某些情况才包裹，可以根据传入的组件进行包裹。
  // 如第三方库antd等都不要包裹，仅我们自己的组件包裹。
  // 可配合webpack插件等，将你src目录中的组件的displayName自动添加$$$
  // 如：若函数组件的函数名以$$$结尾才包裹：
  // return Component.name.endsWith('$$$') || Component.displayName.endsWith('$$$')
  addObserverIf(Component) {
    return true;
  }
});

signal

注意，不需要上述方法中的自动包裹 observer()，您也可以使用 signal。

有两种方法：使用 useSignal 创建，或使用 signal() 配合 useLocalObservable 在 hooks 组件中创建；

useSignal

直接使用 {count}，不要使用 {count.value}，以达到最高性能。

import { signal, useSignal } from "@dpdfe/mobx-signal";

export default function App() {
  const count = useSignal(0);
  console.log("Parent render");

  return (
    <>
      <button onClick={count.value++}>increment</button>
      useSignal: {count}
    </>
  );
}

signal()

可以看到在点击按钮时，父子组件均不会重新渲染(父子里面的console.log在点击按钮时，均不会打印)，仅 {store.username} 部分会重新渲染。

import { signal, useSignal } from "@dpdfe/mobx-signal";

function Parent() {
  const store = useLocalObservable(() => ({
    username: signal("zhangsan"),
    changeUsername() {
      store.username.value = "username" + new Date().getTime();
    },
  }));

  console.log("Parent render");

  return (
    <>
      <button onClick={store.changeUsername}>changeUsername</button>
      <SignalChild store={store} />
    </>
  );
}


function SignalChild({ store }: any) {
  console.log("SignalChild render");
  return <div>SignalChild Child: {store.username}</div>;
}

export default Parent;