避免React呈现循环内的每次迭代绑定

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // 处理点击事件
  }

  render() {
    return (
      <ul>
        {this.props.items.map((item, index) => (
          <li key={index} onClick={this.handleClick}>{item}</li>
        ))}
      </ul>
    );
  }
}

const MyComponent = ({ items }) => {
  const handleClick = () => {
    // 处理点击事件
  };

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

import React, { useCallback } from 'react';

const MyComponent = ({ items }) => {
  const handleClick = useCallback(() => {
    // 处理点击事件
  }, []);

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