React Context Hook之useContext

Context鍏佽缁勪欢浠庤繙绋嬬埗绾ф帴鏀朵俊鎭紝鑰屾棤闇€灏嗗叾浣滀负 props 浼犻€掋€?渚嬪锛孉pplication鐨勯《绾х粍浠跺彲浠ュ皢褰撳墠鐨?UI 涓婚浼犻€掔粰涓嬮潰鐨勬墍鏈夌粍浠讹紝鏃犺鏈夊娣便€?/p>

• useContext 璇诲彇鍜岃闃呬竴涓笂涓嬫枃銆?/li>

const value = useContext(SomeContext)

瀹氫箟

useContext(SomeContext)

鍦ㄧ粍浠剁殑鏈€涓婂眰璋冪敤useContext璁㈤槄鍜岃鍙朿ontext.

鍙傛暟

• SomeContext: context 鏄娇鐢?[createContext]鍒涘缓鍑烘潵鐨?https://react.dev/reference/react/createContext). context涓嶄繚瀛樹俊鎭? 浠呰〃绀烘偍鍙互鎻愪緵鎴栦粠缁勪欢涓鍙栫殑淇℃伅绫诲瀷銆?/li>

杩斿洖鍊?

useContext 杩斿洖璋冪敤缁勪欢鐨凜ontext鍊? 瀹冭纭畾涓轰紶閫掔粰鏍戜腑璋冪敤缁勪欢涓婃柟鏈€鎺ヨ繎鐨勨€淪omeContext.Provider鈥濈殑鈥滃€尖€濄€傚鏋滄病鏈夎繖鏍风殑Provider锛屽垯杩斿洖鐨勫€煎皢鏄紶閫掔粰璇ヤ笂涓嬫枃鐨?createContext 鐨?defaultValue銆?杩斿洖鐨勫€煎缁堟槸鏈€鏂扮殑銆?濡傛灉Context鍙戠敓鍙樺寲锛孯eact 浼氳嚜鍔ㄩ噸鏂版覆鏌撹鍙栨煇浜汣ontext鐨勭粍浠躲€?/p>

鐢ㄦ硶

1.灏嗘暟鎹繁鍏ヤ紶閫掑埌鏍戜腑

娉ㄦ剰锛?br> Form 鎷垮埌鐨勫€兼槸light,鍥犱负鏈€杩戠殑cotext灏辨槸榛樿鍊笺€?br> Panel鎷垮埌鐨勫€兼槸dark,鍥犱负鏈€杩戠殑cotext鏄痜rom鎻愪緵鐨刣ark

import { useContext, createContext } from "react";

const ThemeContext = createContext("light");

export function ContextDemo() {
    return <span>context  <Form></Form></span>
}

function Form() {
    const theme = useContext(ThemeContext);  //鍙栧垵濮嬪€糽ight
    return <ThemeContext.Provider value="drak"><button>form {theme}<Panel></Panel></button>
    </ThemeContext.Provider>
}

function Panel() {
    const theme = useContext(ThemeContext);
    return <div>panel {theme}</div>
}

2.閫氳繃鏀瑰彉context鏇存柊鍊?

鏇存柊涓婇潰鐨凢orm缁勪欢

function Form() {
    // const theme = useContext(ThemeContext);
    const [theme, setTheme] = useState("form-light");
    return <ThemeContext.Provider value={theme}><button onClick={() => { setTheme("dark") }}>form  Switch to {theme}<Panel></Panel></button>
    </ThemeContext.Provider>
}

3.閫氳繃Context鏇存柊object,浣跨敤useState,鏉ユ敼鍙榗ontext value鐨勫€笺€?/h3>

import { useContext, createContext, useState } from "react";

const CurrentUserContext = createContext({
  currentUser: "Tom",
  setCurrentUser: (currentUser: string) => {},
});

export function ContextDemo() {
  const [currentUser, setCurrentUser] = useState("lisa");
  return (
    <CurrentUserContext.Provider value={{ currentUser, setCurrentUser }}>
      <span>
        context <Form></Form>
      </span>
    </CurrentUserContext.Provider>
  );
}

function Form() {
  return       <Panel></Panel>;
}

function Panel() {
  const { currentUser, setCurrentUser } = useContext(CurrentUserContext);
  return (
    <div
      onClick={() => {
        setCurrentUser("layor");
      }}
    >
      {" "}
      panel  {currentUser}
    </div>
  );
}

4.鎻愬彇缁勪欢涓殑provider

function MyProviders({ children, theme, setTheme }) {
  const [currentUser, setCurrentUser] = useState("lisa");
  return (
    <ThemeContext.Provider value={theme}>
      <CurrentUserContext.Provider value={{ currentUser, setCurrentUser }}>
        {children}
      </CurrentUserContext.Provider>
    </ThemeContext.Provider>
  );
}

浣跨敤provider

function Form() {
  const [theme, setTheme] = useState("form-light");
  return (
    <MyProviders theme={theme} setTheme={setTheme}>
      <button
        onClick={() => {
          setTheme("dark");
        }}
      >
        form Switch to {theme}
      </button>
      <Panel></Panel>
 
    </MyProviders>
  );
}

5.浼樺寲浼犻€掑璞″拰鍑芥暟鏃剁殑閲嶆柊娓叉煋

import { useCallback, useMemo } from 'react';

function MyApp() {
  const [currentUser, setCurrentUser] = useState(null);

  const login = useCallback((response) => {
    storeCredentials(response.credentials);
    setCurrentUser(response.user);
  }, []);

  const contextValue = useMemo(() => ({
    currentUser,
    login
  }), [currentUser, login]);

  return (
    <AuthContext.Provider value={contextValue}>
      <Page />
    </AuthContext.Provider>
  );
}

鍗充娇 MyApp 闇€瑕侀噸鏂版覆鏌擄紝璋冪敤 useContext(AuthContext) 鐨勭粍浠朵篃涓嶉渶瑕侀噸鏂版覆鏌擄紝闄ら潪 currentUser 宸叉洿鏀广€?/p>

閬囧埌鐨勯棶棰?/h2>

// 馃毄 Doesn't work: no value prop
<ThemeContext.Provider>
   <Button />
</ThemeContext.Provider>

// 馃毄 Doesn't work: prop should be called "value"
<ThemeContext.Provider theme={theme}>
   <Button />
</ThemeContext.Provider>

濂戒簡锛岄偅鎴戜滑鐨剈seContext鍒拌繖閲屽氨缁撴潫浜嗐€?/p>

瀹濆瓙浠彲浠ユ敹钘忚瘎璁轰氦娴佸摝