19.说说你对useContext的理解#

//App
import { createContext, useState } from "react";
import Father from "../components/Father";

export const ThemeContext = createContext(null);

export default function App ()  {
  const [state, setState] = useState({
    m:100,
    n:50
  })
  return (
    <ThemeContext.Provider value={{state,setState}}>
      <Father />
    </ThemeContext.Provider>
  );
};
//Father
import Child from './Child'
const Father = () => {
  return (
    <div>
      father
      <Child />
    </div>
  )
}

export default Father
// child
import {ThemeContext} from "../src/App";
import { useContext } from "react";

const Child = ()=>{
  const {state,setState}=useContext(ThemeContext)
  console.log(state,'state');
  function addM(){
    setState((state)=>{
      return {
        ...state,
        m:state.m+1
      }
    })
  }
  function addN(){
    setState((state)=>{
      return {
        ...state,
        n:state.n+1
      }
    })
  }
  return (
    <div>
      child
      <div>m:{state.m}</div>
      <div>n:{state.n}</div>
      <button onClick={addM}>设置m</button>
      <button onClick={addN}>设置n</button>
    </div>
  )
}

export default Child ;