React:在同一组件中的函数之间共享变量

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

import React, { createContext, useContext } from 'react';

const MyContext = createContext();

function MyComponent() {
  const sharedVariable = 'Shared Variable';

  return (
    <MyContext.Provider value={sharedVariable}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const sharedVariable = useContext(MyContext);

  return <p>{sharedVariable}</p>;
}

import React, { useState } from 'react';

function useSharedVariable() {
  const [sharedVariable, setSharedVariable] = useState('');

  const updateSharedVariable = (value) => {
    setSharedVariable(value);
  };

  return [sharedVariable, updateSharedVariable];
}

function MyComponent() {
  const [sharedVariable, updateSharedVariable] = useSharedVariable();

  const handleClick = () => {
    updateSharedVariable('New Value');
  };

  return (
    <div>
      <p>Shared Variable: {sharedVariable}</p>
      <button onClick={handleClick}>Update</button>
    </div>
  );
}