将状态从钩子函数导出到另一个组件

// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [state, setState] = useState('initial state');

  return (
    <div>
      <ChildComponent state={state} setState={setState} />
    </div>
  );
}

export default ParentComponent;

// ChildComponent.js
import React from 'react';

function ChildComponent({ state, setState }) {
  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState('new state')}>Change State</button>
    </div>
  );
}

export default ChildComponent;

// MyContext.js
import React, { createContext, useState } from 'react';

export const MyContext = createContext();

export const MyProvider = ({ children }) => {
  const [state, setState] = useState('initial state');
  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

// ParentComponent.js
import React from 'react';
import { MyProvider } from './MyContext';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
    <MyProvider>
      <ChildComponent />
    </MyProvider>
  );
}

export default ParentComponent;

// ChildComponent.js
import React, { useContext } from 'react';
import { MyContext } from './MyContext';

function ChildComponent() {
  const { state, setState } = useContext(MyContext);
  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState('new state')}>Change State</button>
    </div>
  );
}

export default ChildComponent;

// 使用useCallback缓存函数
const handleChange = useCallback(() => {
  setState('new state');
}, []);