React

function App() {
  const htmlSnippet = '<div style="color: skyblue">lark</div>';
  // 类似 v-html
  return <div dangerouslySetInnerHTML={{ __html: htmlSnippet }}></div>;
}

pnpm add @babel/core @babel/cli @babel/preset-env @babel/preset-react -D

// requestIdleCallback 示例
const largeList: (() => void)[] = [];
const largeListLen = 1000;
function genLargeList() {
  for (let i = 0; i < largeListLen; i++) {
    largeList.push(() => {
      document.body.innerHTML += `<div>largeListItem-${i}</div>`;
    });
  }
}
genLargeList();
 
const workLoop: IdleRequestCallback = (deadline) => {
  if (deadline.timeRemaining() > 1 && largeList.length > 0) {
    const fn = largeList.shift()!;
    fn();
  }
  requestIdleCallback(workLoop);
};
requestIdleCallback(workLoop, { timeout: 1000 });

// MessageChannel 示例
const msgChan = new MessageChannel();
msgChan.port1.onmessage = (ev) => {
  // msgChan.port1 receive: Message from msgChan.port2
  console.log("msgChan.port1 receive:", ev.data);
  msgChan.port1.postMessage("Reply from msgChan.port1");
};
msgChan.port2.onmessage = (ev) => {
  // msgChan.port2 receive: Reply from msgChan.port1
  console.log("msgChan.port2 receive:", ev.data);
};
msgChan.port2.postMessage("Message from msgChan.port2");

type ReactNode =
  | null
  | undefined
  | boolean
  | number
  | string
  | ReactElement
  | ReactNode[];
 
const Comp: ComponentType<IProps> = (props) => {
  const element: JSX.Element = <>Hello, React!</>;
  return element;
};
 
const HOC = (FC: FunctionComponent<IProps>) => {
  const element: ReactElement = <FC />;
  return element;
};
 
// JSX.Element, React.ReactElement ≈ Vue.VNode
// React.ComponentType, React.FC ≈ Vue.RenderFunction
// <FunctionComponent /> ≈ Component function call

import { createRoot } from "react-dom/client";
import mitt from "mitt";
 
const emitter = mitt();
 
const handlerA = (args: unknown) => console.log("[handlerA] args:", args);
const handlerB = (args: unknown) => console.log("[handlerB] args:", args);
emitter.on("eventA", handlerA);
emitter.on("eventB", handlerB);
emitter.on("*", (evName, args) => console.log("[*]:", evName, args));
 
createRoot(document.getElementById("root")!).render(
  <>
    <button onClick={() => emitter.emit("eventA", { a: 1 })}>emitA</button>
    <button onClick={() => emitter.emit("eventB", { b: 2 })}>emitB</button>
    <button onClick={() => emitter.off("eventA", handlerA)}>offA</button>
    <button onClick={() => emitter.off("eventB", handlerB)}>offB</button>
    <button onClick={() => emitter.all.clear()}>clear</button>
  </>,
);

import { useRef, useState, type ChangeEvent } from "react";
 
export default function App() {
  const [val, setVal] = useState("val");
  const handleChange = (ev: ChangeEvent<HTMLInputElement>) => {
    setVal(ev.target.value);
    console.log("val:", ev.target.value);
  };
 
  let val2 = "val2";
  const inputRef = useRef<HTMLInputElement>(null);
  const handleInput2 = (ev: ChangeEvent<HTMLInputElement>) => {
    val2 = inputRef.current?.value ?? "";
    console.log("val2:", val2);
  };
 
  const fileRef = useRef<HTMLInputElement>(null);
  const handleUpload = () => {
    console.log("files:", fileRef.current?.files);
  };
 
  return (
    <>
      {/* 受控组件 */}
      <input type="text" value={val} onChange={handleChange} />
      {/* 非受控组件 */}
      <input
        type="text"
        ref={inputRef}
        defaultValue={val2}
        onChange={handleInput2}
      />
      {/* 特殊的非受控组件 */}
      <input type="file" ref={fileRef} onChange={handleUpload} />
    </>
  );
}

const [state /** 状态 */, setState /** 更新状态的函数 */] =
  useState(initialVal | () => initialVal /** 状态的初始值 */);

import { useState } from "react";
 
export default function App() {
  const [curVal, setCurVal] = useState(0);
  const handleClick = () => {
    // 传递一个新值 newVal
    setCurVal(curVal + 1);
    setCurVal(curVal + 1); // 跳过更新
    setCurVal(curVal + 1); // 跳过更新
    console.log("[handleClick] curVal:", curVal);
  };
 
  const handleClick2 = () => {
    // 传递一个更新函数 (preVal) => newVal
    setCurVal((curVal /** 1 */) => curVal + 1);
    setCurVal((curVal /** 2 */) => curVal + 1);
    setCurVal((curVal /** 3 */) => curVal + 1);
    console.log("[handleClick2] curVal:", curVal);
  };
 
  return (
    <>
      <div>curVal: {curVal}</div>
      <button onClick={handleClick}>curVal += 1</button>
      <button onClick={handleClick2}>curVal += 3</button>
    </>
  );
}

const [
  state, // 状态
 
  // dispatch(action) => reducer(state, action)
  // dispatch 接收一个 action, 派发 reducer 的调用
  // 以根据不同的 action 更新状态, 并触发组件更新
  dispatch
] = useReducer(
  // reducer: (state, action) => newState
  // reducer 根据不同的 action 更新状态的纯函数
  reducer,
 
  // 状态的初始值
  initialVal,
 
  // 初始化状态的函数, 返回 (修改后的) initialVal
  // 如果传递了 init 函数, 则使用 init 函数的返回值作为状态的初始值, 否则使用 initialVal
  init?,
);

import { useReducer } from "react";
 
interface IState {
  cnt: number;
}
 
interface IAction {
  type: "add" | "sub";
  delta: number;
}
 
export default function App() {
  const initialVal: IState = { cnt: 0 };
 
  const reducer = (state: IState, action: IAction) => {
    switch (action.type) {
      case "add":
        return { cnt: state.cnt + action.delta };
      case "sub":
        return { cnt: state.cnt - action.delta };
      default:
        return state;
    }
  };
 
  const init = (state: IState) => {
    state.cnt += 528;
    return state; // { cnt: 528 }
  };
 
  const [state, dispatch] = useReducer(reducer, initialVal, init);
  return (
    <>
      <div>state.cnt: {state.cnt}</div>
      <button onClick={() => dispatch({ type: "add", delta: 1 })}>+1</button>
      <button onClick={() => dispatch({ type: "sub", delta: 1 })}>-1</button>
    </>
  );
}

const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)

// isPending = true: 正在过渡
// isPending = false: 过渡结束
const [
  isPending, // boolean
  startTransition, // (callback: () => void) => void
] = useTransition();

// React 的优先级
const Immediate = 1; // 立即执行, 例如动画
const UserBlocking = 2; // 用户交互
const Normal = 3; // 用户交互
const Low = 4; // 低优先级
const Idle = 5; // 空闲时执行, 例如 console.log()

const deferredVal = useDeferredValue(val);

import { useDeferredValue, useState } from "react";
 
export default function App() {
  const list = Array.from({ length: 1000 }, (_, idx) => {
    const arr = new Uint8Array(8);
    crypto.getRandomValues(arr);
    return {
      id: idx,
      name: Array.from(arr, (b) => b.toString(16).padStart(2, "0"))
        .join("")
        .slice(0, 8),
      age: Math.floor(Math.random() * 100),
    };
  });
 
  const [val, setVal] = useState("");
  const deferredVal = useDeferredValue(val);
  const isDeferred = deferredVal !== val;
  const findItem = () => {
    console.log("[findItem] val:", val);
    console.log("[findItem] deferredVal:", deferredVal);
    console.log("[findItem] isDeferred:", isDeferred);
    return list.filter((item) => item.name.includes(deferredVal));
  };
 
  return (
    <>
      <input value={val} onChange={(e) => setVal(e.target.value)} />
      {findItem().map((item) => (
        <div key={item.id}>
          <div>name: {item.name}</div>
          <div>age: {item.age}</div>
        </div>
      ))}
    </>
  );
}

// effect 副作用函数
// destructor 清理函数
// effect: () => void | destructor
 
// useEffect 无返回值
useEffect(
  effect, // effect 副作用函数, 返回一个 destructor 清理函数
  deps, // deps 依赖项数组
);

// effect 副作用函数
// destructor 清理函数
// effect: () => void | destructor
 
// useEffect 无返回值
useLayoutEffect(
  effect, // effect 副作用函数, 返回一个 destructor 清理函数
  deps, // 依赖项数组
);

import { useEffect, useLayoutEffect } from "react";
 
export default function App() {
  useEffect(() => {
    const box = document.getElementById("box")!;
    box.style.opacity = "1"; // 不透明度
  }, []);
 
  useLayoutEffect(() => {
    const box2 = document.getElementById("box2")!;
    box2.style.opacity = "1"; // 不透明度
  }, []);
 
  return (
    <>
      {/* 使用 useEffect(effect, deps), effect 异步执行, 有淡入过渡 */}
      <div className="h-20 w-20 bg-lime-200 opacity-0 duration-[5s]" id="box" />
      {/* 使用 useLayoutEffect(effect, deps), effect 同步执行, 没有淡入过渡 */}
      <div
        className="h-20 w-20 bg-lime-200 opacity-0 duration-[5s]"
        id="box2"
      />
    </>
  );
}

const [state /* 状态 */, setState] = useState(initialVal);
const refVal /* 普通 JS 对象 */ = useRef(initialVal);

import React, { useRef, useState } from "react";
 
const App: React.FC = () => {
  // 每次组件更新时, 都会重新初始化 num 为 0
  let num = 0;
  // useRef 只会在组件挂载时执行 1 次, 组件更新时, 不会重新创建 refNum
  const refNum = useRef(0);
  const [cnt, setCnt] = useState(0);
  const handleClick = () => {
    // setCnt 可以被批处理, 异步更新 cnt 的值, 调用 setCnt 会触发组件更新
    setCnt(cnt + 1);
    num = cnt;
    refNum.current = cnt;
  };
 
  return (
    <div>
      <button onClick={handleClick}>+1</button>
      <div>cnt: {cnt}</div>
      {/* num 始终是 0 */}
      <div>num: {num}</div>
      {/* refNum.current 始终比 cnt 小 1 */}
      <div>refNum.current: {refNum.current}</div>
    </div>
  );
};
 
export default App;

useImperativeHandle(
  ref, // 父组件通过子组件的 props 传递的 ref 对象
  () => {
    return {}; // 返回子组件暴露的属性, 方法
  }, // createHandle
  deps, // 依赖项数组, 可选
);

const ctx = createContext(initialVal);

import { createContext, useContext, useState } from "react";
 
interface ICtxType {
  cnt: number;
  setCnt: (cnt: number) => void;
}
 
const CntCtx = createContext<ICtxType>({} as ICtxType /* initialVal */);
 
function Child() {
  const ctxVal = useContext<ICtxType>(CntCtx); // ctxVal: readonly
  const { cnt, setCnt } = ctxVal;
  return (
    <>
      <div className="border-t">Child cnt: {cnt} </div>
      <button onClick={() => setCnt(cnt + 1)}>Child addCnt</button>
    </>
  );
}
 
function Parent() {
  const ctxVal = useContext<ICtxType>(CntCtx); // ctxVal: readonly
  const { cnt, setCnt } = ctxVal;
  return (
    <>
      <div className="border-t">Parent cnt: {cnt}</div>
      <button onClick={() => setCnt(cnt + 1)}>Parent addCnt</button>
      <Child />
    </>
  );
}
 
export default function App() {
  const [outerCnt, setOuterCnt] = useState(123);
  const [innerCnt, setInnerCnt] = useState(456);
  return (
    <div>
      <div>App outerCnt: {outerCnt}</div>
      <button onClick={() => setOuterCnt(outerCnt + 1)}>App addOuterCnt</button>
 
      <div>App innerCnt: {innerCnt}</div>
      <button onClick={() => setInnerCnt(innerCnt + 1)}>App addInnerCnt</button>
 
      {/* props 键名必须是 value */}
      <CntCtx.Provider value={{ cnt: outerCnt, setCnt: setOuterCnt }}>
        <Parent />
        <CntCtx.Consumer>
          {(ctxVal) => "[outer] ctxVal: " + JSON.stringify(ctxVal)}
        </CntCtx.Consumer>
 
        {/* props 键名必须是 value */}
        <CntCtx.Provider value={{ cnt: innerCnt, setCnt: setInnerCnt }}>
          <Parent />
          <CntCtx.Consumer>
            {(ctxVal) => "[inner] ctxVal: " + JSON.stringify(ctxVal)}
          </CntCtx.Consumer>
        </CntCtx.Provider>
      </CntCtx.Provider>
    </div>
  );
}

import React, { useState } from "react";
 
interface IProps {
  user: { name: string };
}
 
const Boy = (props: IProps) => {
  console.log("Boy update...");
  return <div>Boy name: {props.user.name}</div>;
};
 
const Girl = React.memo((props: IProps) => {
  console.log("Girl update...");
  return <div>Girl name: {props.user.name}</div>;
});
 
export default function App() {
  const [inputVal, setInputVal] = useState("lark");
  const [user, setUser] = useState({ name: "lark" });
  return (
    <>
      <input value={inputVal} onChange={(ev) => setInputVal(ev.target.value)} />
      <button onClick={() => setUser({ name: inputVal })}>
        改变子组件的 props
      </button>
      <Boy user={user} />
      <Girl user={user} />
    </>
  );
}

const computedVal = useMemo(
  computeFn, // 计算函数
  deps, // 依赖项数组
);

import { useState, type ChangeEvent, useMemo } from "react";
 
const App: React.FC = () => {
  console.log("App update...");
  const [inputVal, setInputVal] = useState("528");
  const [nums, setNums] = useState([1, 2]);
 
  const handleChange = (ev: ChangeEvent<HTMLInputElement>) =>
    setInputVal(ev.target.value);
 
  // getSum 未使用 useMemo, 每次组件更新时, 都会重新计算
  const getSum = () => {
    console.log("Get sum");
    return nums[0] + nums[1];
  };
 
  // computedProduct 使用 useMemo, 仅当依赖项改变时, 才会重新计算
  const computedProduct = useMemo<number>(() => {
    console.log("Compute product");
    return nums[0] * nums[1];
  }, [nums]);
 
  const addNum0 = () => setNums(([a, b]) => [a + 1, b]);
  const addNum1 = () => setNums(([a, b]) => [a, b + 1]);
 
  return (
    <div>
      {/* 修改输入框的值, 以触发组件更新 */}
      <input value={inputVal} onChange={handleChange} />
 
      <div>
        nums: {nums[0]}, {nums[1]}
      </div>
      <div>sum: {getSum()}</div>
      <div>product: {computedProduct}</div>
 
      <button onClick={addNum0}>addNum0</button>
      <button onClick={addNum1}>addNum1</button>
    </div>
  );
};
 
export default App;

const cachedCallback = useCallback(
  callback, // 回调函数
  deps, // 依赖项数组
);

import { type ChangeEvent, useCallback, useState } from "react";
 
const wm = new WeakMap();
 
export default function App() {
  console.log("App update...");
  const [inputVal, setInputVal] = useState("");
  // 每次组件更新时, 都会重新创建 cb
  const cb = (ev: ChangeEvent<HTMLInputElement>) =>
    setInputVal(ev.target.value);
 
  const cachedCb = useCallback(
    (ev: ChangeEvent<HTMLInputElement>) => setInputVal(ev.target.value),
    [], // deps 是 [] 空数组, cachedCb 只会在组件挂载后创建一次
  );
 
  wm.set(cb, (wm.get(cb) ?? 0) + 1);
  wm.set(cachedCb, (wm.get(cachedCb) ?? 0) + 1);
 
  console.log("wm:", wm);
  return (
    <input
      value={inputVal}
      onChange={(ev) => {
        cb(ev);
        cachedCb(ev);
      }}
    />
  );
}

import React, { type ChangeEvent, useCallback, useState } from "react";
 
interface IProps {
  cb: () => void;
}
 
// 父组件更新, 也会触发子组件更新
// React.memo 会缓存渲染结果
// 使用 React.memo 包裹子组件, 避免父组件更新时, 不必要的子组件更新
// 如果子组件的 props 没有改变, 则跳过子组件的更新
const Boy = React.memo(({ cb }: IProps) => {
  console.log("Boy update...");
  return <button onClick={cb}>Boy cb</button>;
});
 
const Girl = React.memo(({ cb }: IProps) => {
  console.log("Girl update...");
  return <button onClick={cb}>Girl cb</button>;
});
 
const App: React.FC = () => {
  console.log("App update...");
  const [inputVal, setInputVal] = useState("");
  const handleChange = (ev: ChangeEvent<HTMLInputElement>) =>
    setInputVal(ev.target.value);
  const cb = () => console.log("[Boy] inputVal:", inputVal);
  // useCallback 返回缓存的回调函数 (cachedCb)
  // 避免组件更新时, 不必要的重新创建 callback
  const cachedCb = useCallback(
    () => console.log("[Girl] inputVal:", inputVal),
    // [inputVal],
    [], // deps 是 [] 空数组, cachedCb 只会在组件挂载后创建一次
  );
  return (
    <>
      <input value={inputVal} onChange={handleChange} />
      <Boy cb={cb} />
      <Girl cb={cachedCb} />
    </>
  );
};
 
export default App;

const debugValue = useDebugValue(value, format? /* 格式化函数 */)

import { useDebugValue, useEffect, useState } from "react";
 
const useCookie = (key: string, initialVal: string = "") => {
  const [cookieVal, setCookieVal] = useState(initialVal);
 
  useEffect(() => {
    document.cookie = `${key}=${initialVal}`;
  }, []);
 
  useDebugValue(
    cookieVal,
    (val) =>
      `val: ${val}, cookieVal: ${cookieVal}, document.cookie: ${document.cookie}`, // format
  );
 
  const setCookie = (newVal: string) => {
    setCookieVal(newVal);
    document.cookie = `${key}=${newVal}`;
  };
 
  const removeCookie = () => {
    setCookie("");
    document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
  };
 
  return [cookieVal, setCookie, removeCookie] as const;
};
 
export default function App() {
  const [cookieVal, setCookie, removeCookie] = useCookie("myKey", "myVal");
  return (
    <>
      <div>cookieVal: {cookieVal}</div>
      <button onClick={() => setCookie(cookieVal + "!")}>setCookie</button>
      <button onClick={() => removeCookie()}>delCookie</button>
    </>
  );
}

const id: string = useId();

const reactElement /** jsxElement */ = createPortal(
  children, // 被传送的组件
  container, // 目标 DOM 节点, 通常是 document.body
  key?, // 唯一标识被传送的组件, 可选
);

import { useState } from "react";
import { createPortal } from "react-dom";
 
interface IProps {
  header?: string;
  content?: string;
  footer?: string;
}
 
const Modal: React.FC<IProps> = (props: IProps) => {
  return createPortal(
    <>
      <header> {props.header ?? "header"} </header>
      <section> {props.content ?? "content"} </section>
      <footer> {props.footer ?? "footer"} </footer>
    </>,
    document.body,
  );
};
 
export default function App() {
  const [alive, setAlive] = useState(false);
  return (
    <>
      <button onClick={() => setAlive(!alive)}>Modal</button>
      {alive && <Modal header="I" content="love" footer="you" />}
    </>
  );
}

import { useEffect, useState } from "react";
 
const trackService = {
  sendEvent: <T,>(trackType: string, data?: T) => {
    const eventData = {
      timestamp: new Date().toISOString(),
      trackType,
      data,
      userAgent: navigator.userAgent,
      url: location.href,
    };
    console.log("[trackService] eventData:", eventData);
    navigator.sendBeacon("http://127.0.0.1:5173", JSON.stringify(eventData));
  },
};
 
const withTrack = (
  Component: React.FC<{
    trackEvent: (evName: string, data?: Record<string, unknown>) => void;
  }>,
  trackType: string,
) => {
  return (props: Record<string, unknown>) => {
    useEffect(() => {
      trackService.sendEvent<{ username: string }>(`${trackType}-mount`, {
        username: "lark",
      });
      return () => {
        trackService.sendEvent<{ username: string }>(`${trackType}-unmount`, {
          username: "lark",
        });
      };
    }, []);
 
    const trackEvent = (evName: string, data?: Record<string, unknown>) => {
      trackService.sendEvent<Record<string, unknown>>(
        `${trackType}-${evName}`,
        data,
      );
    };
 
    return <Component {...props} trackEvent={trackEvent} />;
  };
};
 
const RawButton = (props: {
  trackEvent: (evName: string, data?: Record<string, unknown>) => void;
}) => {
  const { trackEvent } = props;
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    trackEvent(
      e.type, // evName
      // data
      {
        type: e.type,
        clientX: e.clientX,
        clientY: e.clientY,
      },
    );
  };
  return <button onClick={handleClick}>button-{JSON.stringify(props)}</button>;
};
 
const TrackedButton = withTrack(RawButton, "button" /** trackType */);
 
export default function HocDemo2() {
  const [isMounted, setIsMounted] = useState(true);
  return (
    <>
      <button onClick={() => setIsMounted(!isMounted)}>setIsMounted</button>
      {isMounted ? <TrackedButton a={1} b={2} c={3} /> : <div>Empty</div>}
    </>
  );
}

const [state, formAction, isPending] = useActionsState<IState, FormData>(
  action, // (oldState: IState, formData: FormData) => Promise<IState>
  initialState, // IState
);

import { useEffect, useLayoutEffect, useInsertionEffect } from "react";
export default function App() {
  useInsertionEffect(() => {
    console.log("1. useInsertionEffect");
  });
  useLayoutEffect(() => {
    console.log("2. useLayoutEffect");
  });
  useEffect(() => {
    console.log("3. useEffect");
  });
  console.log("0. render");
  return <div>React</div>;
}

pnpm add immer use-immer