如何在useState钩子中导出状态并在其他组件中使用它

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

const MyContext = createContext();

export const MyProvider = ({ children }) => {
  const [state, setState] = useState(initialState);

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

export const useMyContext = () => useContext(MyContext);

import React from 'react';
import { MyProvider, useMyContext } from './MyContext';

const ComponentA = () => {
  const { state, setState } = useMyContext();
  // 使用 state 和 setState
  return <div>{state}</div>;
};

const ComponentB = () => {
  const { state } = useMyContext();
  // 使用 state
  return <div>{state}</div>;
};

const App = () => (
  <MyProvider>
    <ComponentA />
    <Component2 />
  </MyProvider>
);

export default App;

// store.js
import { createStore } from 'redux';

const initialState = { value: 0 };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

export default store;

// ComponentA.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const ComponentA = () => {
  const value = useSelector(state => state.value);
  const dispatch = useDispatch();

  return (
    <div>
      <p>{value}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
    </div>
  );
};

export default ComponentA;

// ComponentB.js
import React from 'react';
import { useSelector } from 'react-redux';

const ComponentB = () => {
  const value = useSelector(state => state.value);

  return <div>{value}</div>;
};

export default ComponentB;

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

const App = () => (
  <Provider store={store}>
    <ComponentA />
    <ComponentB />
  </Provider>
);

export default App;

import { useState } from 'react';

const useSharedState = (initialState) => {
  const [state, setState] = useState(initialState);
  return [state, setState];
};

export default useSharedState;

import React from 'react';
import useSharedState from './useSharedState';

const ComponentA = () => {
  const [state, setState] = useSharedState(initialState);
  // 使用 state 和 setState
  return <div>{state}</div>;
};

const ComponentB = () => {
  const [state] = useSharedState(initialState);
  // 使用 state
  return <div>{state}</div>;
};

const App = () => (
  <div>
    <ComponentA />
    <ComponentB />
  </div>
);

export default App;