ARTS-WEEK9(23.10.9-23.10.15)

type Fn = (...params: any) => any
function memoize(fn: Fn): Fn {    const idPool = new Map<unknown, number>()    const cache: Map<string, ReturnType<Fn>> = new Map()
    return function (...args:Parameters<Fn>): ReturnType<Fn>{        const key = args.map(getId).join(',')        const hasKey = cache.has(key)        if(hasKey) {            return cache.get(key)!        }
        const res = fn(...args)        cache.set(key,res)        return res    }
    function getId(o: unknown): number {        const hasO = idPool.has(o)        if (hasO) {            return idPool.get(o)!        }        const id = idPool.size        idPool.set(o, id)        return id    }}

// 没有jsx的编辑模式 暂用JavaScript代替import { useState } from 'react'// useStatefunction ToggleButton() {  const [isToggled, setIsToggled] = useState(false)
  function handleClick() {    setIsToggled(!isToggled)  }
  return <button onClick={handleClick}>{isToggled ? 'ON' : 'OFF'}</button>}
import { useReducer } from 'react'
const initialState = { count: 0 }
function reducer(state, action) {  switch (action.type) {    case 'increment':      return { count: state.count + 1 }    case 'decrement':      return { count: state.count - 1 }    default:      throw new Error()  }}// useReducerfunction Counter() {  const [state, dispatch] = useReducer(reducer, initialState)
  return (    <div>      <p>Count: {state.count}</p>      <button onClick={() => dispatch({ type: 'increment' })}>+</button>      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>    </div>  )}

import {useState, useReducer} from "react";
const third = (x) => x;
export default function App() {  const [first, setFirst] = useState(0);  const [second, setSecond] = useReducer((x) => x, 0, third);
  console.log("render"); //sy-log
  return (    <div className="App">      <button onClick={() => setFirst(0)}>first：{first}</button>      <button onClick={() => setSecond(0)}>second: {second}</button>    </div>  );}