React:在函数组件中声明变量与在返回的JSX中使用值

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

// 假设有一个ThemeContext提供主题信息
const ThemeContext = React.createContext('light');

function MyComponent() {
  // 声明一个局部变量
  const date = new Date();
  
  // 声明一个状态变量
  const [count, setCount] = useState(0);
  
  // 使用useContext钩子获取上下文变量
  const theme = useContext(ThemeContext);
  
  return (
    <div className={theme}>
      <p>当前时间：{date.toLocaleTimeString()}</p>
      <p>点击次数：{count}</p>
      <button onClick={() => setCount(count + 1)}>点击我</button>
    </div>
  );
}

export default MyComponent;

import React, { useMemo } from 'react';

function MyComponent({ data }) {
  // 使用useMemo缓存昂贵的计算
  const processedData = useMemo(() => {
    return data.map(item => item * 2); // 假设这是一个昂贵的操作
  }, [data]);

  return (
    <ul>
      {processedData.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default MyComponent;