如何使用react钩子进行切换

import React, { useState } from 'react';

function MyComponent() {
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      <button onClick={toggleVisibility}>
        {isVisible ? '隐藏组件' : '显示组件'}
      </button>
      {isVisible && <div>这是一个可切换显示的组件</div>}
    </div>
  );
}

export default MyComponent;

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 这里可以执行一些副作用操作
    console.log('组件挂载后执行');
    return () => {
      // 这里可以执行一些清理操作
      console.log('组件卸载前执行');
    };
  }, []);

  return (
    <div>
      这是一个使用useEffect钩子的组件
    </div>
  );
}

export default MyComponent;

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function MyComponent() {
  const theme = useContext(ThemeContext);

  return (
    <div>
      <div style={{ background: theme === 'dark' ? 'black' : 'white', color: theme === 'dark' ? 'white' : 'black' }}>
        这是一个根据主题样式切换背景色和文字颜色的组件
      </div>
    </div>
  );
}

export default MyComponent;