第一章：React 核心概念

事件处理

在 React 中，事件处理是构建交互式用户界面的重要部分。React 的事件处理与 DOM 元素的事件处理非常相似，但有一些语法上的差异。

基本语法

React 事件使用驼峰命名法（camelCase）而不是全小写。例如，HTML 中的 onclick 在 React 中写为 onClick。

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}

事件对象

React 中的事件处理函数会自动接收一个合成事件（SyntheticEvent）对象，它是跨浏览器原生事件的包装器。

function InputField() {
  function handleChange(event) {
    console.log('Input value:', event.target.value);
  }

  return <input type="text" onChange={handleChange} />;
}

绑定 this

在类组件中，需要特别注意 this 的绑定问题：

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isToggleOn: true };
    
    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

替代绑定方法

  1. 公共类字段语法（推荐）：

    handleClick = () => {
  this.setState(prevState => ({
    isToggleOn: !prevState.isToggleOn
  }));
}

  2. 箭头函数（注意可能的性能影响）：

    <button onClick={() => this.handleClick()}>
  Click
</button>

传递参数

在事件处理中传递额外参数：

function ListItem({ id, text }) {
  function handleDelete(id, event) {
    console.log('Deleting item:', id);
    console.log('Event:', event);
  }

  return (
    <li>
      {text}
      <button onClick={(e) => handleDelete(id, e)}>
        Delete
      </button>
    </li>
  );
}

阻止默认行为

在 React 中不能通过返回 false 来阻止默认行为，必须显式调用 preventDefault：

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('Form submitted');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

常见事件

React 支持大多数 DOM 事件，包括：

  • 鼠标事件：onClick, onDoubleClick, onMouseEnter, onMouseLeave
  • 键盘事件：onKeyDown, onKeyUp, onKeyPress
  • 表单事件：onChange, onSubmit, onInput
  • 焦点事件：onFocus, onBlur
  • 触摸事件：onTouchStart, onTouchMove, onTouchEnd

最佳实践

  1. 避免在 render 方法中创建新函数，这可能导致不必要的重新渲染
  2. 对于性能敏感的场景，考虑使用事件委托
  3. 保持事件处理函数简洁，复杂逻辑可以提取到单独的方法中
  4. 使用有意义的函数命名，如 handleClick 而不是 clickHandler

通过掌握这些事件处理技巧，你将能够构建出更加交互性强的 React 应用。

Last Updated::