React -函数组件中的内部函数

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  // 内部函数：处理按钮点击事件
  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;

import React, { useState } from 'react';

const ItemList = () => {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);

  // 内部函数：处理删除操作
  const handleDelete = (index) => {
    const newItems = items.filter((item, i) => i !== index);
    setItems(newItems);
  };

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>
          {item} <button onClick={() => handleDelete(index)}>Delete</button>
        </li>
      ))}
    </ul>
  );
};

export default ItemList;

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

const Counter = () => {
  const [count, setCount] = useState(0);

  // 使用 useCallback 优化性能
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;

import React, { useState } from 'react';

const Greeting = ({ name }) => {
  const [message, setMessage] = useState('');

  // 内部函数：生成问候语
  const generateGreeting = () => {
    setMessage(`Hello, ${name}!`);
  };

  return (
    <div>
      <p>{message}</p>
      <button onClick={generateGreeting}>Greet</button>
    </div>
  );
};

export default Greeting;