React Hooks に基づく小さな状態管理の詳細な説明

輸入 {
  急送、
  状態設定アクション、
  コールバックの使用、
  使用効果、
  使用Reducer、
  使用Ref、
  使用状態、
} を 'react' から取得します。

/**
 * https://github.com/facebook/react/blob/bb88ce95a87934a655ef842af776c164391131ac/packages/shared/objectIs.js を参照してください
 * Object.isポリフィルをインライン化して、消費者が独自のポリフィルを出荷する必要を回避しました。
 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
 */
関数は(x: 任意、y: 任意): ブール値 {
  戻り値: (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y);
}

const objectIs = typeof Object.is === 'function' ? Object.is : is;

/**
 * https://github.com/facebook/react/blob/933880b4544a83ce54c8a47f348effe725a58843/packages/shared/shallowEqual.js を参照してください
 * オブジェクトのキーを反復処理してfalseを返すことで等価性を実行します
 * いずれかのキーの値が引数間で厳密に等しくない場合。
 * すべてのキーの値が厳密に等しい場合は true を返します。
 */
関数 shallowEqual(objA: any, objB: any): ブール値 {
  (objA, objB) の場合
    true を返します。
  }

  もし （
    objA の型 !== 'オブジェクト' ||
    objA === null ||
    objB の型 !== 'オブジェクト' ||
    objB === null
  ）{
    false を返します。
  }

  定数 keysA = Object.keys(objA);
  定数 keysB = Object.keys(objB);

  (keysAの長さ!==keysBの長さ)の場合{
    false を返します。
  }

  // A のキーが B と異なるかどうかをテストします。
  (i = 0 とします; i < keysA.length; i++) {
    もし （
      !Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||
      !is(objA[keysA[i]], objB[keysA[i]])
    ）{
      false を返します。
    }
  }

  true を返します。
}

const useForceUpdate = () => useReducer(() => ({}), {})[1] を VoidFunction として;

型 ISubscriber<T> = (前の状態: T、次の状態: T) => void;

エクスポートインターフェースISharedState<T> {
  /** データを静的に取得します。非コンポーネントでの使用や、データがビューにバインドされていない場合に適しています*/
  取得: () => T;
  /** データを変更し、新しい値を割り当てる*/
  設定: Dispatch<SetStateAction<T>>;
  /** (浅い) マージ更新データ*/
  更新: Dispatch<Partial<T>>;
  /** フックメソッドは、コンポーネントで使用するのに適したデータを取得します。データが変更されると、コンポーネントは自動的に再レン​​ダリングされます*/
  使用: () => T;
  /** サブスクリプションデータの変更 */
  サブスクライブ: (cb: ISubscriber<T>) => () => void;
  /** データの変更を購読解除する */
  登録解除: (cb: ISubscriber<T>) => void;
  /** いくつかの状態を除外する */
  usePick<R>(ピッカー: (状態: T) => R, 依存関係: readonly any[]): R;
}

エクスポート型 IReadonlyState<T> = Omit<ISharedState<T>, 'set' | 'update'>;

/**
 * 異なるインスタンス間で共有できる状態を作成します * @param initialState 初期データ */
エクスポートconst createSharedState = <T>(initialState: T): ISharedState<T> => {
  状態を initialState とします。
  定数サブスクライバー: ISubscriber<T>[] = [];

  //状態の変更をサブスクライブする const subscribe = (subscriber: ISubscriber<T>) => {
    subscribers.push(サブスクライバー);
    return () => 購読を解除します(購読者);
  };

  // 状態変更の購読を解除する const unsubscribe = (subscriber: ISubscriber<T>) => {
    定数インデックス = subscribers.indexOf(subscriber);
    インデックス > -1 && subscribers.splice(index, 1);
  };

  // 最新の状態を取得する
  const get = () => 状態;

  // 状態を変更する
  const set = (次: SetStateAction<T>) => {
    定数 prevState = 状態;
    // @ts を無視
    const nextState = typeof next === 'function' ? next(prevState): next;
    オブジェクトが状態、次の状態である場合
      戻る;
    }
    状態 = 次の状態;
    サブスクライバー.forEach((cb) => cb(前の状態、状態));
  };

  //フックの使用状況の最新状態を取得する const use = () => {
    定数 forceUpdate = useForceUpdate();

    使用効果(() => {
      isMounted = true とします。
      // 最初に更新されたデータを使用できないことを避けるために、マウント後すぐにコンポーネントを更新します。forceUpdate();
      定数un = subscribe(() => {
        if (!isMounted) 戻り値:
        強制更新();
      });
      戻り値 () => {
        国連（）;
        isMounted = false;
      };
    }, []);

    状態を返します。
  };

  const usePick = <R>(ピッカー: (s: T) => R, deps = []) => {
    定数ref = useRef<any>({});

    ref.current.picker = ピッカー;

    const [pickedState, setPickedState] = useState<R>(() =>
      ref.current.picker(状態)、
    );

    ref.current.oldState = 選択された状態;

    定数sub = useCallback(() => {
      const selectedOld = ref.current.oldState;
      const selectedNew = ref.current.picker(state);
      if (!shallowEqual(選択された古いもの、選択された新しいもの)) {
        //pickedNew が関数にならないようにする
        選択された新しい状態を設定します。
      }
    }, []);

    使用効果(() => {
      定数 un = subscribe(sub);
      un を返します。
    }, []);

    使用効果(() => {
      サブ();
    }, [...依存関係]);

    選択された状態を返します。
  };

  戻る {
    得る、
    セット、
    更新: (入力: Partial<T>) => {
      設定((pre) => ({
        ...前、
        ...入力、
      }));
    },
    使用、
    購読する、
    登録解除、
    ピックを使用する、
  };
};

// 状態インスタンスを作成します。const countState = createSharedState(0);

定数A = () => {
  // コンポーネント内のフックを使用してレスポンシブなデータを取得します const count = countState.use();
  <div>A: {count}</div> を返します。
};

定数B = () => {
  // データを変更するには set メソッドを使用します return <button onClick={() => countState.set(count + 1)}>Add</button>;
};

定数C = () => {
  戻る （
    <ボタン
      クリックすると{() => {
        // get メソッドを使用してデータを取得します console.log(countState.get());
      }}
    >
      得る
    </ボタン>
  );
};

定数App = () => {
  戻る （
    <>
      <あ />
      <B />
      <C />
    </>
  );
};

const 複合状態 = 共有状態を作成します({
  : 0,
  b: {
    c: 0,
  },
});

定数A = () => {
  const a = complexState.usePick((state) => state.a);
  <div>A: {a} を返します。
};

/**
 * 導出された（または計算された）状態
 * ```ts
 * const count1 = createSharedState(1);
 * const count2 = createSharedState(2);
 * const count3 = createDerivedState([count1, count2], ([n1, n2]) => n1 + n2);
 * ```
 * @param ストア
 * @param fn
 * @param 初期値
 * @戻り値
 */
エクスポート関数createDerivedState<T = any>(
  ストア: IReadonlyState<any>[]、
  fn: (値: any[]) => T,
  オプション: {
    /**
     * 同期的に応答するかどうか * @default false
     */
    同期?: ブール値;
  },
): IReadonlyState<T> & {
  停止: () => void;
} {
  const { sync } = { sync: false, ...opts };
  値を: any[] = stores.map((it) => it.get());
  const innerModel = createSharedState<T>(fn(values));

  promise を次のように記述します: Promise<void> | null = null;

  const uns = ストア.map((it, i) => {
    戻ります。subscribe((_old, newValue) => {
      値[i] = 新しい値;

      （同期）の場合{
        innerModel.set(() => fn(values));
        戻る;
      }

      // 非同期更新プロミス =
        約束
        Promise.resolve().then(() => {
          innerModel.set(() => fn(values));
          プロミス = null;
        });
    });
  });

  戻る {
    取得: innerModel.get、
    使用: innerModel.use、
    サブスクライブ: innerModel.subscribe、
    登録解除: innerModel.unsubscribe、
    usePick: innerModel.usePick、
    停止: () => {
      uns.forEach((un) => un());
    },
  };
}

定数 countState = createSharedState(0);

定数App = () => {
  使用効果(() => {
    間隔を設定する(() => {
      コンソールにログ出力します。
    }, 1000);
  }, []);
  // 戻る ...
};

定数 countState = createSharedState(0);

constコンテンツ = () => {
  countState を定数で指定します。
  <div>{count}</div> を返します。
};

定数A = () => (
  <ボタン
    クリックすると{() => {
      ダイアログ.info({
        タイトル: 「アラート」
        コンテンツ: <コンテンツ />,
      });
    }}
  >
    開ける
  </ボタン>
);