🎉React几个不常用，但是可以四两拨千斤的hooks🎉

import React from 'react';
import { store } from  './store.js'
export const App () {
  const data = useSyncExternalStore(store.subscribe, store.getData)
  return <>
    <button onClick={store.add}>add+</button>
    {data}
  </>
}

// store.js
let conut = 0;
let listeners = [];
export const store = {
    add () {
        count ++;
    },
    subscribe(listener) {
        listeners = [...listeners, listener];
        return () => {
          listeners = listeners.filter(l => l !== listener);
        };
    },
    geetDate () {
        return count;
    }
}

import { useId } from 'react';  
function App() {  
  const uuid = useId();  
  return (  
    <>{uuid}</>  
  );  
}

import { useState, useRef, useLayoutEffect } from 'react';  
function Tooltip() {
  const ref = useRef(null);  
  const [tooltipHeight, setTooltipHeight] = useState(0);  
  useLayoutEffect(() => {  
    const { height } = ref.current.getBoundingClientRect();  
    setTooltipHeight(height);  
  }, []);
  return <></>
}

import SearchResults from './SearchResults.js';
export default function App() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  return (
    <>
      <label>
        Search albums:
        <input value={query} onChange={e => setQuery(e.target.value)} />
      </label>
      <Suspense fallback={<h2>Loading...</h2>}>
        <SearchResults query={deferredQuery} />
      </Suspense>
    </>
  );
}

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();
  }
}
function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} {..props} />;
}