调整涉及WASM内结构体的实例化位置。

src/ColorFunctionContext.tsx

@@ -23,8 +23,7 @@ export function useColorFunction(): ColorFunctionContextType {
 }
 
 export function ColorFunctionProvider({ children }: WasmProviderProps) {
-  //@ts-expect-error TS2503
+  const [wasmInstance, setWasmInstance] = useState<typeof funcs | null>(null);
-  const [wasmInstance, setWasmInstance] = useState<Wasm.InitOutput | null>(null);
   const [isPending, startTransition] = useTransition();
   const [error, setError] = useState<Error | null>(null);
 
@@ -43,6 +42,7 @@ export function ColorFunctionProvider({ children }: WasmProviderProps) {
         try {
           await init();
           setWasmInstance(funcs);
+          console.debug('[Load WASM]', 'Loaded');
         } catch (e) {
           console.error('[Load WASM]', e);
           setError(e);

src/page-components/color-compare/HCTCompare.tsx

@@ -4,18 +4,16 @@ import { useColorFunction } from '../../ColorFunctionContext';
 import styles from './CompareLayout.module.css';
 import { CompareMethodProps } from './share-props';
 
-const defaultCompareResult: HctDiffference = new HctDiffference(
-  new Differ(0, 0),
-  new Differ(0, 0),
-  new Differ(0, 0),
-);
-
 export function HCTCompare({
   basic = '000000',
   compare = '000000',
   mode = 'absolute',
 }: CompareMethodProps) {
   const { colorFn } = useColorFunction();
+  const defaultCompareResult: HctDiffference = useMemo(
+    () => new HctDiffference(new Differ(0, 0), new Differ(0, 0), new Differ(0, 0)),
+    [],
+  );
   const differ = useMemo(() => {
     if (!colorFn) {
       return defaultCompareResult;

src/page-components/color-compare/HSLCompare.tsx

@@ -4,18 +4,16 @@ import { useColorFunction } from '../../ColorFunctionContext';
 import styles from './CompareLayout.module.css';
 import { CompareMethodProps } from './share-props';
 
-const defaultCompareResult: HSLDifference = new HSLDifference(
-  new Differ(0, 0),
-  new Differ(0, 0),
-  new Differ(0, 0),
-);
-
 export function HSLCompare({
   basic = '000000',
   compare = '000000',
   mode = 'absolute',
 }: CompareMethodProps) {
   const { colorFn } = useColorFunction();
+  const defaultCompareResult: HSLDifference = useMemo(
+    () => new HSLDifference(new Differ(0, 0), new Differ(0, 0), new Differ(0, 0)),
+    [],
+  );
   const differ = useMemo(() => {
     if (!colorFn) {
       return defaultCompareResult;

src/page-components/color-compare/OKLCHCompare.tsx

@@ -4,18 +4,16 @@ import { useColorFunction } from '../../ColorFunctionContext';
 import styles from './CompareLayout.module.css';
 import { CompareMethodProps } from './share-props';
 
-const defaultCompareResult: OklchDifference = new OklchDifference(
-  new Differ(0, 0),
-  new Differ(0, 0),
-  new Differ(0, 0),
-);
-
 export function OklchCompare({
   basic = '000000',
   compare = '000000',
   mode = 'absolute',
 }: CompareMethodProps) {
   const { colorFn } = useColorFunction();
+  const defaultCompareResult: OklchDifference = useMemo(
+    () => new OklchDifference(new Differ(0, 0), new Differ(0, 0), new Differ(0, 0)),
+    [],
+  );
   const differ = useMemo(() => {
     if (!colorFn) {
       return defaultCompareResult;

src/page-components/color-compare/RGBCompare.tsx

@@ -4,18 +4,16 @@ import { useColorFunction } from '../../ColorFunctionContext';
 import styles from './CompareLayout.module.css';
 import { CompareMethodProps } from './share-props';
 
-const defaultCompareResult: RGBDifference = new RGBDifference(
-  new Differ(0, 0),
-  new Differ(0, 0),
-  new Differ(0, 0),
-);
-
 export function RGBCompare({
   basic = '000000',
   compare = '000000',
   mode = 'absolute',
 }: CompareMethodProps) {
   const { colorFn } = useColorFunction();
+  const defaultCompareResult: RGBDifference = useMemo(
+    () => new RGBDifference(new Differ(0, 0), new Differ(0, 0), new Differ(0, 0)),
+    [],
+  );
   const differ = useMemo(() => {
     if (!colorFn) {
       return defaultCompareResult;

src/page-components/color-compare/ShadeScale.tsx

@@ -5,10 +5,9 @@ import { useColorFunction } from '../../ColorFunctionContext';
 import styles from './CompareLayout.module.css';
 import { CompareMethodProps } from './share-props';
 
-const defaultMixResult: MixReversing = new MixReversing(0, 0, 0, 0);
-
 export function ShadeScale({ basic = '000000', compare = '000000' }: CompareMethodProps) {
   const { colorFn } = useColorFunction();
+  const defaultMixResult: MixReversing = useMemo(() => new MixReversing(0, 0, 0, 0), []);
   const mixFactors = useMemo(() => {
     if (!colorFn) {
       return defaultMixResult;

src/page-components/color-compare/TintScale.tsx

@@ -5,10 +5,9 @@ import { useColorFunction } from '../../ColorFunctionContext';
 import styles from './CompareLayout.module.css';
 import { CompareMethodProps } from './share-props';
 
-const defaultMixResult: MixReversing = new MixReversing(0, 0, 0, 0);
-
 export function TintScale({ basic = '000000', compare = '000000' }: CompareMethodProps) {
   const { colorFn } = useColorFunction();
+  const defaultMixResult: MixReversing = useMemo(() => new MixReversing(0, 0, 0, 0), []);
   const mixFactors = useMemo(() => {
     if (!colorFn) {
       return defaultMixResult;