适合儿初学者的 React Usecallback

// 假设这是我们绘制笑脸的咒语
function drawSmiley() {
  console.log("😊");
}

// 我们要求 React 记住这个咒语
const rememberDrawSmiley = useCallback(drawSmiley, []);

// 现在，每次我们想要绘制笑脸，我们只需使用 rememberDrawSmiley

import React, { useState, useCallback } from 'react';

function ColorBox() {
  const [weather, setWeather] = useState('sunny'); // 天气条件
  const [color, setColor] = useState('yellow'); // 盒子的颜色

  // useCallback 钩子用于根据天气确定盒子的颜色
  // 依赖项数组包括 'weather'，这意味着这个 useCallback
  // 只有在 'weather' 改变时才会重新计算。
  const updateColor = useCallback(() => {
    switch (weather) {
      case 'sunny':
        setColor('yellow');
        break;
      case 'rainy':
        setColor('gray');
        break;
      case 'windy':
        setColor('blue');
        break;
      default:
        setColor('green'); // 如果天气没有被识别，默认颜色为绿色
    }
  }, [weather]); // 依赖项数组

  return (
    <div>
      <h2>天气：{weather}</h2>
      {/* 按钮将天气更改为 'sunny' */}
      <button onClick={() => setWeather('sunny')}>晴天</button>
      {/* 按钮将天气更改为 'rainy' */}
      <button onClick={() => setWeather('rainy')}>下雨</button>
      {/* 按钮将天气更改为 'windy' */}
      <button onClick={() => setWeather('windy')}>有风</button>

      {/* 按钮根据当前天气更新颜色 */}
      <button onClick={updateColor}>更新盒子颜色</button>

      {/* 这个 div 表示颜色会变化的盒子 */}
      <div style={{ width: '100px', height: '100px', backgroundColor: color, marginTop: '20px' }}>
        盒子
      </div>
    </div>
  );
}

export default ColorBox;