React 事件、组件通信

最新推荐文章于 2025-05-02 16:45:26 发布
最新推荐文章于 2025-05-02 16:45:26 发布
阅读量885 收藏 30
点赞数 28
分类专栏： React 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_82023822/article/details/147518790
版权

一、React 事件系统特点

  1. 合成事件（SyntheticEvent）

    • React 封装了原生事件，提供跨浏览器一致的事件接口。

    • 事件对象会被复用（需通过 e.persist() 保留引用）。

  2. 驼峰命名法
    事件名使用 onClick 而非 onclick。

  3. 事件委托
    React 默认在根节点委托事件，通过冒泡机制处理。

二、事件绑定方式

1. JSX 内联绑定

直接在 JSX 中绑定函数（推荐用于简单场景）：

function Button() {
  const handleClick = () => {
    console.log("按钮被点击");
  };

  return <button onClick={handleClick}>点击我</button>;
}

2. 传递参数

通过箭头函数或 bind 传递参数：

function List() {
  const handleItemClick = (id, e) => {
    console.log("点击项 ID:", id, "事件对象:", e);
  };

  return (
    <ul>
      {[1, 2, 3].map((item) => (
        <li
          key={item}
          onClick={(e) => handleItemClick(item, e)} // 箭头函数传参
        >
          项目 {item}
        </li>
      ))}
    </ul>
  );
}

三、事件对象（SyntheticEvent）

React 事件对象提供与原生事件一致的属性和方法，常用 API：

  • e.target：触发事件的 DOM 元素。

  • e.currentTarget：绑定事件的 DOM 元素。

  • e.preventDefault()：阻止默认行为。

  • e.stopPropagation()：阻止冒泡。

访问原生事件

通过 e.nativeEvent 访问底层原生事件：

function HandleNativeEvent() {
  const handleClick = (e) => {
    console.log("原生事件类型:", e.nativeEvent.type);
  };

  return <button onClick={handleClick}>点击查看原生事件</button>;
}

四、常见事件类型与示例

1. 表单事件

function Form() {
  const [inputValue, setInputValue] = useState("");

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("表单提交值:", inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={inputValue} onChange={handleChange} />
      <button type="submit">提交</button>
    </form>
  );
}

2. 鼠标事件

function MouseTracker() {
  const handleMouseMove = (e) => {
    console.log("鼠标位置:", e.clientX, e.clientY);
  };

  return <div onMouseMove={handleMouseMove}>移动鼠标查看坐标</div>;
}

3. 键盘事件

function KeyboardInput() {
  const handleKeyDown = (e) => {
    if (e.key === "Enter") {
      console.log("按下了回车键");
    }
  };

  return <input type="text" onKeyDown={handleKeyDown} />;
}

五、性能优化与最佳实践

1. 避免在 render 中创建新函数

错误示例（导致子组件不必要的重新渲染）：

// ❌ 每次渲染都会创建新函数
<button onClick={() => console.log("点击")}>按钮</button>

优化方案：

// ✅ 使用 useCallback 缓存函数
const handleClick = useCallback(() => {
  console.log("点击");
}, []);

return <button onClick={handleClick}>按钮</button>;

2. 阻止默认行为与冒泡

function PreventDemo() {
  const handleLinkClick = (e) => {
    e.preventDefault(); // 阻止链接跳转
    e.stopPropagation(); // 阻止事件冒泡
    console.log("链接点击被阻止");
  };

  return (
    <a href="https://react.dev" onClick={handleLinkClick}>
      阻止跳转的链接
    </a>
  );
}

3. 事件委托优化

利用 e.target 处理动态列表：

function List() {
  const handleListClick = (e) => {
    if (e.target.tagName === "LI") {
      console.log("点击项内容:", e.target.textContent);
    }
  };

  return (
    <ul onClick={handleListClick}>
      <li>项目 1</li>
      <li>项目 2</li>
      <li>项目 3</li>
    </ul>
  );
}

六、常见问题与解决方案

1. 事件处理函数中的 this 为 undefined

  • 原因：类组件中未正确绑定 this。

  • 解决：使用箭头函数或在构造函数中绑定。

2. 事件对象属性被重置

  • 现象：异步代码中访问 e.target 为 null。

  • 解决：调用 e.persist() 保留事件对象：

    const handleClick = (e) => {
  e.persist(); // 保留事件对象
  setTimeout(() => {
    console.log("异步访问:", e.target);
  }, 1000);
};

3. React 事件与原生事件混用

  • 注意：React 事件通过 document 委托，原生事件可能先于 React 事件触发。

  • 建议：优先使用 React 事件系统。

  

React 常用通信方式

一、父子组件通信

1. 父传子：Props

  • 场景：父组件向子组件传递数据。

  • 实现：

    // 父组件
function Parent() {
  const data = "Hello from Parent";
  return <Child message={data} />;
}

// 子组件
function Child({ message }) {
  return <div>{message}</div>;
}

2. 子传父：回调函数

  • 场景：子组件通知父组件事件或传递数据。

  • 实现：

    // 父组件
function Parent() {
  const handleChildEvent = (data) => {
    console.log("子组件传递的数据:", data);
  };
  return <Child onEvent={handleChildEvent} />;
}

// 子组件
function Child({ onEvent }) {
  return <button onClick={() => onEvent("Child Data")}>触发事件</button>;
}

二、兄弟组件通信

3. 状态提升（Lifting State Up）

  • 场景：兄弟组件共享同一状态，将状态提升到共同父组件。

  • 实现：

    // 父组件
function Parent() {
  const [sharedState, setSharedState] = useState("");

  return (
    <div>
      <ChildA onUpdate={setSharedState} />
      <ChildB state={sharedState} />
    </div>
  );
}

// 子组件A（更新状态）
function ChildA({ onUpdate }) {
  return <input onChange={(e) => onUpdate(e.target.value)} />;
}

// 子组件B（显示状态）
function ChildB({ state }) {
  return <div>当前值: {state}</div>;
}

三、跨层级组件通信

4. Context API

  • 场景：跨多层组件传递数据，避免逐层传递 Props。

  • 实现：

    // 1. 创建 Context
const ThemeContext = React.createContext("light");

// 2. 父组件提供数据
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 3. 深层子组件消费数据
function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  const theme = useContext(ThemeContext); // 直接获取 Context 值
  return <button>当前主题: {theme}</button>;
}

四、全局状态管理

5. Redux 或 Zustand

  • 场景：复杂应用中多个组件共享全局状态。

  • 实现（Redux 示例）：

    // 1. 定义 Store 和 Reducer
const store = createStore((state = { count: 0 }, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    default:
      return state;
  }
});

// 2. 父组件包裹 Provider
function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

// 3. 子组件连接 Store
function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+1</button>
      <p>Count: {count}</p>
    </div>
  );
}

五、非父子组件通信

6. Event Bus / 发布订阅模式

  • 场景：任意组件间通信（慎用，可能破坏 React 数据流）。

  • 实现：

    // 1. 创建事件总线
const eventBus = new EventEmitter();

// 2. 组件A发布事件
function ComponentA() {
  return (
    <button onClick={() => eventBus.emit("event", "Data from A")}>
      发送事件
    </button>
  );
}

// 3. 组件B订阅事件
function ComponentB() {
  const [data, setData] = useState("");

  useEffect(() => {
    eventBus.on("event", setData);
    return () => eventBus.off("event", setData); // 清理订阅
  }, []);

  return <div>接收数据: {data}</div>;
}

六、其他通信方式

7. Ref 传递（forwardRef + useImperativeHandle）

  • 场景：父组件直接调用子组件方法或操作 DOM。

  • 实现：

    // 子组件
const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    childMethod: () => {
      console.log("子组件方法被调用");
    },
  }));

  return <div>子组件</div>;
});

// 父组件
function Parent() {
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.childMethod()}>
        调用子组件方法
      </button>
    </div>
  );
}

七、通信方式对比与选择

方式适用场景优点缺点
Props父子组件简单数据传递简单直观深层嵌套时需逐层传递
Context API跨层级组件共享主题、用户信息等避免 Props 逐层传递不适合频繁更新的数据
Redux/Zustand复杂全局状态管理状态集中管理，易于调试增加项目复杂度
Event Bus非父子组件解耦通信高度灵活破坏 React 单向数据流
Ref 传递父组件操作子组件 DOM 或方法直接访问子组件实例违反组件封装原则，慎用

八、最佳实践

  1. 优先使用 Props 和 Context：保持数据流清晰。

  2. 避免过度使用 Redux：仅在全局状态复杂时引入。

  3. 慎用 Event Bus：容易导致代码难以维护。

  4. 优化性能：结合 React.memo、useMemo、useCallback 减少不必要的渲染。

react中组件通信
A_fork的博客
03-31 1513
今天我们来说一下react中的组件通信流程。 react中组件通信流程分为父传子、子传父、非父子之间传值。
React 之 组件通信方式
zhenshu_guo的博客
12-26 583
组件通信方式
React组件之间通信
长河的博客
08-01 1273
PropsContextPortalsRedux等十种方法，每种方法都有对应的适合它的场景，大家在设计自己的组件前，一定要好好考虑清楚采用哪种方式来解决通信问题。文初提到的那个小问题，最后我采用方案9，因为既然是小迭代项目，又是改别人的代码，当然最好避免对别人的代码进行太大幅度的改造。而pub/sub这种方式就挺小巧精致的，既不需要对别人的代码结构进行大改动，又可以满足产品需求。
React 组件的通信方式
qq_66118130的博客
11-18 517
在 React 应用开发中，组件之间的通信是构建复杂用户界面和交互逻辑的关键。正确地实现组件通信能够让我们的应用更加灵活和易于维护。以下是几种常见的 React 组件通信方式。
React 组件通信
记录常见的问题以及解决办法
11-07 1159
// 清理订阅}, []);return (
react父子组件通信
weixin_58017233的博客
09-18 403
react父子组件通信！
React之组件通信
weixin_51968651的博客
08-13 703
默认情况下，react中的组件都是独立的个体，只能使用自身的数据信息，为实现一个功能的分工，通常会将一个功能拆分为几个不同的组件进行，这一过程中就不可避免的要共享组件的数据，让每个组件之间进行通信
react 父子组件通信
weixin_64684095的博客
11-28 698
父组件可以将数据、函数或其他 JavaScript 对象作为`props`传递给子组件，子组件通过`props`接收并使用这些信息。
React组件通信方式总结
猫老板的豆
06-11 844
Redux 是一个用于管理 JavaScript 应用程序中状态（state）的库，它提供了一种可预测的方式来更新应用程序的状态，类似 Vue 中的。：父组件维护一个状态（state），这个状态将被传递给两个兄弟组件。无论是类组件还是函数式组件，父组件向子组件传递数据的方式都是使用。无论是类组件还是函数式组件，子组件向父组件传递数据的方式都是通过。例如：组件为父组件，B组件为子组件，C组件为孙子组件，现在通过。：（即：组件A是订阅者，组件B是发布者，先订阅再发布）），然后在组件树中的某个位置。
React中组件通信的几种方式
weixin_74009702的博客
11-17 1919
在构建复杂的React应用时，组件之间的通信是至关重要的。从简单的父子组件通信到跨组件状态同步，不同组件之间的通信方式多种多样。
React 父子组件通信的实现方法
10-15
在React中，组件间的通信是...这种设计有助于保持组件的独立性和可重用性，是React组件化开发的核心之一。在实际应用中，除了直接的props传递，还可以使用`context API`、`Redux`等工具来实现更复杂的跨层级组件通信。
关于react中组件通信的几种方式详解
08-28
子组件向父组件通信可以使用回调函数或自定义事件机制来实现。例如： ```jsx // List3.jsx import React, { Component } from 'react'; import PropTypes from 'prop-types'; class List3 extends Component { ...
React函数式组件通信方式
g841805的博客
07-08 959
react的数据流是自顶向下的，无法通过react直接进行兄弟组件通信，通常是子组件向父组件传递数据，再有父组件告知另一个子组件。组件层级关BrotherComponent>Child1、Child2，组件BrotherComponent调用了组件Child1和组件Child2，组件Child1和Child2是兄弟组件。对于跨级组件来说，可以采用层层传递属性的方式来实现组件之间的通信，但是当层级嵌套关系较深的时候，层层传递是比较繁琐且容易出错的，所以这里利用context来实现组件通信。
watch 数组 Vue 3
qq_30049249的博客
05-01 265
发现在选项式中配置 watch 监听数组不起作用。且在 setup 中监听数组时，当不设置 deep 参数时，也进行了深度监听。在 setup 中使用 watch 监听数组变化。
改善WebStorm性能
四荒八极的博客
04-29 1552
默认情况下，WebStorm会在你输入代码时进行分析，并高亮显示当前文件中发现的所有问题。它的主要目标是减少IDE的总体索引时间和CPU使用率，因此请确保在“Settings | Plugins”的“Installed”选项卡上启用了Shared Project Indexes插件。可以转到“Settings | Editor | Inspections”，找到“未使用的全局符号检查（Unused global symbol）”，取消选中。这些插件支持我们大多数用户的应用场景，但你不需要的插件可以禁用。
ruoyi-plus Spring Boot + MyBatis 中 BaseEntity 的设计与动态查询实践
字节叔叔
05-01 266
通过在BaseEntity中引入和params，我们实现了灵活的动态查询能力，在开发中极大简化了接口参数结构与查询逻辑。同时，也提升了系统的可维护性与扩展性，是开发大型后台系统中常用的技巧之一。如果你正在构建一个基于 Spring Boot + MyBatis 的后台管理系统，不妨考虑将这两个字段纳入你的BaseEntity设计中。
ruoyi-plus登录菜单默认折叠
tiantiantbtb的博客
04-30 170
└── AppMain.vue ← 中间内容区（显示实际页面内容）layout/index.vue ← 页面整体布局（顶层）├── Navbar.vue ← 顶部导航栏。├── Sidebar/index.vue ← 左侧菜单栏。
WebRtc11:SDP详解
最新发布
upset_poor的博客
05-02 284
对rtpmap进一步说明用fmtp。
DevExpress&WinForms-XtraMessageBox-使用教程
Amon的专栏
04-29 60
XtraMessageBox.Show("文件已成功保存", "操作提示");在这个示例中，消息框的内容为 “文件已成功保存”，标题显示为 “操作提示”，能够更清晰地告知用户消息的类别和重要程度。XtraMessageBox 支持丰富的自定义功能，通过设置不同的参数，我们可以让消息框更贴合具体的业务场景和用户需求。通过参数，可以为消息框添加不同的图标，以直观地向用户传达消息的类型。：显示一个蓝色的信息图标，用于表示常规的提示信息，例如 “操作成功”。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值