hook ​

export const ThemeContext = 
  createContext<[
    string,React.Dispatch<React.SetStateAction<string>>
  ]>(['',()=>{}]);

function App(){
  const [theme, setTheme] = useState('light');
  return (
    // 传递的是数组
    <ThemeContext.Provider value={[theme,setTheme]}> 
      {/* 路由 */}
    </ThemeContext.Provider>
  )
}

import { ThemeContext } from "../../App"
export function Theme(){
  // 因为传递的是数组,所以接收的时候也是数组形式
  const [theme,setTheme] =  useContext(ThemeContext) 
  return (
    <Button onClick={()=>setTheme('dark')}>切换theme</Button>
  )
}

const CurrentUserContext = createContext(null);
function App(){
  const [currentUser, setCurrentUser] = useState(null);
  return (
    <CurrentUserContext.Provider
      value={{
        currentUser,
        setCurrentUser
      }}
    >
    {/* todo */}
   </CurrentUserContext.Provider>  
  )
}

<ThemeContext.Provider value={theme}>
    <CurrentUserContext.Provider
      value={{
        currentUser,
        setCurrentUser
      }}
    >
      {/* todo */}
    </CurrentUserContext.Provider>
  </ThemeContext.Provider>

import { Suspense, useState, useDeferredValue } from 'react';
import SearchResults from './SearchResults.js';

export default function App() {
  const [query, setQuery] = useState(''); 
  const deferredQuery = useDeferredValue(query); 
  // 判断是否一样
  const isStale = query !== deferredQuery;
  return (
    <>
      <label>
        Search albums:
        <input value={query} onChange={e => setQuery(e.target.value)} />
      </label>
      <Suspense fallback={<h2>Loading...</h2>}>
        <div style={{
          opacity: isStale ? 0.5 : 1,
          transition: isStale ? 'opacity 0.2s 0.2s linear' : 'opacity 0s 0s linear'
        }}>
          <SearchResults query={deferredQuery} />
        </div>
      </Suspense>
    </>
  );
}

export default function SearchResults({ query }) {
  if (query === '') {
    return null;
  }
  const albums = fetch(`/search?q=${query}`);
  if (albums.length === 0) {
    return <p>No matches for <i>"{query}"</i></p>;
  }
  return (
    <ul>
      {albums.map(album => (
        <li key={album.id}>
          {album.title} ({album.year})
        </li>
      ))}
    </ul>
  );
}

import { useState, useEffect } from 'react';
import { fetchBio } from './api.js';

export default function Page() {
  const [person, setPerson] = useState('Alice');
  const [bio, setBio] = useState(null);

  useEffect(() => {
    let ignore = false;
    setBio(null);
    fetchBio(person).then(result => {
      if (!ignore) {
        setBio(result);
      }
    });
    return () => {   
      ignore = true; 
    }; 
  }, [person]);

  return (
    <>
      <select value={person} onChange={e => {
        setPerson(e.target.value);
      }}>
        <option value="Alice">Alice</option>
        <option value="Bob">Bob</option>
        <option value="Taylor">Taylor</option>
      </select>
      <hr />
      <p><i>{bio ?? 'Loading...'}</i></p>
    </>
  );
}

const serverUrl = 'https://localhost:1234';

function ChatRoom({ roomId }) {
  const [message, setMessage] = useState('');

  const options = { // 🚩 This object is created from scratch on every re-render
    serverUrl: serverUrl,
    roomId: roomId
  };

  useEffect(() => {
    const connection = createConnection(options); // It's used inside the Effect
    connection.connect();
    return () => connection.disconnect();
  }, [options]); // 🚩 As a result, these dependencies are always different on a re-render
  // ...

const x = useId()

function Tooltip() {
  const ref = useRef(null);
  // 你还不知道真正的高度
  const [tooltipHeight, setTooltipHeight] = useState(0);

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height); // 现在重新渲染，你知道了真实的高度
  }, []);

  // ... 在下方的渲染逻辑中使用 tooltipHeight ...
}

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

export default function TodoList({ todos, tab, theme }) {
  // Every time the theme changes, this will be a different array...
  const visibleTodos = filterTodos(todos, tab);
  return (
    <div className={theme}>
      {/* ... so List's props will never be the same, and it will re-render every time */}
      <List items={visibleTodos} />
    </div>
  );
}

export default function TodoList({ todos, tab, theme }) {
  // Tell React to cache your calculation between re-renders...
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab] // ...so as long as these dependencies don't change...
  );

  return (
    <div className={theme}>
      {/* ...List will receive the same props and can skip re-rendering */}
      <List items={visibleTodos} />
    </div>
  );
}

export default function Page({ productId, referrer }) {
  const handleSubmit = useMemo(() => {
    return (orderDetails) => {
      post('/product/' + productId + '/buy', {
        referrer,
        orderDetails
      });
    };
  }, [productId, referrer]);

  return <Form onSubmit={handleSubmit} />;
}

export default function Page({ productId, referrer }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails
    });
  }, [productId, referrer]);

  return <Form onSubmit={handleSubmit} />;
}

const [state, dispatch] = useReducer(reducer, initialArg, init);

function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      return {
        name: state.name,
        age: state.age + 1
      };
    }
    case 'changed_name': {
      return {
        name: action.nextName,
        age: state.age
      };
    }
  }
  throw Error('Unknown action: ' + action.type);
}

function Form() {
  const [state, dispatch] = useReducer(reducer, { name: 'Taylor', age: 42 }); 
  
  function handleButtonClick() {
    dispatch({ type: 'incremented_age' }); 
  }

  function handleInputChange(e) {
    dispatch({ 
      type: 'changed_name', 
      nextName: e.target.value
    }); 
  }
}
  // ...

import { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null)
  function handleClick() {
    inputRef.current.focus();
  }
  return <input ref={inputRef} />;  
}

import { forwardRef, useRef } from 'react';

const MyInput = forwardRef((props, ref) => { 
  return <input {...props} ref={ref} />; 
}); 

export default function Form() {
  const inputRef = useRef(null); 

  function handleClick() {
    inputRef.current.focus(); 
  }

  return (
    <>
      <MyInput ref={inputRef} />    
      <button onClick={handleClick}>
        Focus the input
      </button>
    </>
  );
}

const [todos, setTodos] = useState(createInitialTodos()); 
const [todos, setTodos] = useState(createInitialTodos); 

import { createPortal } from 'react-dom';

<div>
  <p>这个子节点被放置在父节点 div 中。</p>
  {createPortal(
    <p>这个子节点被放置在 document body 中。</p>,
    document.body
  )}
</div>

import { lazy } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));

<Suspense fallback={<Loading />}>
  <h2>Preview</h2>
  <MarkdownPreview />
 </Suspense>

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const { label, ...otherProps } = props;
  return (
    <label>
      {label}
      <input {...otherProps} />
    </label>
  );
});

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const { label, ...otherProps } = props;
  return (
    <label>
      {label}
      <input {...otherProps} ref={ref} />
    </label>
  );
});

const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null);

  // ...

  return <input {...props} ref={inputRef} />;
});