ReactJS:如何动态传递函数参数

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  // 处理函数
  const handleClick = (increment) => {
    setCount(count + increment);
  };

  return (
    <div>
      <p>Count: {count}</p>
      {/* 动态传递参数 */}
      <button onClick={() => handleClick(1)}>Increment by 1</button>
      <button onClick={() => handleClick(2)}>Increment by 2</button>
    </div>
  );
}

export default App;

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

function App() {
  const [count, setCount] = useState(0);

  // 使用useCallback缓存函数
  const handleClick = useCallback((increment) => {
    setCount(count + increment);
  }, [count]);

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

export default App;

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

const Button = React.memo(({ onClick, label }) => {
  return <button onClick={onClick}>{label}</button>;
});

function App() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback((increment) => {
    setCount(count + increment);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <Button onClick={() => handleClick(1)} label="Increment by 1" />
      <Button onClick={() => handleClick(2)} label="Increment by 2" />
    </div>
  );
}

export default App;