React中事件绑定的5种实现方式和优劣对比全攻略

class Button extends React.Component {
  render() {
    return (
      <button onClick={() => this.handleClick()}>
        点击我
      </button>
    );
  }
  
  handleClick() {
    console.log('按钮被点击了');
  }
}

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  
  render() {
    return <button onClick={this.handleClick}>点击我</button>;
  }
  
  handleClick() {
    console.log('按钮被点击了');
  }
}

class Button extends React.Component {
  handleClick = () => {
    console.log('按钮被点击了');
  };
  
  render() {
    return <button onClick={this.handleClick}>点击我</button>;
  }
}

class Button extends React.Component {
  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>
        点击我
      </button>
    );
  }
  
  handleClick() {
    console.log('按钮被点击了');
  }
}

function Button() {
  const handleClick = () => {
    console.log('按钮被点击了');
  };
  
  // 或者使用useCallback优化
  const memoizedHandleClick = React.useCallback(() => {
    console.log('按钮被点击了');
  }, []);
  
  return <button onClick={handleClick}>点击我</button>;
}

// 推荐：类属性箭头函数
class Profile extends React.Component {
  handleFollow = async () => {
    await this.props.followUser(this.state.userId);
  };
  
  // 对于需要参数的事件
  handleSelectItem = (itemId) => () => {
    this.setState({ selectedItem: itemId });
  };
  
  render() {
    return (
      <div>
        <button onClick={this.handleFollow}>关注</button>
        {items.map(item => (
          <div 
            key={item.id} 
            onClick={this.handleSelectItem(item.id)}
          >
            {item.name}
          </div>
        ))}
      </div>
    );
  }
}

function SearchBox({ onSearch }) {
  const [query, setQuery] = useState('');
  
  // 好的做法：useCallback避免子组件不必要的重渲染
  const handleSearch = useCallback(() => {
    onSearch(query);
  }, [query, onSearch]);
  
  // 坏的做法：每次渲染都新建函数
  const handleChange = (e) => {
    setQuery(e.target.value);
  };
  
  // 好的做法：简单的setState可以直接内联
  const handleChange = (e) => setQuery(e.target.value);
  
  return <input value={query} onChange={handleChange} />;
}

class List extends React.Component {
  handleClick = (e) => {
    if (e.target.tagName === 'LI') {
      const id = e.target.dataset.id;
      this.handleItemClick(id);
    }
  };
  
  render() {
    return (
      <ul onClick={this.handleClick}>
        {this.props.items.map(item => (
          <li key={item.id} data-id={item.id}>
            {item.text}
          </li>
        ))}
      </ul>
    );
  }
}

class Modal extends React.Component {
  componentDidMount() {
    // 在document上绑定原生事件
    document.addEventListener('keydown', this.handleKeyDown);
  }
  
  componentWillUnmount() {
    // 一定要记得移除！
    document.removeEventListener('keydown', this.handleKeyDown);
  }
  
  handleKeyDown = (e) => {
    if (e.key === 'Escape') {
      this.props.onClose();
    }
  };
  
  // React合成事件
  handleOverlayClick = (e) => {
    e.stopPropagation();
    this.props.onClose();
  };
}

class BadExample extends React.Component {
  handleClick() {
    // 这里this是undefined！
    console.log(this.props.message);
  }
  
  render() {
    return <button onClick={this.handleClick}>点我</button>;
  }
}

// 在长列表中这样做会非常卡顿
render() {
  return (
    <div>
      {items.map(item => (
        <Item 
          key={item.id}
          onClick={() => this.handleSelect(item.id)}  // 每次渲染都新建函数
        />
      ))}
    </div>
  );
}

// 改进方案
render() {
  return (
    <div>
      {items.map(item => (
        <Item 
          key={item.id}
          onClick={this.handleSelect}
          data-id={item.id}
        />
      ))}
    </div>
  );
}