React自定义事件处理：最新实战技巧

React自定义事件处理：最新实战技巧

引用

CSDN

等

11

来源

1.

https://blog.csdn.net/qq_34645412/article/details/144770984

2.

https://blog.csdn.net/qq_38970408/article/details/136966281

3.

https://blog.csdn.net/sky6862/article/details/137528113

4.

https://blog.csdn.net/qinshensx/article/details/108494936

5.

https://juejin.cn/post/7064371133243457544

6.

https://time.geekbang.org/column/article/385964

7.

https://juejin.cn/post/7453480901370036224

8.

https://www.cnblogs.com/web-666/p/18149244

9.

https://cloud.tencent.com/developer/article/2054072

10.

https://zh-hans.legacy.reactjs.org/docs/optimizing-performance.html

11.

https://wayou.github.io/2018/12/27/React-%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96-%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E5%99%A8%E7%9A%84%E6%AD%A3%E7%A1%AE%E4%BD%BF%E7%94%A8/

React作为前端开发的重要框架之一，其自定义事件处理程序在实际项目中的应用越来越广泛。本文将分享最新的React自定义事件处理技巧，帮助开发者更高效地进行组件开发和维护。通过类组件和函数组件的不同绑定方法，以及如何实现双向数据绑定等实用内容，让你轻松掌握React事件处理的核心技能。

在React中，事件处理与原生DOM事件有所不同。React使用了合成事件（SyntheticEvent）系统，它是一个跨浏览器的事件包装器，可以提供更好的性能和一致性。React事件系统的基础知识包括：

1. 事件绑定：在JSX中使用驼峰命名法（如onClick而不是onclick）
2. 事件处理函数：通常在组件内部定义，可以直接调用或通过箭头函数传递参数
3. 阻止默认行为：使用event.preventDefault()
4. 阻止事件冒泡：使用event.stopPropagation()

类组件与函数组件的区别

在React Hooks出现之前，类组件和函数组件的主要区别在于状态管理。类组件通过this.state和this.setState管理状态，而函数组件则没有状态。但是随着Hooks的引入，函数组件也可以使用useState来管理状态，使得两者在功能上趋于一致。

类组件中的自定义事件

在类组件中，可以通过以下方式实现自定义事件：

class CustomEventComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleCustomEvent = (event) => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleCustomEvent}>Increment</button>
      </div>
    );
  }
}

函数组件中的自定义事件

在函数组件中，可以使用Hooks来实现类似的功能：

import React, { useState } from 'react';

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

  const handleCustomEvent = (event) => {
    setCount(count + 1);
  };

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

事件委托优化

在处理大量子元素的事件时，可以使用事件委托来提升性能。事件委托的基本原理是在父元素上监听事件，然后根据事件对象的target属性来判断具体是哪个子元素触发了事件。

import React, { useState } from 'react';

const EventDelegationComponent = ({ items }) => {
  const [selectedItem, setSelectedItem] = useState(null);

  const handleItemClick = (event) => {
    const itemId = event.target.dataset.id;
    setSelectedItem(itemId);
  };

  return (
    <div onClick={handleItemClick}>
      {items.map((item) => (
        <div key={item.id} data-id={item.id}>
          {item.name}
        </div>
      ))}
    </div>
  );
};

React默认提供的是单向数据流，即从父组件到子组件的数据传递。但是通过一些技巧，我们可以实现双向数据绑定，使得数据层和视图层保持同步。

使用mlyn库实现双向绑定

mlyn是一个专门用于React双向绑定的库，它允许我们创建可读写的state，并在更新时自动同步到根state。

import React from 'react';
import { useSubject } from 'mlyn';

const UserName = ({ name$ }) => {
  return <Mlyn.Input bindValue={name$} />;
};

const App = () => {
  const user$ = useSubject({ name: '' });
  return <UserName name$={user$.name} />;
};

双向绑定不仅限于UI交互，还可以与localStorage等其他数据源同步：

import { useSyncronize } from 'mlyn';

const App = () => {
  const user$ = useSubject({ name: '' });
  useSyncronize(user$.name, 'userName');
  return <UserName name$={user$.name} />;
};

使用useCallback优化事件处理函数

在函数组件中，频繁创建事件处理函数会导致不必要的渲染。使用useCallback可以避免这个问题：

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

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

  const handleIncrement = useCallback(() => {
    setCount(count + 1);
  }, [count]);

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

避免不必要的渲染

通过合理使用React.memo和useMemo，可以避免不必要的组件重新渲染，从而提升性能。

合理使用事件委托

在处理大量子元素的事件时，优先考虑使用事件委托，而不是为每个子元素单独添加事件监听器。

假设我们需要开发一个简单的待办事项应用，包含添加、删除和编辑功能。我们将使用React Hooks和双向数据绑定来实现这个应用。

import React, { useState } from 'react';
import { useSubject } from 'mlyn';

const TodoApp = () => {
  const [todos, setTodos] = useState([]);
  const todos$ = useSubject(todos);

  const addTodo = (text) => {
    setTodos([...todos, { id: Date.now(), text }]);
  };

  const removeTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  const editTodo = (id, newText) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, text: newText } : todo
      )
    );
  };

  return (
    <div>
      <h1>Todos</h1>
      <TodoList todos$={todos$} onRemove={removeTodo} onEdit={editTodo} />
      <TodoForm onAdd={addTodo} />
    </div>
  );
};

const TodoList = ({ todos$, onRemove, onEdit }) => {
  return (
    <ul>
      {todos$.map((todo) => (
        <li key={todo.id}>
          <TodoItem
            todo={todo}
            onRemove={onRemove}
            onEdit={onEdit}
          />
        </li>
      ))}
    </ul>
  );
};

const TodoItem = ({ todo, onRemove, onEdit }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [newText, setNewText] = useState(todo.text);

  const handleEdit = () => {
    setIsEditing(true);
  };

  const handleSave = () => {
    onEdit(todo.id, newText);
    setIsEditing(false);
  };

  if (isEditing) {
    return (
      <div>
        <input
          type="text"
          value={newText}
          onChange={(e) => setNewText(e.target.value)}
        />
        <button onClick={handleSave}>Save</button>
      </div>
    );
  }

  return (
    <div>
      <span>{todo.text}</span>
      <button onClick={handleEdit}>Edit</button>
      <button onClick={() => onRemove(todo.id)}>Remove</button>
    </div>
  );
};

const TodoForm = ({ onAdd }) => {
  const [text, setText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    onAdd(text);
    setText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button type="submit">Add Todo</button>
    </form>
  );
};

export default TodoApp;

通过这个案例，我们可以看到React自定义事件处理和双向数据绑定在实际项目中的具体应用。这些技术点的灵活运用，可以显著提升开发效率和代码质量。

总结来说，React自定义事件处理的核心在于理解类组件和函数组件的区别，掌握事件委托和性能优化技巧，以及如何通过双向数据绑定简化数据同步操作。通过不断实践和优化，我们可以开发出更高效、更稳定的React应用。